@charset "UTF-8";
/* 工場求人ナビ 特集ページ IL版（岩手県／20代／半導体） — ローカル確認用 静的書き出し
   ・共通スタイル → 各ページ固有スタイル の順に記述
   ・ページ固有スタイルは <body class="page-iwate|page-20s|page-semi"> で出し分け
   ・LPCでは special.html の外枠 <div class="page-(HTMLファイル名)"> で出し分ける。page-semi は page-semiconductor に置換し、page-20s の指定は 30s〜50s にも適用(717450-79) */
/* ── Webfonts ──────────────────────────────────────────────
   工場求人ナビ uses Noto Sans JP for Japanese copy and Inter for
   Latin text / numerals. Both are served from Google Fonts. If you
   are shipping offline, replace these @import lines with local
   @font-face rules pointing at bundled .woff2 files. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════
   COLORS — 工場求人ナビ (NISSO Factory Job Navi)
   Sampled from the production Figma. Base palette + semantic aliases.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand primary: teal ───────────────────────────────── */
  --teal-500: #4bccbe;   /* primary brand mark, "応募する" CTA, checkmarks */
  --teal-600: #3bb3a6;   /* hover */
  --teal-700: #2f9b8f;   /* active */
  --teal-100: #e4f7f4;   /* tint surface */

  /* ── Accent: amber (primary search CTA) ────────────────── */
  --amber-500: #f1aa00;
  --amber-600: #d99800;  /* hover */
  --amber-700: #bd8500;  /* active */

  /* ── Accent: magenta / pink (badges, alerts) ───────────── */
  --pink-500: #fd4477;
  --pink-600: #e8336a;
  --pink-100: #ffe3ec;

  /* ── Link / info: blue ─────────────────────────────────── */
  --blue-500: #018fd9;   /* job titles, text links, secondary CTA */
  --blue-600: #0179b8;
  --blue-100: #e3f1fb;
  --blue-deep: #1a27d5;  /* NISSO corporate blue */
  --navy-700: #1c2c63;   /* deep navy — article callout flags, merit ribbons */
  --navy-100: #c3cfe2;   /* navy-tinted hairline for clipped chips */

  /* ── Slate (UI chrome: section bars, labels, tabs) ─────── */
  --slate-700: #5b6b7e;  /* active tab, strong label */
  --slate-600: #737f8f;  /* section header bars, spec labels */
  --slate-400: #99a9b0;  /* muted / meta text */
  --slate-200: #dfe5ea;  /* light-blue surface inside frames */

  /* ── Neutrals ──────────────────────────────────────────── */
  --ink-900: #1a1a1a;    /* primary text */
  --ink-700: #444444;    /* secondary text */
  --white:   #ffffff;
  --gray-050: #f5f5f5;
  --gray-100: #f1f2f3;   /* page background */
  --gray-150: #ededed;
  --gray-200: #e3e5e9;
  --gray-300: #d9d9d9;   /* placeholder / disabled fill */
  --gray-400: #c4c9d0;   /* borders */
  --charcoal: #3a3a3a;   /* footer */

  /* ── Status ────────────────────────────────────────────── */
  --red-500: #ff0707;    /* required / error */
  --red-news: #ff3245;   /* NEW corner badge on job cards */
  --beige-200: #eed3c5;  /* soft highlight */

  /* ── Semantic aliases ──────────────────────────────────── */
  --color-primary: var(--teal-500);
  --color-primary-hover: var(--teal-600);
  --color-cta: var(--amber-500);
  --color-cta-hover: var(--amber-600);
  --color-link: var(--blue-500);
  --color-badge: var(--pink-500);

  --text-body: var(--ink-900);
  --text-muted: var(--slate-400);
  --text-meta: var(--ink-700);
  --text-link: var(--blue-500);
  --text-on-dark: var(--white);
  --text-on-primary: var(--white);

  --surface-page: var(--gray-100);
  --surface-card: var(--white);
  --surface-soft: var(--slate-200);
  --surface-bar: var(--slate-600);
  --surface-footer: var(--charcoal);
  --surface-label: var(--slate-600);

  --border-default: var(--gray-400);
  --border-strong: var(--ink-900);
  --border-link: var(--blue-500);
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY — 工場求人ナビ
   Noto Sans JP for Japanese, Inter for Latin / numerals.
   The site runs fairly small, dense type (10–18px) with bold weights
   for emphasis. Numerals (salary, counts) lean on Inter Bold.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Families ──────────────────────────────────────────── */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-base: var(--font-jp);
  --font-num: var(--font-latin);

  /* ── Weights ───────────────────────────────────────────── */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-bold: 700;    /* @kind font */
  --fw-black: 900;   /* @kind font */

  /* ── Size scale (px) ───────────────────────────────────── */
  --fs-10: 10px;   /* fine print, tag chips */
  --fs-12: 12px;   /* meta, nav sub-labels */
  --fs-13: 13px;
  --fs-14: 14px;   /* body small, breadcrumb, h1 page-title text */
  --fs-15: 15px;   /* long-form body */
  --fs-16: 16px;   /* default body, keyword links */
  --fs-18: 18px;   /* section bar headings (h2) */
  --fs-20: 20px;
  --fs-24: 24px;   /* big numerals, hero */
  --fs-28: 28px;

  /* ── Line heights ──────────────────────────────────────── */
  --lh-tight: 1.2; /* @kind font */
  --lh-snug: 1.4;  /* @kind font */
  --lh-body: 1.7;  /* @kind font */ /* dense JP paragraph copy */

  /* ── Letter spacing ────────────────────────────────────── */
  --ls-tight: 0;    /* @kind font */
  --ls-jp: 0.04em;  /* @kind font */ /* JP body reads better slightly tracked */

  /* ── Semantic roles ────────────────────────────────────── */
  --text-h1: var(--fw-bold) var(--fs-14)/var(--lh-snug) var(--font-jp);
  --text-h2: var(--fw-bold) var(--fs-18)/var(--lh-tight) var(--font-jp);
  --text-body-font: var(--fw-regular) var(--fs-16)/var(--lh-body) var(--font-jp);
  --text-small-font: var(--fw-regular) var(--fs-12)/var(--lh-snug) var(--font-jp);
}

/* ════════════════════════════════════════════════════════════
   SPACING · RADII · SHADOWS · LAYOUT — 工場求人ナビ
   The site is a fixed 1440px PC layout with a 1000px content column
   inset 220px from each edge. Components use modest radii (2–6px)
   and a single soft card shadow.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (px) ────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;   /* the workhorse gap in this design */
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-30: 30px;
  --space-40: 40px;

  /* ── Layout ────────────────────────────────────────────── */
  --layout-page-width: 1440px;
  --layout-content-width: 1000px;
  --layout-gutter: 220px;     /* inset from viewport edge to content */
  --header-height: 80px;
  --section-bar-height: 72px; /* gray h2 bar inside frames */

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-2: 2px;
  --radius-4: 4px;    /* keyword pills, inputs */
  --radius-6: 6px;    /* buttons, cards */
  --radius-pill: 999px;

  /* ── Borders ───────────────────────────────────────────── */
  --bw-hair: 1px;
  --bw-thick: 2px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-inset-line: inset 0 0 0 1px rgba(0, 0, 0, 0.1);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
}
/* ▲▲▲ デザイントークン ここまで ▲▲▲ */


[hidden] {
   display: none !important
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
}

body {
   background: #e6e8ea;
   font-family: var(--font-jp);
   color: var(--ink-900);
   -webkit-font-smoothing: antialiased;
}

a {
   color: inherit;
}

a:hover {
   color: var(--blue-500);
}

#root {
   padding: 0;
}

.pref-chip {
   transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.pref-chip:hover {
   box-shadow: inset 0 0 0 1px var(--blue-500), 0 1px 4px rgba(0, 0, 0, .12) !important;
   color: var(--blue-500) !important;
   background: var(--blue-100) !important;
}


.f50-only-sp {
   display: block;
}

.f50-only-pc {
   display: none;
}

.f50-root {
   max-width: 768px;
   margin: 0 auto;
   background: var(--gray-100);
   box-shadow: 0 8px 40px rgba(0, 0, 0, .14);
   overflow: hidden;
}

.f50-header {
   background: #fff;
   border-bottom: 1px solid var(--gray-200);
   position: sticky;
   top: 0;
   z-index: 10;
}

.f50-hdr-sp {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 56px;
   padding: 0 14px;
}

.f50-hdr-pc {
   display: none;
}

.f50-crumb-wrap {
   background: #fff;
   overflow-x: auto;
}

.f50-crumb {
   padding: 7px 14px;
   white-space: nowrap;
}

.f50-hero {
   background: #1C2C63;
   padding: 16px 12px 18px;
}

.f50-hero-box {
   background: var(--navy-700);
   padding: 26px 18px 24px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   box-sizing: border-box;
}

.f50-hero-h1 {
   margin: 0;
   font: 900 24px/1.45 var(--font-jp);
   color: #fff;
   letter-spacing: .01em;
}

.f50-hero-p {
   margin: 0;
   font: var(--fw-regular) 14px/1.85 var(--font-jp);
   color: rgba(255, 255, 255, .92);
   letter-spacing: .03em;
}

.f50-hero-br {
   display: inline;
}

.f50-hero-btn {
   width: 100%;
   height: 56px;
   background: #b61818;
   color: #fff;
   border: none;
   border-radius: var(--radius-6);
   font: var(--fw-bold) 16px/1.3 var(--font-jp);
   cursor: pointer;
   transition: background var(--dur-fast) var(--ease-out);
}

.f50-hero-btnwrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
}

.f50-hero-link {
   color: #fff;
   font: var(--fw-bold) 14px/1.5 var(--font-jp);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.f50-hero-link:hover {
   color: #fff;
   opacity: .8;
}

.f50-article-region {
   background: var(--gray-100);
   padding: 18px 0 0;
}

.f50-article-card {
   margin: 0 12px;
   background: #fff;
   border: 1px solid var(--gray-200);
   border-radius: 10px;
   box-shadow: var(--shadow-card);
   overflow: hidden;
}

.f50-article-inner {
   padding: 28px 16px 32px;
}

.f50-divider {
   border-top: 1px solid var(--gray-200);
   margin: 30px 0;
}

.f50-sec {
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.f50-title-break {
   display: block;
}

.f50-para {
   margin: 0;
   text-align: left;
   font: var(--fw-regular) 14px/1.95 var(--font-jp);
   color: var(--ink-700);
   letter-spacing: var(--ls-jp);
   text-wrap: pretty;
}

.f50-sec-title {
   text-align: center;
}

.f50-sec-title h2 {
   margin: 0;
   font: 900 20px/1.55 var(--font-jp);
   color: var(--navy-700);
}

.f50-underline {
   position: relative;
   width: 180px;
   max-width: 60%;
   height: 0;
   margin: 14px auto 0;
   border-top: 2px solid var(--navy-700);
}

.f50-underline span {
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   border-top: 9px solid var(--navy-700);
}

.f50-chip-row {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.f50-outchip-inner {
   padding: 15px 20px;
   font: var(--fw-bold) 16px/1.3 var(--font-jp);
}

.f50-merit-row {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.f50-merit {
   filter: drop-shadow(0 2px 6px rgba(28, 44, 99, .20));
}

.f50-merit-inner {
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 58px;
   background: var(--navy-700);
   color: #fff;
   padding: 12px 24px 12px 20px;
   box-sizing: border-box;
}

.f50-merit-num {
   font-family: var(--font-num);
   font-weight: 900;
   font-size: 15px;
   flex: none;
}

.f50-merit-text {
   font: var(--fw-bold) 15px/1.5 var(--font-jp);
   letter-spacing: var(--ls-jp);
}

.f50-flagwrap {
   display: flex;
   justify-content: center;
}

.f50-flag {
   position: relative;
   background: var(--navy-700);
   color: #fff;
   font: var(--fw-bold) 15px/1.7 var(--font-jp);
   letter-spacing: .02em;
   padding: 16px 22px;
   text-align: left;
}

.f50-iv-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.f50-iv-card {
   border: 1px solid var(--navy-100);
   border-radius: 6px;
   overflow: hidden;
   background: #fff;
   height: 100%;
}

.f50-iv-meta {
   margin-top: 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.f50-stat-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
}

.f50-stat-inner {
   padding: 20px 10px;
}

.f50-stat-num {
   font: 900 28px/1 var(--font-num);
}

.f50-stat-unit {
   font-size: 13px;
   font-family: var(--font-jp);
   margin-left: 1px;
}

.f50-stat-label {
   margin-top: 9px;
   font: var(--fw-bold) 12px/1.4 var(--font-jp);
   color: var(--ink-700);
}

.f50-step-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.f50-step {
   background: var(--navy-700);
   color: #fff;
   border-radius: 8px;
   padding: 14px 16px;
}

.f50-step-head {
   text-align: center;
}

.f50-step-num,
.f50-step-label {
   font: 900 16px/1.3 var(--font-jp);
   letter-spacing: .03em;
}

.f50-step-desc {
   margin: 6px 0 0;
   text-align: left;
   font: var(--fw-regular) 12px/1.6 var(--font-jp);
   letter-spacing: var(--ls-jp);
   color: rgba(255, 255, 255, .92);
   text-wrap: pretty;
}

.f50-job-region {
   background: #F1F2F3;
   border-top: 1px solid var(--gray-200);
   margin-top: 14px;
}

.f50-job-inner {
   padding: 26px 16px 8px;
}

.f50-job-block+.f50-job-block {
   margin-top: 28px;
   border-top: 1px solid var(--gray-200);
   padding-top: 28px;
}

.f50-update {
   margin: 0;
   text-align: right;
   font: var(--fw-regular) 11px/1.6 var(--font-jp);
   color: var(--slate-400);
}

.f50-count-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}

.f50-job-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.f50-pager-wrap {
   display: flex;
   justify-content: center;
   padding: 22px 0 4px;
}

.f50-pref-outer {
   border-radius: 6px;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgb(227, 229, 233);
   overflow: hidden;
}

.f50-pref-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   padding: 14px 16px;
   overflow: hidden;
   transition: max-height var(--dur-slow, .32s) var(--ease-out);
}

.f50-foot-top {
   background: var(--charcoal);
   padding: 30px 16px 22px;
}

.f50-foot-cols {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px 18px;
}

.f50-foot-social {
   display: flex;
   justify-content: center;
   gap: 14px;
   margin: 26px 0 20px;
}

.f50-foot-bottom {
   border-top: 1px solid rgba(255, 255, 255, .14);
   padding-top: 14px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 4px 14px;
   font: var(--fw-regular) 11px/1.8 var(--font-jp);
   color: rgba(255, 255, 255, .7);
   text-align: center;
}

.f50-foot-copy {
   background: var(--gray-100);
   padding: 22px 0;
   text-align: center;
}

@media (min-width: 768px) {
   .f50-only-sp {
      display: none;
   }

   .f50-only-pc {
      display: block;
   }

   .f50-root {
      max-width: 1440px;
      background: #fff;
   }

   .f50-header {
      position: static;
   }

   .f50-hdr-sp {
      display: none;
   }

   .f50-hdr-pc {
      display: flex;
   }

   .f50-crumb-wrap {
      overflow-x: visible;
   }

   .f50-crumb {
      width: min(1000px, 100% - 40px);
      margin: 0 auto;
      padding: 5px 0;
      white-space: normal;
   }

   .f50-hero {
      background: #fff;
      padding: 22px 0 28px;
   }

   .f50-hero-box {
      width: min(1000px, 100% - 40px);
      margin: 0 auto;
      padding: 44px 52px;
      gap: 20px;
   }

   .f50-hero-h1 {
      font: 900 34px/1.4 var(--font-jp);
   }

   .f50-hero-p {
      font: var(--fw-regular) 15px/1.8 var(--font-jp);
      color: #fff;
      letter-spacing: .04em;
   }

   .f50-hero-br {
      display: none;
   }

   .f50-hero-btnwrap {
      margin-top: 4px;
   }

   .f50-hero-link {
      font-size: 15px;
   }

   .f50-hero-btn {
      width: auto;
      height: 58px;
      padding: 0 36px;
      font: var(--fw-bold) 18px/1 var(--font-jp);
   }

   .f50-article-region {
      background: #fff;
      padding: 28px 0 48px;
   }

   .f50-article-card {
      width: min(1000px, 100% - 40px);
      margin: 0 auto;
   }

   .f50-article-inner {
      padding: 46px 64px 52px;
   }

   .f50-divider {
      margin: 41px 0;
   }

   .f50-sec {
      gap: 28px;
   }

   .f50-title-break {
      display: inline;
   }

   .f50-para {
      max-width: 78%;
      margin: 0 auto;
      font: var(--fw-regular) 15px/2 var(--font-jp);
   }

   .f50-sec-title h2 {
      font: 900 27px/1.5 var(--font-jp);
   }

   .f50-underline {
      width: 440px;
      max-width: 80%;
      margin: 16px auto 0;
   }

   .f50-underline span {
      border-left-width: 11px;
      border-right-width: 11px;
      border-top-width: 11px;
   }

   .f50-chip-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      max-width: 780px;
      margin: 0 auto;
      width: 100%;
   }

   .f50-outchip-inner {
      padding: 20px;
      font: var(--fw-bold) 18px/1.3 var(--font-jp);
   }

   .f50-merit-row {
      flex-direction: row;
      gap: 22px;
      max-width: 880px;
      margin: 0 auto;
      width: 100%;
   }

   .f50-merit {
      flex: 1;
   }

   .f50-merit-inner {
      justify-content: center;
      min-height: 67px;
      height: 100%;
      padding: 18px 16px;
      gap: 8px;
   }

   .f50-merit-num {
      font-size: 24px;
      line-height: 1;
   }

   .f50-merit-text {
      font: var(--fw-bold) 17px/1.4 var(--font-jp);
   }

   .f50-flag {
      font: var(--fw-bold) 17px/1.8 var(--font-jp);
      padding: 20px 36px;
      max-width: 660px;
      text-align: center;
   }

   .f50-iv-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
   }

   .f50-iv-card {
      width: 258px;
      height: auto;
   }

   .f50-iv-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 12px;
   }

   .f50-iv-full {
      grid-column: 1 / -1;
   }

   .f50-stat-grid {
      display: flex;
      justify-content: center;
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
      width: 100%;
   }

   .f50-stat-inner {
      padding: 24px 12px;
   }

   .f50-stat-num {
      font-size: 32px;
   }

   .f50-stat-unit {
      font-size: 15px;
   }

   .f50-stat-label {
      margin-top: 12px;
      font-size: 13px;
   }

   .f50-step-list {
      gap: 14px;
      width: 760px;
      max-width: 100%;
      margin: 0 auto;
   }

   .f50-step {
      display: flex;
      align-items: center;
      min-height: 66px;
      padding: 0;
      border-radius: 0;
      clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
   }

   .f50-step-head {
      display: flex;
      align-items: center;
      text-align: left;
      flex: none;
   }

   .f50-step-num {
      width: 92px;
      box-sizing: border-box;
      padding: 0 8px 0 18px;
      font: 900 19px/1.3 var(--font-jp);
      letter-spacing: .04em;
      white-space: nowrap;
   }

   .f50-step-label {
      width: 150px;
      box-sizing: border-box;
      padding-right: 12px;
      font: 900 19px/1.4 var(--font-jp);
      letter-spacing: .03em;
   }

   .f50-step-desc {
      margin: 0;
      flex: 1;
      font: var(--fw-bold) 16px/1.5 var(--font-jp);
      letter-spacing: var(--ls-jp);
      padding-right: 40px;
      color: #fff;
   }

   .f50-job-region {
      background: var(--gray-100);
      border-top: none;
      margin-top: 0;
      padding: 40px 0;
   }

   .f50-job-inner {
      width: min(1000px, 100% - 40px);
      margin: 0 auto;
      padding: 0;
   }

   .f50-job-block+.f50-job-block {
      margin-top: 36px;
      border-top: none;
      padding-top: 0;
   }

   .f50-update {
      font: var(--fw-regular) 14px/1.6 var(--font-jp);
      color: var(--slate-600);
   }

   .f50-count-row {
      margin-bottom: 0;
   }

   .f50-pager-wrap {
      padding: 0;
   }

   .f50-pref-outer {
      max-width: 1000px;
   }

   .f50-pref-grid {
      grid-template-columns: repeat(8, 1fr);
      padding: 16px 12px;
   }

   .f50-foot-top {
      padding: 40px 0 24px;
   }

   .f50-foot-inner {
      width: min(1000px, 100% - 40px);
      margin: 0 auto;
   }

   .f50-foot-cols {
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
   }

   .f50-foot-social {
      gap: 16px;
      margin: 34px 0 22px;
   }

   .f50-foot-bottom {
      padding-top: 16px;
      font: var(--fw-regular) 12px/1.6 var(--font-jp);
   }

   .f50-foot-copy {
      padding: 26px 0;
   }
}

/* 給与テーブル(.salary-table)は salary_stats.css に同じ指定があるため省略(717450-79) */


/* ==========================================================================
   ▼▼▼ ここから「特集ページ共通CSS」からの追加分 ▼▼▼
   ※ 共通CSS（上記：f50-* ベース／給与テーブル）には含まれない、IL版で追加したスタイル・クラスです。
   ※ ファイルは分けず、本ファイル内にまとめて記載しています。
   ・iw-*  ：記事コンテンツ用（比較表・メリット・CTA など）
   ・iw2-* ：IL版レイアウト（ヒーロー／エリア絞込み／目次／FAQ／ページトップボタン 等）
   ・sc-*  ：お仕事データ（画像＋キャプション）
   ・u*    ：コンポーネント由来のインラインstyleをクラス化したもの
   ========================================================================== */
.iw-prio-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0;
}

.iw-prio {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 8px;
   padding: 14px 10px;
   background: #fff;
}

.iw-prio:nth-child(odd) {
   border-right: 1px solid var(--gray-300);
}

.iw-prio:nth-child(-n+2) {
   border-bottom: 1px solid var(--gray-300);
}

.f50-salary-wrap:has(.iw-compare) {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: 8px;
   box-shadow: inset 0 0 0 1px var(--gray-300);
}

.salary-table.iw-compare {
   min-width: 600px;
   table-layout: fixed;
}

.salary-table.iw-compare thead {
   display: table-header-group;
   position: static;
   width: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   clip: auto;
   white-space: normal;
}

.salary-table.iw-compare thead th {
   padding: 10px 6px;
   background: var(--navy-700);
   color: #fff;
   font: var(--fw-bold) 13px/1.3 var(--font-jp);
   text-align: center;
}

.salary-table.iw-compare thead th:first-child {
   text-align: left;
   padding-left: 14px;
   width: 30%;
}

.salary-table.iw-compare tbody {
   display: table-row-group;
}

.salary-table.iw-compare tr {
   display: table-row;
   border: none;
   border-radius: 0;
   box-shadow: none;
   background: transparent;
}

.salary-table.iw-compare td {
   display: table-cell;
   text-align: center;
   padding: 12px 6px;
   font: var(--fw-bold) 14px/1.4 var(--font-num);
   border-bottom: 1px solid var(--gray-200);
   vertical-align: middle;
}

.salary-table.iw-compare td::before {
   content: none;
}

.salary-table.iw-compare td.st-type {
   text-align: left;
   padding: 12px 8px 12px 14px;
   font: var(--fw-bold) 13px/1.4 var(--font-jp);
}

.salary-table.iw-compare tr:last-child td {
   border-bottom: none;
}

.iw-hl {
   color: var(--pink-600);
}

.iw-cat-a {
   color: var(--blue-600);
}

.iw-cat-b {
   color: var(--pink-600);
}

.iw-prio-x {
   background: #fff;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-6);
   box-shadow: var(--shadow-card);
}

.iw-prio-mark {
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: var(--radius-4);
   background: var(--navy-700);
   color: #fff;
   font: 900 18px/1 var(--font-jp);
}

.iw-prio-mark--sm {
   width: 26px;
   height: 26px;
   font-size: 13px;
}

.iw-prio-mark--inv {
   background: #fff;
   color: var(--navy-700);
}

.iw-prio-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.iw-prio-desc {
   text-wrap: pretty;
}

.iw-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 58px;
   padding: 16px 20px;
   box-sizing: border-box;
   background: var(--blue-500);
   color: #fff;
   border-radius: var(--radius-6);
   font: var(--fw-bold) 17px/1.3 var(--font-jp);
   text-decoration: none;
   transition: background var(--dur-fast) var(--ease-out);
}

.iw-cta:hover {
   background: var(--blue-600);
   color: #fff;
}

.iw-perk-no .iw-jobno,
.iw-match-body .iw-jobno {
   font-family: var(--font-jp);
}

.salary-table td.st-type .iw-jobno {
   font-family: var(--font-jp);
   font-size: 15px;
}

.iw-prio-label {
   font: 900 17px/1.3 var(--font-jp);
   color: var(--navy-700);
}

.iw-prio-desc {
   font: var(--fw-bold) 13px/1.5 var(--font-jp);
   color: var(--ink-700);
   letter-spacing: var(--ls-jp);
}

.iw-jobno {
   color: var(--blue-500);
   font-family: var(--font-num);
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.iw-jobno:hover {
   color: var(--blue-600);
}

.iw-match-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
   background: #dfe5ea;
   padding: 14px;
   border-radius: var(--radius-6);
}

.iw-match {
   background: #fff;
   border-radius: var(--radius-6);
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.iw-match-head {
   margin: 0;
   display: flex;
   align-items: center;
   gap: 8px;
   font: 900 15px/1.4 var(--font-jp);
   color: var(--navy-700);
}

.iw-match-body {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 10px;
   font: var(--fw-bold) 14px/1.6 var(--font-jp);
   color: var(--ink-900);
}

.iw-perk-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
}

.iw-perk {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.iw-perk-card {
   flex: 1;
   border: 1px solid var(--gray-300);
   border-radius: var(--radius-6);
   overflow: hidden;
   background: #fff;
   display: flex;
   flex-direction: column;
}

.iw-perk-head {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 16px;
   background: var(--navy-700);
   color: #fff;
   font: 900 16px/1.4 var(--font-jp);
}

.iw-perk-no {
   padding: 10px 16px;
   text-align: center;
   background: #E4F7F4;
   font: var(--fw-bold) 13px/1.4 var(--font-jp);
   color: var(--navy-700);
}

.iw-perk-pay {
   padding: 14px 16px 6px;
   text-align: center;
   font: var(--fw-bold) 14px/1.4 var(--font-jp);
   color: var(--ink-700);
}

.iw-perk-pay strong {
   font: 900 26px/1 var(--font-num);
   color: var(--blue-500);
   margin-left: 4px;
}

.iw-perk-list {
   list-style: none;
   margin: 0;
   padding: 8px 20px 4px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
}

.iw-perk-list li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font: var(--fw-bold) 14px/1.5 var(--font-jp);
   color: var(--ink-900);
   padding-bottom: 8px;
   border-bottom: 1px dashed var(--gray-200);
}

.iw-perk-list li svg {
   flex: none;
   margin-top: 2px;
}

.iw-perk-note {
   margin: 0;
   padding: 12px 16px;
   text-align: center;
   background: var(--gray-100);
   font: var(--fw-bold) 13px/1.5 var(--font-jp);
   color: var(--navy-700);
}

.iw-kw-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iw-kw-tabs {
   display: flex;
   gap: 4px;
}

.iw-kw-tab {
   flex: 1;
   height: 44px;
   border: none;
   border-radius: var(--radius-6) var(--radius-6) 0 0;
   background: var(--gray-200);
   color: var(--slate-600);
   font: var(--fw-bold) 14px/1 var(--font-jp);
   cursor: pointer;
   transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.iw-kw-tab:hover {
   background: var(--gray-300);
}

.iw-kw-tab.is-active {
   background: var(--slate-600);
   color: #fff;
}

.iw-kw-tabs+.f50-pref-outer {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

html {
   scroll-behavior: smooth;
}

.iw-anchor {
   scroll-margin-top: 72px;
}

a.f50-hero-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   box-sizing: border-box;
}

a.f50-hero-btn:hover {
   color: #fff;
}

.iw-jobtxt {
   font-family: var(--font-jp);
   font-weight: var(--fw-bold);
   color: var(--navy-700);
}

.iw-match-body .iw-jobtxt {
   color: var(--ink-900);
}

@media (min-width: 768px) {
   .iw-prio-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      max-width: 780px;
      margin: 0 auto;
      width: 100%;
   }

   .iw-prio {
      flex-direction: row;
      text-align: left;
      gap: 14px;
      padding: 22px 28px;
   }

   .iw-prio:nth-child(odd) {
      justify-content: flex-end;
   }

   .iw-prio-body {
      width: 190px;
      flex: none;
   }

   .salary-table.iw-compare {
      min-width: 0;
   }

   .salary-table.iw-compare thead th:first-child {
      width: 26%;
   }

   .iw-prio-desc {
      font-size: 14px;
   }

   .iw-match-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 20px;
      max-width: 870px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
   }

   .iw-match {
      padding: 18px 20px;
   }

   .iw-match-body {
      font-size: 15px;
   }

   .iw-perk-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      max-width: 780px;
      margin: 0 auto;
      width: 100%;
   }

   .iw-kw-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .iw-kw-tabs {
      gap: 6px;
   }

   .iw-kw-tab {
      flex: 0 0 220px;
      height: 48px;
      font-size: 15px;
   }

   .iw-compare {
      table-layout: fixed;
   }

   .iw-compare th.iw-compare-job {
      width: 26%;
   }
}

.iw-toc {
   border: 1px solid var(--gray-300);
   border-radius: var(--radius-6);
   overflow: hidden;
   background: #fff
}

.f50-article-region:not(.iw-article-after) {
   padding-bottom: 18px
}

.iw-article-after {
   padding-bottom: 18px
}

.iw-job-tail {
   margin-top: 0
}

@media (min-width:768px) {
   .f50-article-region:not(.iw-article-after) {
      padding-bottom: 28px
   }

   .f50-article-region:not(.iw-article-after) .f50-article-inner {
      padding: 32px 64px
   }

   .iw-article-after {
      background: var(--gray-100);
      padding: 0 0 8px
   }

   .iw-job-tail {
      padding-top: 32px
   }
}

.iw-toc-title {
   margin: 0;
   padding: 12px 16px;
   background: var(--slate-600);
   color: #fff;
   font: var(--fw-bold) 16px/1.3 var(--font-jp);
   letter-spacing: .08em
}

.iw-toc-list {
   list-style: none;
   margin: 0;
   padding: 6px 16px;
   background: #dfe5ea;
   display: flex;
   flex-direction: column
}

.iw-toc-list li+li {
   border-top: 1px solid #fff
}

.iw-toc-list a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 2px;
   text-decoration: none;
   color: var(--blue-500);
   font: var(--fw-bold) 14px/1.5 var(--font-jp);
   letter-spacing: var(--ls-jp)
}

.iw-toc-list a:hover {
   color: var(--blue-600)
}

.iw-toc-list a:hover .iw-toc-label {
   text-decoration: underline;
   text-underline-offset: 3px
}

.iw-toc-num {
   flex: none;
   font: 900 15px/1 var(--font-num);
   color: var(--navy-700)
}

.iw-toc-label {
   flex: 1;
   text-wrap: pretty
}

.iw2-hero {
   padding: 2px 12px
}

.iw2-hero .f50-hero-box {
   padding: 12px 18px;
   gap: 0
}

.iw2-hero .f50-hero-h1 {
   font: 900 20px/1.74 var(--font-jp);
   letter-spacing: .012em
}

.iw2-top {
   background: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   padding-bottom: 28px
}

.iw2-area {
   width: 100%;
   gap: 0;
   padding-top: 28px;
   border-bottom: 1px solid var(--gray-200)
}

.iw2-area .f50-sec-title h2 {
   font: 900 18px/31px var(--font-jp);
   color: var(--navy-700)
}

.iw2-area .f50-pref-outer {
   box-shadow: none;
   border-radius: 6px
}

.iw2-area .f50-pref-grid {
   padding: 14px 32px
}

.iw2-panel {
   width: 100%;
   background: #fff;
   display: flex;
   flex-direction: column;
   gap: 20px
}

.iw2-panel .iw2-area,
.iw2-panel .iw2-toc-wrap {
   background: transparent
}

.iw2-panel {
   align-items: center;
   padding-top: 20px
}

.iw2-panel .iw2-area {
   width: calc(100% - 64px);
   padding-top: 12px;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: inset 0 0 0 1px var(--gray-300)
}

.iw2-panel .iw2-area .f50-pref-outer {
   background: transparent
}

.iw2-toc-wrap {
   width: 100%;
   background: #fff;
   display: flex;
   justify-content: center;
   padding: 0 0 20px
}

.iw2-toc {
   width: calc(100% - 64px);
   border-radius: 6px;
   overflow: hidden;
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--gray-300)
}

.iw2-toc-title {
   width: 100%;
   margin: 0;
   padding: 12px 16px;
   border: none;
   background: transparent;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   text-align: left;
   font: var(--fw-bold) 14px/21px var(--font-jp);
   color: var(--navy-700)
}

.iw2-toc-title svg {
   flex: none;
   color: var(--blue-500);
   transition: transform var(--dur-fast) var(--ease-out)
}

.iw2-toc.is-open .iw2-toc-title svg {
   transform: rotate(180deg)
}

.iw2-toc-list {
   margin: 0;
   padding: 12px 16px 14px 34px;
   border-top: 1px solid var(--gray-200);
   display: flex;
   flex-direction: column;
   gap: 8px;
   list-style: disc;
   color: var(--slate-400)
}

.iw2-toc-list a {
   color: var(--blue-500);
   font: var(--fw-regular) 14px/1.6 var(--font-jp);
   letter-spacing: var(--ls-jp);
   text-decoration: none
}

.iw2-toc-list a:hover {
   color: var(--blue-600);
   text-decoration: underline;
   text-underline-offset: 3px
}

.iw2-jobs {
   margin-top: 0;
   border-top: none
}

.iw2-jobs .f50-pager-wrap {
   padding: 32px 0 4px
}

.iw2-top {
   background: var(--gray-100)
}

.iw2-area {
   border-bottom: none;
   background: #fff;
   padding-top: 20px
}

.iw2-area .f50-pref-outer {
   background: #fff
}

.iw2-rel-region {
   margin-top: 0;
   border-top: none
}

@media (max-width:767px) {
   .iw2-area .f50-pref-grid.is-collapsed {
      max-height: 112px !important
   }
}

.iw2-faq {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.iw2-faq+.iw2-faq {
   margin-top: 12px
}

.iw2-faq-q {
   margin: 0;
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font: 900 16px/1.6 var(--font-jp);
   color: var(--navy-700);
   text-wrap: pretty
}

@media (min-width:768px) {
   .iw2-faq-q {
      max-width: 78%;
      margin: 0 auto;
      width: 100%;
      font-size: 18px
   }
}

/* 追加：ページトップボタン（▲アイコン／PC時はコンテンツ幅の外側・画面下部に追従） */
.iw2-pagetop {
   position: fixed;
   right: 6px;
   bottom: 20px;
   z-index: 20;
   width: 49px;
   height: 49px;
   border-radius: 50%;
   background: rgba(115, 127, 143, .85);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center
}

.iw2-pagetop:hover {
   color: #fff;
   background: var(--slate-600)
}

.iw2-pagetop-ic {
   font-size: 16px;
   line-height: 1;
   transform: translateY(-1px)
}

@media (min-width:768px) {
   .iw2-pagetop {
      right: max(12px, calc((100vw - 1000px) / 2 - 49px - 24px));
      bottom: 32px;
      width: 56px;
      height: 56px
   }

   .iw2-pagetop-ic {
      font-size: 18px
   }
}

@media (min-width:768px) {
   .iw2-hero {
      padding: 22px 0 28px
   }

   .iw2-hero .f50-hero-box {
      padding: 28px 52px
   }

   .iw2-hero .f50-hero-h1 {
      font-size: 30px
   }

   .iw2-panel {
      width: min(1000px, 100% - 40px);
      padding-top: 24px;
      margin-top: 28px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--gray-200)
   }

   .iw2-toc-wrap {
      width: 100%;
      padding: 0 0 24px
   }

   .iw2-pagetop {
      right: 24px;
      bottom: 24px
   }
}

@media (min-width:768px) {
   .iw-toc {
      max-width: 780px;
      margin: 0 auto;
      width: 100%
   }

   .iw-toc-title {
      padding: 14px 24px;
      font-size: 18px
   }

   .iw-toc-list {
      padding: 8px 24px
   }

   .iw-toc-list a {
      font-size: 16px;
      padding: 14px 4px
   }

   .iw-toc-num {
      font-size: 17px
   }
}

.sc-img {
   aspect-ratio: 16/10;
   background: var(--gray-200);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden
}

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

.sc-sup-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px
}

.sc-sup {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.sc-sup .sc-img {
   border-radius: var(--radius-6)
}

.sc-sup-text {
   margin: 0;
   text-align: center;
   font: var(--fw-bold) 15px/1.5 var(--font-jp);
   color: var(--navy-700);
   text-wrap: pretty
}

@media (min-width:768px) {
   .sc-sup-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
      width: 100%
   }
}


/* ==========================================================================
   ページ固有：岩手県の工場求人（body.page-iwate）
   ========================================================================== */
.u112 {
   border-width: medium !important;
   border-style: none !important;
   border-color: currentcolor !important;
   border-image: none !important;
   background: none !important;
   cursor: pointer !important;
   padding: 4px 12px !important;
   font: var(--fw-bold) 12px/1.2 var(--font-jp) !important;
   letter-spacing: 0.03em !important;
   color: var(--teal-500) !important
}

/* ==========================================================================
   ページ固有：20代活躍中の工場求人特集（body.page-20s）
   ========================================================================== */
@media (max-width:767px) {
   .page-20s .iw2-area .f50-pref-grid.is-collapsed,
   .page-30s .iw2-area .f50-pref-grid.is-collapsed,
   .page-40s .iw2-area .f50-pref-grid.is-collapsed,
   .page-50s .iw2-area .f50-pref-grid.is-collapsed {
      max-height: 132px !important
   }
}

/* ==========================================================================
   ページ固有：半導体の工場求人特集（body.page-semiconductor）
   業界アイコン／業界の特徴リスト／業界比較表／主なお仕事紹介カード
   ========================================================================== */
@media (min-width:768px) {
   .page-semiconductor .iw2-faq-q {
      max-width: 78%;
      margin: 0 auto;
      width: 100%;
      font-size: 18px
   }

   .page-semiconductor .iw2-faq .f50-para {
      width: 100%
   }
}

.sc-icons {
   display: flex;
   justify-content: center;
   gap: 28px
}

.sc-icon {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   font: var(--fw-bold) 12px/1.3 var(--font-jp);
   color: #1C2C63
}

.sc-subhead {
   margin: 6px 0 0;
   text-align: center;
   font: 900 18px/1.5 var(--font-jp);
   color: var(--navy-700)
}

.sc-ind {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.sc-ind li {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 14px 16px;
   border: 1px solid var(--gray-300);
   border-radius: var(--radius-6);
   background: #fff
}

.sc-ind-tag {
   align-self: flex-start;
   padding: 5px 12px;
   background: var(--navy-700);
   color: #fff;
   border-radius: var(--radius-4);
   font: var(--fw-bold) 13px/1.2 var(--font-jp)
}

.sc-ind-text {
   font: var(--fw-bold) 14px/1.7 var(--font-jp);
   color: var(--ink-900);
   letter-spacing: var(--ls-jp);
   text-wrap: pretty
}

.sc-img {
   aspect-ratio: 16/10;
   background: var(--gray-200);
   display: flex;
   align-items: center;
   justify-content: center;
   font: var(--fw-regular) 12px/1 var(--font-jp);
   color: var(--slate-600)
}

.sc-img {
   overflow: hidden
}

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

.sc-cmp-wrap {
   overflow-x: auto;
   border: 1px solid var(--gray-400);
   border-radius: var(--radius-6);
   background: var(--white)
}

.sc-cmp {
   width: 100%;
   min-width: 520px;
   border-collapse: separate;
   border-spacing: 0;
   background: var(--white);
   font: var(--fw-regular) 13px/1.6 var(--font-jp);
   color: var(--ink-900);
   letter-spacing: var(--ls-jp)
}

.sc-cmp th,
.sc-cmp td {
   border-right: 1px solid var(--gray-400);
   border-bottom: 1px solid var(--gray-400);
   padding: 10px 12px;
   text-align: left;
   vertical-align: middle
}

.sc-cmp tr>:last-child {
   border-right: none
}

.sc-cmp tbody tr:last-child>* {
   border-bottom: none
}

.sc-cmp thead th {
   background: var(--slate-600);
   color: var(--white);
   font-weight: var(--fw-bold);
   text-align: center
}

.sc-cmp thead th.is-main {
   background: var(--navy-700)
}

.sc-cmp tbody th {
   background: var(--slate-200);
   font-weight: var(--fw-bold);
   color: var(--ink-900)
}

.sc-cmp td.is-main {
   background: var(--blue-100);
   font-weight: var(--fw-bold)
}

.sc-cmp-star {
   color: var(--amber-500);
   margin-right: 2px;
   letter-spacing: 0
}

@media (max-width:767px) {
   .sc-cmp tr>:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      width: 92px;
      min-width: 92px;
      max-width: 92px
   }

   .sc-cmp tr>:nth-child(2) {
      position: sticky;
      left: 92px;
      z-index: 2;
      min-width: 128px;
      box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .18)
   }

   .sc-cmp td,
   .sc-cmp thead th {
      min-width: 128px
   }
}

.sc-cmp--t tr.is-main>* {
   background: var(--blue-100);
   font-weight: var(--fw-bold)
}

.sc-cmp--t tr.is-main>th {
   background: var(--navy-700);
   color: var(--white)
}

.sc-cmp--t tbody th {
   text-align: center
}

@media (max-width:767px) {
   .sc-cmp--t tr>:nth-child(2) {
      position: static;
      box-shadow: none
   }

   .sc-cmp--t tr>:first-child {
      width: 76px;
      min-width: 76px;
      max-width: 76px;
      box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .18)
   }

   .sc-cmp--t td,
   .sc-cmp--t thead th {
      min-width: 120px
   }
}

.sc-ind {
   border: 1px solid var(--gray-300);
   border-radius: var(--radius-6);
   background: #fff;
   gap: 0 !important;
   overflow: hidden
}

.sc-ind li {
   border: none !important;
   border-radius: 0 !important;
   position: relative
}

.sc-ind li+li::before {
   content: "";
   position: absolute;
   top: 0;
   left: 16px;
   right: 16px;
   height: 1px;
   background: var(--gray-200)
}

@media (min-width:768px) {
   .sc-ind--row {
      gap: 0 !important
   }

   .sc-ind li+li::before {
      left: 20px;
      right: 20px
   }

   .sc-ind--row li+li::before {
      left: 0;
      right: auto;
      top: 20px;
      bottom: 20px;
      width: 1px;
      height: auto
   }
}

.page-semiconductor .iw2-faq {
   gap: 0 !important
}

@media (min-width:768px) {
   .sc-cmp-wrap {
      max-width: 780px;
      margin: 0 auto;
      width: 100%
   }

   .sc-cmp {
      font-size: 14px
   }

   .sc-cmp th,
   .sc-cmp td {
      padding: 12px 16px
   }
}

.sc-proc-grid,
.sc-sup-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px
}

.sc-proc {
   border: 1px solid var(--gray-300);
   border-radius: var(--radius-6);
   overflow: hidden;
   background: #fff;
   display: flex;
   flex-direction: column
}

.sc-proc-head {
   padding: 11px 14px;
   background: var(--navy-700);
   color: #fff;
   text-align: center;
   font: 900 16px/1.4 var(--font-jp)
}

.sc-proc-desc {
   margin: 0;
   padding: 12px 14px 14px;
   font: var(--fw-regular) 14px/1.7 var(--font-jp);
   color: var(--ink-700);
   letter-spacing: var(--ls-jp);
   text-wrap: pretty
}

@media (min-width:768px) {
   .sc-icons {
      gap: 56px
   }

   .sc-icon {
      font-size: 13px
   }

   .sc-subhead {
      font-size: 22px
   }

   .sc-ind {
      max-width: 780px;
      margin: 0 auto;
      width: 100%
   }

   .sc-ind li {
      flex-direction: row;
      align-items: center;
      gap: 16px;
      padding: 16px 20px
   }

   .sc-ind-tag {
      align-self: center;
      flex: none;
      width: 120px;
      text-align: center
   }

   .sc-ind-text {
      font-size: 15px
   }

   .sc-proc-grid,
   .sc-sup-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
      width: 100%
   }
}

@media (min-width:768px) {
   .sc-ind--row {
      flex-direction: row;
      max-width: 880px;
      gap: 16px
   }

   .sc-ind--row li {
      flex: 1;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      padding: 20px 18px
   }

   .sc-ind--row .sc-ind-tag {
      width: auto;
      padding: 6px 16px
   }

   .sc-ind--row .sc-ind-text {
      font-size: 14px
   }
}
/* ==========================================================================
   LPC側の追加分(717450-79)
   ========================================================================== */
/* 背景・余白(LPCのヘッダー・フッター・関連キーワードとの間) */
.l-main {
   background: var(--gray-100);
}

.docs_bottom {
   background: var(--gray-100);
}

.el-heading-lv2_container,
.l-footer {
   margin-top: 0;
   padding-top: 40px;
   background: var(--gray-100);
}

@media (min-width: 768px) {
   .l-main {
      padding-top: 0;
   }
}

/* エリアリンク(添付HTMLのインラインstyleをクラス化) */
.pref-chip {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 36px;
   padding: 0 8px;
   background: #fff;
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px var(--gray-400), 0 1px 4px rgba(0, 0, 0, .12);
   font: var(--fw-bold) 13px/1 var(--font-jp);
   color: var(--ink-900);
   text-decoration: none;
}

.f50-pref-wrap {
   position: relative;
}

.f50-pref-fade {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 62px;
   background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 78%);
   pointer-events: none;
}

.f50-pref-toggle {
   border: none;
   background: none;
   cursor: pointer;
   padding: 4px 12px;
   font: var(--fw-bold) 12px/1.2 var(--font-jp);
   letter-spacing: .03em;
   color: var(--teal-500);
}

.f50-pref-wrap .f50-pref-toggle {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 6px;
   margin: 0 auto;
   width: fit-content;
}

.f50-pref-close {
   display: flex;
   justify-content: center;
   padding: 6px 0 12px;
}