.job-nav { position: relative; z-index: 10; height: 40px; background: #fff; }
.job-nav .nav-list { justify-content: flex-end; height: 40px; padding-right: 20px; gap: 28px; }
.job-nav .nav-list__item::after {
  content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease;
}
.job-nav .nav-list__item:hover::after,
.job-nav .nav-list__item.is-current::after { transform: scaleX(1); }
.job-hero { text-align: center; background-image: url("../i/hero_bg_job.png"); }
.job-hero--top { height: 450px; }
.job-hero--sub { height: 350px; }
.job-hero__inner { padding-top: 180px; }
.job-hero--sub .job-hero__inner { padding-top: 130px; }
.job-hero__heading { margin: 0; font-weight: var(--font-weight-bold); }
.find-your-way { display: block; width: 624px; height: 54.39px; margin-inline: auto; overflow: visible; }
.job-hero__japanese { display: block; margin: 22px 0 0; font-family: var(--font-hero-japanese); font-size: 26px; font-weight: var(--font-weight-regular); line-height: 1.6; }
.job-hero__english { display: block; color: var(--color-accent); font-size: 46px; line-height: 1.3; }
.job-hero--sub .job-hero__japanese { margin-top: 14px; }

/* 以下は支給SVG Artista CSS。対象セレクタのみ限定し、値・タイミングは維持。 */
/***************************************************
 * Generated by SVG Artista on 9/16/2026, 8:05:37 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg.find-your-way .svg-elem-1 {
  stroke-dashoffset: 224.6147003173828px;
  stroke-dasharray: 224.6147003173828px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
}

svg.find-your-way.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-2 {
  stroke-dashoffset: 131.7886962890625px;
  stroke-dasharray: 131.7886962890625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.find-your-way.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-3 {
  stroke-dashoffset: 276.08154296875px;
  stroke-dasharray: 276.08154296875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
}

svg.find-your-way.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-4 {
  stroke-dashoffset: 262.293701171875px;
  stroke-dasharray: 262.293701171875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.find-your-way.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-5 {
  stroke-dashoffset: 203.01950073242188px;
  stroke-dasharray: 203.01950073242188px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.find-your-way.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-6 {
  stroke-dashoffset: 268.799560546875px;
  stroke-dasharray: 268.799560546875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s;
}

svg.find-your-way.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-7 {
  stroke-dashoffset: 255.4210662841797px;
  stroke-dasharray: 255.4210662841797px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.find-your-way.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-8 {
  stroke-dashoffset: 273.3758544921875px;
  stroke-dasharray: 273.3758544921875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s;
}

svg.find-your-way.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-9 {
  stroke-dashoffset: 345.9248962402344px;
  stroke-dasharray: 345.9248962402344px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.find-your-way.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-10 {
  stroke-dashoffset: 238.34591674804688px;
  stroke-dasharray: 238.34591674804688px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.find-your-way.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

svg.find-your-way .svg-elem-11 {
  stroke-dashoffset: 203.01962280273438px;
  stroke-dasharray: 203.01962280273438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.find-your-way.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: #df2c15;
}

/* job TOP本文。Hero・カテゴリナビ・Artistaは上記の既存指定を使用。 */
.job-top { padding-top: 64px; padding-bottom: 100px; }
.job-top__copy { margin: 0; font-size: 14px; line-height: 2; }
.job-top__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; }
.job-top__links > .card-link { flex: 0 0 300px; }
.job-top__links .card-link__title { font-size: 22px; }
.job-top__links .card-link__en { font-size: 12px; }
.job-top__section { margin-top: 100px; }
.job-top__eyebrow { margin: 0 0 12px; color: var(--color-accent); font-size: 13px; font-weight: var(--font-weight-medium); }
.job-top__heading { margin: 0 0 32px; font-size: 28px; line-height: 1.6; font-weight: var(--font-weight-bold); }
.job-top__pending { margin: 0; padding: 28px 0; border-block: 1px solid #d4d4d4; font-size: 14px; color: #666; }
.job-top__search { display: grid; grid-template-columns: repeat(2, 465px); gap: 30px; margin-top: 40px; }
.job-top__search h3 { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #d4d4d4; font-size: 24px; font-weight: var(--font-weight-bold); }
.job-top__search h3 span { margin-left: 12px; color: var(--color-accent); font-size: 12px; font-weight: var(--font-weight-regular); }
.job-top__search ul { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
/* HOME・job TOPの職種／勤務地の各リンク自身に色を指定する。 */
.job-top__search .job-top__search-link {
  color: var(--color-text);
  transition: color 180ms ease;
}
.job-top__search .job-top__search-link:hover,
.job-top__search .job-top__search-link:focus-visible { color: var(--color-accent); }
.job-top__filters { display: flex; justify-content: center; gap: 16px; margin-top: 48px; }
.job-top__all { margin-top: 32px; padding-top: 32px; border-top: 1px solid #d4d4d4; text-align: center; }
.job-top__staff { display: grid; grid-template-columns: repeat(3, 300px); gap: 30px; }
.job-staff .card-link__image { aspect-ratio: 1; height: 252px; }
.job-staff .card-link__body { margin-top: 24px; }
.job-staff .card-link__title { font-size: 22px; }
.job-staff__role { margin: 0 0 4px; color: var(--color-accent); font-size: 11px; font-weight: var(--font-weight-medium); }
.job-staff__english { margin: 4px 0 0; font-size: 11px; }
.job-staff .card-link__icon { top: auto; bottom: 0; }
.job-top__news-heading { display: flex; align-items: center; justify-content: space-between; }

/* 旧サイトの公開求人8件を、新デザインの行構造で表示する。 */
.job-results { margin: 0; padding: 0; list-style: none; }
.job-results__row { display: grid; grid-template-columns: 84px 96px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid #d4d4d4; font-size: 13px; }
.job-results__row:last-child { border-bottom: 1px solid #d4d4d4; }
/* 行全体をaにしたTOPでは、一覧の最終行だけに下罫線を残す。 */
.job-results--linked > li:not(:last-child) > .job-results__row { border-bottom: 0; }
.top-jobs .job-results--linked .job-results__row { transition: background-color 180ms ease; }
.top-jobs .job-results--linked .job-results__row:hover,
.top-jobs .job-results--linked .job-results__row:focus-visible { background-color: rgba(0, 0, 0, 0.03); }
.job-results__office { padding: 2px 6px; border-radius: 3px; color: #fff; text-align: center; font-size: 12px; }
.job-results__office--mishima { background: #e71f19; }
.job-results__office--shimizu { background: #04287e; }
.job-results__office--hiratsuka { background: #76a315; }
.job-results__office--other { background: #000; }
.job-results__date { color: #777; }
.job-results__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.job-results__heading h3 { margin: 0; font-size: 14px; font-weight: var(--font-weight-bold); }
.job-results__genre { padding: 2px 8px; border-radius: 3px; background: #3e3a39; color: #fff; font-size: 11px; font-weight: var(--font-weight-medium); }
.job-results__new { padding: 1px 4px; background: var(--color-accent); color: #fff; font-size: 9px; }
.job-results__body p { margin: 8px 0 0; color: #777; line-height: 1.8; overflow-wrap: anywhere; }
/* 特集の件数はDBに従い、ラフの2件へ固定しない。 */
.job-top__filters { flex-wrap: wrap; }

/* Slick本体の構造のみ利用し、テーマCSSの矢印・フォントは使用しない。 */
.job-news { margin: 0; padding: 0; list-style: none; }
.job-news__row { display: grid; grid-template-columns: 110px 100px 1fr; gap: 24px; align-items: baseline; padding: 28px 24px; border-top: 1px solid #d4d4d4; font-size: 13px; transition: background-color 180ms ease; }
.job-news > li:last-child .job-news__row { border-bottom: 1px solid #d4d4d4; }
.job-news__row:hover,
.job-news__row:focus-visible { background-color: rgba(0, 0, 0, 0.03); }
.job-news__category { padding: 2px 10px; border-radius: 10px; background: #3e3a39; color: #fff; text-align: center; font-size: 11px; }
.job-news__category:empty { visibility: hidden; }
.job-news__title { overflow-wrap: anywhere; }

/* SP共通ブレイクポイント：PCの既存指定は維持する。 */
@media (max-width: 480px) {
  .job-nav { display: none; }
  .job-hero--top { height: 300px; }
  .job-hero__inner { padding-top: 72px; }
  .find-your-way { width: 100%; max-width: 624px; height: auto; }
  .job-hero--top .job-hero__inner { padding-top: 150px; }
  .job-hero--top .find-your-way { width: 270px; max-width: 100%; }
  .job-hero--top .job-hero__japanese { font-size: 19px; }
  .job-hero__english { font-size: 32px; }
  .job-hero__japanese { font-size: 21px; }
  .job-top__links { margin-top: 28px; }
  .job-top { padding-top: 40px; padding-bottom: 56px; }
  .job-top__section { margin-top: 56px; }
  .job-top__heading { font-size: 24px; }
  .job-top__search { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .job-top__search h3 { font-size: 22px; }
  .job-top__search ul { gap: 4px 16px; }
  .job-top__search .job-top__search-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .job-top__filters { gap: 12px; margin-top: 28px; }
  .job-staff .card-link__image { height: auto; }
  .job-top__news-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
  .job-top__news-heading .job-top__heading { margin-bottom: 0; }
  .job-results__row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
  .job-results__body { grid-column: 1 / -1; min-width: 0; }
  .job-news__row { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 20px 8px; font-size: 14px; }
  .job-news__category { justify-self: start; }
  .job-news__title { grid-column: 1 / -1; }
}

/* TOP HeroのArtistaだけロゴに近い赤へ統一。 */
svg.find-your-way [class*="svg-elem-"] { stroke: #df2c15; }
