/* ========== コラボ・お問い合わせ（法人・団体様向けサービス一覧） ========== */
.biz-page{background:var(--c-ivory);padding-bottom:40px}

/* ========== 共通の部品 ========== */
.ex{list-style:none;font-size:16px;line-height:1.7;color:var(--c-charcoal)}
.ex li{position:relative;padding-left:16px}
.ex li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--c-orange-logo)}
.arw{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--c-navy);display:grid;place-items:center;
}
.arw::before{
  content:"";width:12px;height:10px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 5h10M6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 5h10M6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* CTA は黄＋紺の文字＋紺の枠＋2pxの影、サブボタンは白＋紺の文字＋紺の枠＋2pxの影（色規定） */
.btn-cta,.btn-sub{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 16px;border-radius:var(--radius-pill);border:2px solid var(--c-navy);box-shadow:2px 2px 0 var(--c-navy);
  font-weight:700;font-size:16px;color:var(--c-navy);text-decoration:none;
}
.btn-cta{background:var(--c-yellow)}
.btn-sub{background:var(--c-white)}

/* ========== ページ頭 ========== */
.pg-hero{padding:40px 16px 32px;background:var(--c-white)}
/* キッカーは日本語なので英字用の字間を詰める。h1 との間は既存のニュース欄と同じ10px */
.pg-hero .section-kicker{letter-spacing:.06em;margin-bottom:10px}
.pg-hero h1{font-size:32px;font-weight:700;color:var(--c-navy);line-height:1.4;margin-bottom:12px}
.pg-hero .lead{font-size:16px;margin-bottom:24px}
/* 目次：押すと各節へ移動する。枠線＋下向きの山形だとプルダウンに見えるため、
   下の各節と同じ「影のカード」にし、矢印は丸なしの下向き矢印（ページ内の移動）にする */
.toc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toc a{
  display:flex;align-items:center;justify-content:space-between;gap:6px;height:100%;
  padding:12px 10px 12px 12px;border-radius:10px;background:var(--c-white);box-shadow:0 2px 10px rgba(20,38,104,.16);
  font-size:13px;font-weight:700;color:var(--c-navy);line-height:1.4;text-decoration:none;
}
/* 目次・「詳しく見る」の矢印は丸なしの矢印だけ */
.toc .arw,.btn-sub .arw{width:auto;height:auto;background:none}
.toc .arw::before,.btn-sub .arw::before{width:14px;height:12px;background:var(--c-navy)}
/* 目次の矢印は、小さめの矢じり＋長い線。ページ内へは下向き、ページの外へ出るもの（.ext）は右向き */
.toc .arw::before{width:10px;height:12px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v11.5M1.5 8L6 12.5L10.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v11.5M1.5 8L6 12.5L10.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.toc .ext .arw::before{width:12px;height:10px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6h11.5M8 1.5L12.5 6L8 10.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6h11.5M8 1.5L12.5 6L8 10.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ========== 各サービスの節 ========== */
.svcs{padding:32px 16px 16px;display:grid;gap:32px}
.svc{background:var(--c-white);border:1px solid var(--c-navy);border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(20,38,104,.18)}
/* 見出し：写真は使わず、アイコン＋淡色で見せる（画像を集めずに済むように）。
   水色の帯に白い丸のアイコン */
.svc-head{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--c-sky-pale)}
.svc-head h2{margin:0;font-size:20px;line-height:1.4;color:var(--c-navy)}
.ico{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--c-white)}
.ico svg{width:34px;height:34px}
.svc-body{padding:20px 16px 20px;display:grid;gap:16px}
.svc-body .desc{font-size:16px}
.svc-body .info{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.svc-body .info dt{font-weight:700;color:var(--c-navy)}
.msg{font-size:16px;font-weight:700;color:var(--c-navy);margin-bottom:6px}
.svc-body .note{background:var(--c-ivory);border-radius:8px;padding:12px 14px;font-size:14px}
.svc-body .note-ttl{font-weight:700;color:var(--c-navy);margin-bottom:2px}
.btns{display:grid;gap:10px}
/* 本文中の文字リンク（下線付き） */
.txt-link a{font-size:16px;font-weight:700;color:var(--c-navy);text-decoration:underline;text-underline-offset:3px}
.caution{font-size:14px;color:var(--c-charcoal);margin-top:-8px}
/* メディア実績：左に画像、右に日付とタイトルの縦並びリスト。じっくり読むものではないので文字は小さめ */
.works-list{list-style:none;display:grid;gap:8px}
.works-list a{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;padding:8px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(31,58,138,.2);text-decoration:none}
.works-list img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--c-cream)}
.works-txt{display:grid;gap:2px;min-width:0}
.works-txt time{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--c-grey)}
.works-ttl{font-size:13px;font-weight:600;line-height:1.5;color:var(--c-charcoal);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.works-list a:hover .works-ttl{color:var(--c-navy);text-decoration:underline}}

/* ========== その他 ========== */
.other{margin:16px;padding:24px 16px;border-radius:12px;background:var(--c-sky-pale);display:grid;gap:12px}
.other h2{font-size:24px;margin:0}
.other p{font-size:16px}
/* 求人を探して来た人向けの案内。「その他のご相談」の枠の外、すぐ下に置く */
.recruit-note{margin:16px 16px 0;font-size:16px;color:var(--c-charcoal)}
.recruit-note a{color:var(--c-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin:0 2px}

/* ========== PC ========== */
@media (min-width:993px){
  /* 本文は 720px の1列。節ごとに中身の量が大きく違うため、横に並べず縦に積む。
     中身は1列なので、幅を広げると右側が空くだけになる */
  .pg-hero{padding:72px calc((100% - 720px)/2) 48px}
  .pg-hero h1{font-size:48px}
  .pg-hero .lead{font-size:18px;margin-bottom:32px}
  .toc{grid-template-columns:repeat(4,1fr);gap:12px}
  /* PC は規定どおり：ナビリンク 16px */
  .toc a{font-size:16px;padding:14px 12px 14px 14px}
  .svcs{max-width:720px;margin:0 auto;padding:56px 0 24px;gap:40px}
  .svc-head{padding:14px 28px}
  /* 節の見出しは規定の h3（24px）。SP の 20px は1行に収めるための逸脱 */
  .svc-head h2{font-size:24px}
  /* 表・注意事項・注記は規定の本文・中（16px）。SP の 14px は密なUIとして扱った値 */
  .svc-body .info,.svc-body .note,.caution{font-size:16px}
  .svc-body{padding:28px 32px 32px;gap:20px}
  .svc-body .desc{font-size:18px}
  /* ボタンは横に並べ、幅は中身に合わせる */
  .btns{grid-template-columns:repeat(auto-fit,minmax(0,320px));justify-content:start;gap:12px}
  .works-list{grid-template-columns:repeat(3,1fr);gap:12px}
  /* 画像はカードの上と左右いっぱいに付け、文字の部分だけ余白を取る。枠線は画像に隠れないよう border で描く */
  .works-list a{height:100%;grid-template-columns:1fr;align-items:start;gap:0;padding:0;overflow:hidden;box-shadow:none;border:1px solid var(--c-navy)}
  .works-list img{width:100%;border-radius:0}
  .works-txt{padding:8px 10px 10px}
  /* タイトルが1行のカードも2行分の高さを取り、3枚のカードの下端をそろえる */
  .works-ttl{min-height:3em}
  .other{max-width:520px;margin:16px auto 0;padding:32px;text-align:center;justify-items:center}
  .other .btn-cta{max-width:320px}
  .recruit-note{max-width:520px;margin:16px auto 0;text-align:center}
}