/* ==========================================================================
   JOBLIUM Career — 企業向けページ用スタイル
   2026-08-22 全面改訂
   同型カードの反復・中央揃え・ガラス調・大きな角丸・影を排除した版
   ========================================================================== */

/* --- 1. ヒーロー（C案：文書型） ------------------------------------------
   写真を全面に敷くのをやめ、右に添える形にした。
   地色は白から淡い黄緑へ落とす（トップ joblium.net/ と同じ作り）。
   画面上部で「緑のサイト」だと分かるようにするため。
   制度の事実は装飾的な数字バンドではなく、本文の一部として3列の表で置く。 */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #f3faec 100%);
  color: var(--ink); padding: 64px 0 0;
}

.hero__inner { max-width: var(--w-wide); margin-inline: auto; padding-inline: 1.25rem; }

.hero__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: stretch; }

.hero__eyebrow {
  display: block; font-size: .9375rem; font-weight: 800; letter-spacing: .1em;
  color: var(--brand); margin-bottom: 1.3rem;
}

.hero h1 {
  font-size: clamp(1.875rem, 1.15rem + 2.9vw, 3.125rem);
  line-height: 1.28; margin: 0 0 1.4rem; color: var(--ink-2);
  font-weight: 800; letter-spacing: .005em; text-wrap: pretty;
}

.hero__lead {
  font-size: clamp(16px, .7vw + 13px, 21px); line-height: 1.9; color: #4a5a44;
  margin: 0 0 2rem; max-width: 34em;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__photo {
  border-radius: var(--r-md);
  background-image: url(../img/hero-bg.jpg);
  background-image: image-set(url(../img/hero-bg.webp) type("image/webp"),
                              url(../img/hero-bg.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: 66% center;
  height: clamp(220px, 32vw, 340px);
}

.hero__stats {
  display: grid; grid-template-columns: 1fr;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero__stat { padding: 1.4rem 0; }
.hero__stat + .hero__stat { border-top: 1px solid var(--line-2); }
.hero__stat dt { font-size: .875rem; color: var(--muted); margin-bottom: .4rem; }
.hero__stat dd { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--ink); font-weight: 700; }

@media (min-width: 900px) {
  .hero { padding-top: 76px; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 2.75rem; }
  /* 左カラム（見出し〜ボタン）と同じ高さまで伸ばす。上に寄って余白が空くのを防ぐ */
  .hero__photo { height: 100%; min-height: 340px; }
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.75rem; }
  .hero__stat { padding: 1.7rem 2rem 1.7rem 0; }
  .hero__stat + .hero__stat { border-top: 0; }
}

/* --- 2. 横タイムライン ----------------------------------------------------
   「直接雇用までの進み方」「導入の流れ」で共用。カード化しない。 */
.timeline { counter-reset: tl; }
.timeline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.timeline__item {
  counter-increment: tl; position: relative;
  padding: 1.4rem 0 1.4rem 4rem;
  border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__item::before {
  content: "0" counter(tl);
  position: absolute; left: 0; top: 1.15rem;
  font-size: 1.5rem; font-weight: 700; color: var(--brand);
  font-feature-settings: "tnum"; line-height: 1;
}
.timeline__item h3 { font-size: 1.3125rem; margin: 0 0 .35rem; font-weight: 800; }
.timeline__item p { font-size: 1rem; line-height: 1.85; color: var(--muted); margin: 0; }
.timeline__item--after h3::after {
  content: "雇用後";
  margin-left: .6rem; font-size: .6875rem; font-weight: 700; vertical-align: 2px;
  color: var(--brand-dark); background: var(--tint-2);
  padding: .1rem .5rem; border-radius: 999px;
}

@media (min-width: 900px) {
  .timeline__list {
    grid-template-columns: repeat(5, 1fr); gap: 0;
    border-top: 1px solid var(--line);
    /* 数字を線の上に出すぶんの余白。線ごと下げている */
    margin-top: 2.9rem;
  }
  .timeline__item {
    padding: 1.6rem 1.4rem 0 0; border-bottom: 0;
  }
  /* 線に重ねず、線の上に置く */
  .timeline__item::before {
    top: -2.7rem; left: 0; background: transparent; padding-right: 0;
    font-size: 1.75rem;
  }
  .timeline__item::after {
    content: ""; position: absolute; left: 0; top: -1px;
    width: 100%; height: 3px; background: var(--tint-2);
  }
  .timeline__item--after::after { background: var(--brand); }
}

.timeline__note {
  margin: 2rem 0 0; padding-left: 1rem;
  border-left: 3px solid var(--brand);
  font-size: .9375rem; color: var(--ink);
}

/* --- 3. 番号つきカード（課題4項目） ---------------------------------------
   トップの .entry と同じ語彙。白い箱＋角丸＋薄い枠＋やわらかい影。 */
.issues { display: grid; gap: clamp(16px, 1.8vw, 24px); counter-reset: iss; }
.issue {
  counter-increment: iss;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2vw, 30px);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.issue:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.issue__num {
  display: block; font-size: .9375rem; font-weight: 800; letter-spacing: .1em;
  color: var(--brand); margin-bottom: .5rem;
}
.issue__num::before { content: "0" counter(iss); }
.issue h3 {
  font-size: 1.5625rem; margin: 0 0 .6rem; font-weight: 800; line-height: 1.45;
  display: flex; align-items: flex-start; gap: .65rem;
}
.issue h3 svg { flex: none; width: 24px; height: 24px; color: var(--brand); margin-top: .28rem; }
.issue p { font-size: 1.0625rem; line-height: 1.85; color: var(--muted); margin: 0; }

@media (min-width: 800px) {
  .issues { grid-template-columns: 1fr 1fr; }
}

/* --- 4. 考え方（引用型） --------------------------------------------------
   色付きボックスをやめ、左に太い緑ラインを引く。 */
.stance { border-left: 4px solid var(--brand); padding: .4rem 0 .4rem 1.6rem; }
.stance p { margin: 0 0 1rem; }
.stance p:last-child { margin-bottom: 0; }
.stance strong { color: var(--ink-2); }
.stance__lead { font-size: 1.1875rem; font-weight: 800; color: var(--ink-2); }

/* --- 5. 縦3ブロック（できること） -----------------------------------------
   横3カードをやめる。左に番号とアイコン、右に本文。 */
.blocks { display: grid; gap: 0; counter-reset: blk; }
.block {
  counter-increment: blk;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}
.block:last-child { border-bottom: 0; }
.block__side { display: block; }
.block__label {
  display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .9rem;
}
.block__label-en {
  font-size: .9375rem; font-weight: 800; letter-spacing: .16em; color: var(--brand-dark);
}
.block__num {
  font-size: 2.25rem; font-weight: 800; color: var(--brand); line-height: 1;
  font-feature-settings: "tnum";
}
.block__num::before { content: "0" counter(blk); }
.block__photo {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.block h3 { font-size: 1.5rem; margin: 0 0 .6rem; font-weight: 800; }
.block p { margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.85; }

@media (min-width: 820px) {
  /* 右の文章は、左の写真に対して天地の中央で揃える。
     ブロックの高さに引き伸ばすと、下に空きができて間延びする。 */
  .block { grid-template-columns: 38% 1fr; gap: 2.5rem; align-items: center; }
  .block__side { padding-top: .2rem; }
  .block > div:last-child { align-self: center; }
}

/* --- 6. 業務のカード（横に流す） ------------------------------------------
   トップのマーキーと同じ作り。カードを2周ぶん並べて -50% まで動かす。 */
.wmarquee { position: relative; overflow: hidden; margin-top: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.wmarquee__track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content;
  animation: wm-scroll 46s linear infinite;
}
.wmarquee.is-paused .wmarquee__track { animation-play-state: paused; }
@keyframes wm-scroll { to { transform: translateX(-50%); } }

.wcard {
  position: relative; margin: 0; flex: 0 0 auto;
  width: clamp(230px, 22vw, 300px);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.wcard img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; }
.wcard figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .68));
  color: #fff; font-size: 1.0625rem; font-weight: 800; letter-spacing: .02em;
}

.wmarquee__toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(255 255 255 / .86); box-shadow: 0 4px 12px rgb(0 0 0 / .18);
  display: flex; align-items: center; justify-content: center;
}
.wm-pause { width: 10px; height: 12px; border-left: 3px solid var(--brand-dark);
  border-right: 3px solid var(--brand-dark); }
.wm-play { display: none; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--brand-dark);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.wmarquee.is-paused .wm-pause { display: none; }
.wmarquee.is-paused .wm-play { display: block; }

/* --- 7. 業務カテゴリー表 --------------------------------------------------- */
.cat-table { border-top: 1px solid var(--line); }
.cat-row {
  display: grid; gap: .5rem 2rem; grid-template-columns: 1fr;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.cat-row__name { font-weight: 600; color: var(--ink-2); font-size: 1rem; margin: 0; }
.cat-row__items { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.cat-row__items li { font-size: 1rem; color: var(--muted); }
@media (min-width: 720px) {
  .cat-row { grid-template-columns: 200px 1fr; align-items: baseline; }
}

/* --- 8. 帯写真 ------------------------------------------------------------- */
.band {
  height: clamp(160px, 20vw, 300px);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.band--flow {
  background-image: url(../img/band-flow.jpg);
  background-image: image-set(url(../img/band-flow.webp) type("image/webp"),
                              url(../img/band-flow.jpg) type("image/jpeg"));
}

/* --- 9. 実績セクションの薄い背景 ------------------------------------------ */
/* 旧：セクション背景に白を90%重ねて薄く敷いていたが、
   文字が読みにくいうえ写真も何か分からず、どっちつかずだった。
   帯（.band--cases）としてはっきり見せる形に変更した。 */
.band--cases {
  background-image: url(../img/band-cases.jpg);
  background-image: image-set(url(../img/band-cases.webp) type("image/webp"),
                              url(../img/band-cases.jpg) type("image/jpeg"));
  background-position: center 62%;
}

/* --- 10. 運営者 ------------------------------------------------------------ */
.about__body { font-size: 1rem; line-height: 2.05; }
.about__body p { margin: 0 0 1.4em; }
.about__body p:last-child { margin-bottom: 0; }
.about__meta {
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: grid; gap: .5rem 2rem; font-size: .9375rem; color: var(--muted);
}
.about__meta dt { font-weight: 600; color: var(--ink); }
.about__meta dd { margin: 0 0 .4rem; }
@media (min-width: 640px) {
  .about__meta { grid-template-columns: 8rem 1fr; }
  .about__meta dd { margin-bottom: 0; }
}

/* --- 11. FAQ（カードにしない） -------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; font-weight: 600; color: var(--ink-2); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; flex: none; color: var(--brand); font-weight: 700; line-height: 1.6;
}
.faq details[open] summary::after { content: "−"; }
.faq__a {
  margin: 0; padding: 0 0 1.5rem;
  font-size: 1rem; color: var(--muted); line-height: 1.85;
}

/* --- 12. 資料請求（左右2カラム・非対称） ---------------------------------- */
.form-section { position: relative; background: var(--brand-deep); color: #fff; }
.form-section::before,
.form-section::after { content: ""; position: absolute; inset: 0; }
.form-section::before {
  background-image: url(../img/form-bg.jpg);
  background-image: image-set(url(../img/form-bg.webp) type("image/webp"),
                              url(../img/form-bg.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
}
.form-section::after {
  background: linear-gradient(135deg, rgba(63,135,40,.90), rgba(74,152,47,.86));
}
.form-section > .wrap-form { position: relative; z-index: 1; }

.form-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .form-grid { grid-template-columns: 38% 1fr; gap: 3.5rem; }
}

.form-intro h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 .8rem; }
.form-intro p { color: rgb(255 255 255 / .88); font-size: 1rem; line-height: 1.85; margin: 0 0 1.75rem; }
.form-intro__label { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: rgb(255 255 255 / .7); margin-bottom: .8rem; }
.form-gifts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.form-gifts li {
  font-size: .9375rem; color: #fff; padding-left: 1.5rem; position: relative;
}
.form-gifts li::before { content: "✓"; position: absolute; left: 0; color: #b7dd9a; font-weight: 700; }

.form-card {
  background: #fff; color: var(--ink);
  border-radius: var(--r-lg); padding: 2rem 1.5rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
}
@media (min-width: 720px) { .form-card { padding: 2.5rem; } }

.field { margin-bottom: 1.35rem; }
.field > label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .5rem; color: var(--ink-2); }
.field .req, .field .opt {
  font-size: .6875rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 3px; margin-left: .5rem; vertical-align: 2px;
}
.field .req { background: #FBE9E9; color: #A32B2B; }
.field .opt { background: var(--line-2); color: var(--muted); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%; padding: .85rem .9rem; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field__hint { font-size: .8125rem; color: var(--muted); margin: .45rem 0 0; }

.radio-grid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .radio-grid { grid-template-columns: repeat(2, 1fr); } }
.radio-grid label {
  display: flex; align-items: center; gap: .6rem; font-size: .9375rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .7rem .9rem; cursor: pointer; background: #fff;
}
.radio-grid label:hover { border-color: var(--brand); background: var(--tint); }
.radio-grid input { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }

.form-privacy { font-size: .8125rem; color: var(--muted); margin: 1.5rem 0; }
.hp-field { position: absolute; left: -9999px; }

.form-alert { border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.form-alert--ok { background: var(--tint); border: 1px solid var(--brand); color: var(--brand-dark); }
.form-alert--ng { background: #FDF1F1; border: 1px solid #E7B9B9; color: #A32B2B; }
.form-alert ul { margin: .5rem 0 0; padding-left: 1.2em; }

/* --- 13. コラム抜粋 -------------------------------------------------------- */
.post-grid-lp { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .post-grid-lp { grid-template-columns: repeat(3, 1fr); } }

.post-item { border-top: 2px solid var(--ink-2); padding-top: 1rem; }
.post-item__cat { font-size: .75rem; font-weight: 700; color: var(--brand); letter-spacing: .06em; }
.post-item__title { font-size: 1.0625rem; line-height: 1.65; margin: .5rem 0 .6rem; font-weight: 800; }
.post-item__title a { color: var(--ink-2); }
.post-item__meta { font-size: .75rem; color: var(--muted); margin: 0; }

/* --- 14. 補助 -------------------------------------------------------------- */
.note-small { font-size: .8125rem; color: var(--muted); margin-top: 1.25rem; }
.cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 15. 課題セクションの写真（2026-08-22 追加） ---------------------------
   見出しの右が白く空いていたので、縦位置の写真を添える。
   ヒーローが横位置なので、こちらは縦位置にして構図を変えている。
   画像ファイルが無いときは PHP 側で要素ごと出力しない（1カラムに戻る）。 */
.issue-head { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }

.issue-head .section-head { margin-bottom: 0; max-width: none; }

.issue-head__photo {
  border-radius: var(--r-md);
  background-image: url(../img/band-issue.jpg);
  background-image: image-set(url(../img/band-issue.webp) type("image/webp"),
                              url(../img/band-issue.jpg) type("image/jpeg"));
  background-size: cover;
  /* 素材が正方形になったので、そのまま中央で使う */
  background-position: center;
  aspect-ratio: 1 / 1;
  max-height: 300px;
  justify-self: start;
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1000px) {
  /* 写真を左、見出しを右に置く。ヒーローが「文章左・写真右」なので、
     ここで左右を入れ替えて視線の流れに変化をつける。
     読み上げ順は見出しが先のまま（DOM順は変えず grid-column で入れ替える）。 */
  .issue-head { grid-template-columns: 300px 1fr; gap: 3rem; }
  .issue-head .section-head { grid-column: 2; grid-row: 1; }
  .issue-head__photo { grid-column: 1; grid-row: 1; justify-self: start; }
}

.issue-head + .issues { margin-top: 48px; }

/* --- 16. 本文中のCTA（2026-08-22 復活） ------------------------------------
   改稿時に本文のボタンを全部落としてしまい、ヒーローと追従バー以外に
   CTAが1本も無い状態になっていた。文脈の切れ目に戻す。 */
.cta-note {
  margin: 2.5rem 0 .9rem;
  font-size: .9375rem;
  color: var(--muted);
}
.cta-row { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-note + .cta-row { margin-top: 0; }

/* --- サービスブロックの補助テキスト（2026-08-28 追加） -------------------- */
.block__lead { color: var(--brand-dark); margin-bottom: .55rem; }
.block__note {
  margin-top: .8rem; padding: .7rem .9rem;
  background: var(--tint); border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  font-size: .9375rem; color: var(--ink);
}