@charset "UTF-8";

/* ==================== Variables ==================== */
:root {
  /* Colors */
  --color-primary: #0077c7;
  --color-sub: #f19e39;
  --color-text: #464646;
  --color-bg: #f0f8ff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-sky: #dcf3ff;
  --color-footer: #f4f4f4;
  --color-border: #c6c8cf;
  --color-muted: #787878;
  --color-tag-text: #26a4d7;
  --color-message-sp: #41c0f1;
  --color-highlight: #ffff39;
  --color-input-border: #a29e9f;
  --color-input-border-hero: #dedcdd;
  --color-sub-hero: #ff9903;
  --color-placeholder: #e6e6e6;
  --color-tab-border: #d1d1d1;
  --color-tab-bg: #f5fffe;
  --color-tab-text: #4b5567;
  --color-chip-border: #8c8c8c;
  --color-chip-text: #4e4e4e;
  --color-hash: #6ba7e3;
  --color-hash-border: rgba(107, 167, 227, 0.8);
  --color-hash-border-sp: rgba(97, 168, 255, 0.7);
  --color-card-text: #646464;
  --color-count: #787d7d;
  --color-en-start: #1a71ff;
  --color-en-end: #18cdf3;
  --color-divider: #d4dbe5;
  --color-tag-border: #7a7a7a;
  --color-separator: #c4c4c4;
  --color-item-border: rgba(120, 120, 120, 0.75);
  --color-lead-bg: #f0f0f0;
  --color-detail-tag-border: #a6bfd1;
  --color-badge-border: #0078c7;
  --color-form-line: #0096ed;
  --color-readonly-border: #dedede;
  --color-check-border: #bababa;
  --color-link: #0097da;
  --color-placeholder-input: #cccccc;
  --color-faq-question: #f0f9ff;
  --color-greeting-bg: #fdfdfd;
  --color-empty-text: #525252;
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Gradients */
  --gradient-brand-stops: rgba(0, 89, 255, 0.9) 0%, rgba(28, 134, 249, 0.94) 36%, rgba(59, 183, 243, 0.98) 79%, #47caf0 100%;
  --gradient-menu: linear-gradient(90deg, #002fff 0%, #0039fb 5%, #008fde 52%, #00c4cb 84%, #00d9c4 100%);
  --gradient-finder: linear-gradient(150deg, rgba(0, 45, 206, 0.9) 0%, rgba(5, 55, 207, 0.91) 6%, rgba(40, 134, 214, 0.95) 51%, rgba(62, 183, 219, 0.98) 84%, #47cadd 100%);
  --gradient-finder-sp: linear-gradient(123deg, rgba(0, 45, 206, 0.9) 0%, rgba(5, 55, 207, 0.91) 6%, rgba(40, 134, 214, 0.95) 51%, rgba(62, 183, 219, 0.98) 84%, #47cadd 100%);
  --gradient-button: linear-gradient(90deg, rgba(0, 45, 206, 0.9) 0%, rgba(5, 55, 207, 0.91) 6%, rgba(40, 134, 214, 0.95) 51%, rgba(62, 183, 219, 0.98) 84%, #47cadd 100%);
  --gradient-en: linear-gradient(90deg, var(--color-en-start) 0%, var(--color-en-end) 100%);
  --gradient-tag-border-stops: rgba(255, 188, 0, 0.9) 0%, rgba(255, 204, 59, 0.94) 37%, rgba(255, 255, 255, 0.96) 50%, rgba(158, 227, 247, 0.97) 57%, #47caf0 100%;
  --gradient-tag-border: linear-gradient(67deg, var(--gradient-tag-border-stops));

  /* Shadows（ボタンの影はデザインの値より約4割薄くしている） */
  --shadow-tag: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.12);
  --shadow-panel-sp: 0 0 0.9375rem rgba(27, 75, 209, 0.1);
  --shadow-panel: -0.0125rem 0 0.9375rem rgba(0, 0, 0, 0.1);
  --shadow-button: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.09);
  --shadow-cta-sp: 0 0.3636rem 1.6364rem rgba(0, 0, 0, 0.07);
  --shadow-cta: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.07);
  --shadow-card-sp: 0 0.3125rem 1.875rem rgba(0, 89, 153, 0.16);
  --shadow-card: 0 0.1875rem 1.875rem rgba(0, 89, 153, 0.07);
  --shadow-header: 0 0 1rem rgba(0, 0, 0, 0.1);
  --shadow-apply-small: -0.0125rem 0 0.4375rem rgba(0, 0, 0, 0.05);
  --shadow-apply-bar: -0.00625rem 0.00625rem 1.3125rem rgba(0, 0, 0, 0.1);
  --shadow-apply-button: 0.01875rem 0 1rem rgba(0, 0, 0, 0.06);
  --shadow-submit-sp: 0 0.3636rem 0.9091rem rgba(0, 0, 0, 0.09);
  --shadow-action-sp: 0 0.2727rem 0.7273rem rgba(0, 0, 0, 0.09);
  --shadow-nav-button: 0.025rem 0.01875rem 1rem rgba(0, 0, 0, 0.06);
  --shadow-tag-panel: -0.01875rem 0.0125rem 1rem rgba(109, 109, 109, 0.15);
  --shadow-detail-button: 0.0125rem 0.04375rem 1rem rgba(0, 0, 0, 0.06);

  /* Typography */
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "IBM Plex Sans JP", sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* Layout */
  --content-width: 61.5rem; /* PC 984px */

  /* SPデザイン(561px)の1pxを、375px表示時に比率縮小するための単位 */
  --sp: clamp(0.0357rem, calc(100vw / 561), 0.0625rem);
}

/* ==================== Reset ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button,
input {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  appearance: none;
}

button {
  cursor: pointer;
}

/* ==================== Base ==================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== Header ==================== */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(561 * var(--sp));
  height: calc(110 * var(--sp));
  margin-inline: auto;
  padding: 0 calc(55 * var(--sp)) 0 calc(29 * var(--sp));
}

.header__logo {
  display: block;
  width: calc(197 * var(--sp));
}

.header__menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(60 * var(--sp));
  height: calc(34 * var(--sp));
  height: calc(round(down, calc(3 * var(--sp)), 1px) * 3 + round(calc(12.5 * var(--sp)), 1px) * 2);
}

/* 線の太さと間隔を整数pxにそろえ、3本とも同じ太さで描画させる（round()非対応のブラウザは1行目の値を使う） */
.header__menu-bar {
  display: block;
  width: 100%;
  height: calc(3 * var(--sp));
  height: round(down, calc(3 * var(--sp)), 1px);
  border-radius: calc(1.4 * var(--sp));
  background: var(--gradient-menu);
}

@media (min-width: 1024px) {
  .header__inner {
    max-width: var(--content-width);
    height: 7.25rem;
    padding: 0;
  }

  .header__logo {
    width: 12.75rem;
  }

  .header__menu {
    width: 3.75rem;
    height: 2.625rem;
  }

  .header__menu-bar {
    height: 0.1875rem;
    border-radius: 0.0875rem;
  }
}

/* 下層ページ用（白背景で通常配置） */
.header--page {
  position: relative;
  background-color: var(--color-white);
}

@media (min-width: 1024px) {
  .header--page {
    box-shadow: var(--shadow-header);
  }

  .header--page .header__inner {
    height: 8.1875rem;
  }
}

/* ==================== Hero ==================== */
.hero {
  position: relative;
  padding-top: calc(146 * var(--sp));
}

.hero::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(909 * var(--sp));
  background: url("img/hero-bg-sp.webp") center top / cover no-repeat;
  content: "";
}

.hero__inner {
  position: relative;
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding-bottom: calc(8 * var(--sp));
}

.hero__columns {
  position: relative;
}

/* 見出し（2校目の文字をアウトラインにしたSVG。傾きも画像に含む） */
.hero__title {
  margin-top: calc(-4 * var(--sp));
  margin-bottom: calc(26.5 * var(--sp)); /* 見出しを縮めた分（約27px）を下に足し、下の要素の位置は変えない */
  padding-left: calc(30 * var(--sp));
}

.hero__title-img {
  width: calc(445 * var(--sp)); /* デザインは505。画面幅いっぱいで窮屈なため小さく（ご要望） */
}

/* 雰囲気・働く人・仕事風景 */
.hero__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(16 * var(--sp)) calc(3 * var(--sp));
  width: calc(273 * var(--sp));
  padding: calc(12 * var(--sp)) 0 0 calc(20 * var(--sp));
}

.hero__tags {
  display: contents;
}

.hero__tag {
  display: flex;
  align-items: center;
  height: calc(44 * var(--sp));
  padding: 0 calc(15 * var(--sp));
  border: calc(3 * var(--sp)) solid transparent;
  border-radius: calc(53.5 * var(--sp));
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-tag-border) border-box;
  box-shadow: var(--shadow-tag);
  color: var(--color-tag-text);
  font-size: calc(23 * var(--sp));
  line-height: calc(24 * var(--sp));
}

.hero__tag:first-child {
  margin-right: calc(5 * var(--sp));
}

.hero__particle {
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  line-height: calc(32 * var(--sp));
}

.hero__play--sp {
  width: calc(53 * var(--sp));
}

.hero__play--pc,
.hero__points-img,
.hero__message-img {
  display: none;
}

/* チェックして応募できる！ */
.hero__apply {
  padding: calc(16 * var(--sp)) 0 0 calc(20 * var(--sp));
}

.hero__message {
  width: calc(253 * var(--sp));
  padding: calc(10 * var(--sp)) 0;
  background-color: var(--color-message-sp);
  color: var(--color-white);
  font-size: calc(20 * var(--sp));
  line-height: calc(27 * var(--sp));
  text-align: center;
  white-space: nowrap;
}

.hero__message-strong--highlight {
  color: var(--color-highlight);
}

/* スマホ画像（デザインどおり枠で切らず、上端は33px上にはみ出す。下は検索パネルの下にもぐる） */
.hero__visual {
  position: absolute;
  top: calc(234 * var(--sp));
  left: calc(274 * var(--sp));
  width: calc(266 * var(--sp));
  height: calc(515 * var(--sp));
}

.hero__phone {
  width: calc(267 * var(--sp));
  max-width: none;
  margin-top: calc(-33 * var(--sp));
}

/* 動画はスマホ画像の動画枠（2校目で画像の左39・上114、366.2×206）に重ねる。SPは画像を267/443に縮小 */
.hero__video {
  position: absolute;
  top: calc(35.71 * var(--sp));
  left: calc(23.51 * var(--sp));
  width: calc(220.71 * var(--sp));
  height: calc(124.16 * var(--sp));
  border: 0;
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 7.25rem;
    background-color: var(--color-sky);
  }

  /* 背景画像に白い透過レイヤーと斜めの下辺まで含めている（広い画面でも下辺が斜めになるよう切り抜く） */
  .hero::before {
    height: 47.9375rem;
    background-image: url("img/hero-bg-pc.webp");
    clip-path: polygon(0 0, 100% 0, 100% 87.97%, 0 100%);
  }

  .hero__inner {
    z-index: 1;
    max-width: var(--content-width);
    padding-bottom: 0;
  }

  /* 左側は2校目の位置に合わせて部品を置く（文字はフォントが違うため画像） */
  .hero__columns {
    display: flex;
    gap: 2.48125rem;
    height: 26.26875rem;
  }

  .hero__intro {
    position: relative;
    flex-shrink: 0;
    width: 31.875rem;
  }

  .hero__title {
    position: absolute;
    top: -0.13125rem;
    left: 0.51rem;
    margin-top: 0;
    padding-left: 0;
  }

  .hero__title-img {
    width: 31.5775rem;
  }

  .hero__points,
  .hero__apply {
    display: contents;
  }

  .hero__tags,
  .hero__particle,
  .hero__play--sp,
  .hero__message {
    display: none;
  }

  .hero__points-img,
  .hero__message-img,
  .hero__play--pc {
    position: absolute;
    display: block;
  }

  .hero__points-img {
    top: 15.83375rem;
    left: 0.1775rem;
    width: 25.10375rem;
  }

  .hero__message-img {
    top: 20.54375rem;
    left: 0.409375rem;
    width: 21.79125rem;
  }

  .hero__play--pc {
    top: 15.98125rem;
    left: 25.275rem;
    width: 6.665rem;
  }

  /* スマホ画像は検索パネルの下にもぐらせて隙間をなくす */
  /* relative は動画を重ねる基準にするため（SPの top・left は打ち消す） */
  .hero__visual {
    position: relative;
    inset: auto;
    width: 27.125rem;
    height: calc(100% + 1.11875rem);
    margin-top: -1.11875rem;
    overflow: hidden;
    /* 右上に寄って見えるため、デザインより少し左下へ（ご要望） */
    transform: translate(-1.25rem, 0.5rem);
  }

  .hero__phone {
    width: 27.6875rem;
    margin-top: 0;
  }

  .hero__video {
    top: 7.125rem;
    left: 2.4375rem;
    width: 22.8875rem;
    height: 12.875rem;
  }
}

/* ==================== Drawer Menu ==================== */
/* デザインがないため、中身は現行サイトに合わせ、見た目はサイトの色・文字で作っている */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

.drawer--open {
  visibility: visible;
  transition: none;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0;
  transition: opacity 0.3s;
}

.drawer--open .drawer__overlay {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: calc(440 * var(--sp));
  max-width: 100%;
  height: 100%;
  padding: calc(110 * var(--sp)) calc(40 * var(--sp)) calc(48 * var(--sp));
  overflow-y: auto;
  background-color: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.3s;
}

.drawer--open .drawer__panel {
  transform: none;
}

/* 閉じるボタン（×）はハンバーガーと同じ位置 */
.drawer__close {
  position: absolute;
  top: calc(33 * var(--sp));
  right: calc(65 * var(--sp));
  width: calc(44 * var(--sp));
  height: calc(44 * var(--sp));
}

.drawer__close::before,
.drawer__close::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(3 * var(--sp));
  border-radius: calc(1.4 * var(--sp));
  background: var(--gradient-menu);
  content: "";
}

.drawer__close::before {
  transform: translateY(-50%) rotate(45deg);
}

.drawer__close::after {
  transform: translateY(-50%) rotate(-45deg);
}

.drawer__list {
  border-top: 1px solid var(--color-border);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24 * var(--sp)) calc(8 * var(--sp));
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: calc(24 * var(--sp));
  line-height: calc(34 * var(--sp));
}

.drawer__link::after {
  flex-shrink: 0;
  width: calc(10 * var(--sp));
  height: calc(10 * var(--sp));
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}

.drawer__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--sp));
  margin-top: auto;
  padding-top: calc(48 * var(--sp));
}

.drawer__logo {
  display: block;
  width: calc(240 * var(--sp));
}

.drawer__sns {
  display: flex;
  gap: calc(22 * var(--sp));
}

.drawer__sns-link {
  display: block;
  width: calc(58 * var(--sp));
}

.drawer__copyright {
  color: var(--color-muted);
  font-size: calc(18 * var(--sp));
}

/* 開いている間は後ろのページをスクロールさせない */
.is-drawer-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .drawer__panel {
    width: 25rem;
    padding: 7.25rem 2.5rem 3rem;
  }

  .drawer__close {
    top: 2.25rem;
    right: 2.5rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .drawer__close::before,
  .drawer__close::after {
    height: 0.1875rem;
    border-radius: 0.0875rem;
  }

  .drawer__link {
    padding: 1.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .drawer__link::after {
    width: 0.5rem;
    height: 0.5rem;
  }

  .drawer__footer {
    gap: 1.5rem;
    padding-top: 3rem;
  }

  .drawer__logo {
    width: 12.75rem;
  }

  .drawer__sns {
    gap: 1.25rem;
  }

  .drawer__sns-link {
    width: 3rem;
  }

  .drawer__copyright {
    font-size: 0.75rem;
  }
}

/* ==================== Search Panel ==================== */
.search-panel {
  position: relative;
  z-index: 1;
  margin: calc(14 * var(--sp)) calc(29 * var(--sp)) 0 calc(28 * var(--sp));
  padding-bottom: calc(23 * var(--sp));
  overflow: hidden;
  border-radius: calc(27 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel-sp);
}

.search-panel__head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sp));
  padding: calc(20 * var(--sp)) calc(16 * var(--sp));
}

.search-panel__purpose {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: calc(6 * var(--sp));
  width: calc(144 * var(--sp));
}

.search-panel__purpose-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--sp));
  width: 100%;
  padding: calc(4 * var(--sp)) calc(10 * var(--sp));
  border-radius: calc(16 * var(--sp));
  background-color: var(--color-sub);
  color: var(--color-white);
  font-size: calc(16 * var(--sp));
  line-height: calc(24 * var(--sp));
}

.search-panel__purpose-icon {
  width: calc(19 * var(--sp));
}

.search-panel__purpose-text {
  color: var(--color-sub);
  font-size: calc(18 * var(--sp));
  line-height: calc(25 * var(--sp));
}

.search-panel__keyword {
  display: flex;
  flex: 1;
  height: calc(64 * var(--sp));
  overflow: hidden;
  border: 1px solid var(--color-input-border);
  border-radius: calc(32 * var(--sp));
}

.search-panel__input {
  flex: 1;
  min-width: 0;
  padding-left: calc(16 * var(--sp));
  font-size: calc(16 * var(--sp));
}

.search-panel__input::placeholder {
  color: var(--color-placeholder);
}

/* ブラウザ標準の×ボタンが場所を取り、文末の「？」が欠けるため消す */
.search-panel__input::-webkit-search-decoration,
.search-panel__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-panel__input:focus {
  outline: none;
}

.search-panel__keyword:focus-within {
  border-color: var(--color-primary);
}

.search-panel__submit {
  flex-shrink: 0;
  width: calc(80 * var(--sp));
  background: linear-gradient(40deg, var(--gradient-brand-stops));
  color: var(--color-white);
  font-size: calc(22 * var(--sp));
}

/* タブ */
.search-panel__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.search-panel__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--sp));
  height: calc(64 * var(--sp));
  border: 1px solid var(--color-tab-border);
  background-color: var(--color-tab-bg);
  color: var(--color-tab-text);
  font-size: calc(22 * var(--sp));
}

/* 隣どうしの枠線が重なって2倍の太さにならないよう、2つ目以降は左線をなくす */
.search-panel__tab + .search-panel__tab {
  border-left: 0;
}

.search-panel__tab--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.search-panel__tab-icon {
  width: calc(24 * var(--sp));
}

.search-panel__tab:first-child .search-panel__tab-icon {
  width: calc(19 * var(--sp));
}

.search-panel__tab-icon--layers {
  width: calc(29 * var(--sp));
}

/* 条件一覧 */
.search-panel__body {
  padding: calc(22.58 * var(--sp)) calc(27.89 * var(--sp)) calc(13.31 * var(--sp));
}

.search-panel__chips {
  display: grid;
  grid-template-columns: repeat(3, calc(131 * var(--sp)));
  gap: calc(12 * var(--sp)) calc(16 * var(--sp));
}

/* 雇用形態・業種は名前が長いので2列（デザインがないため勤務地のチップを流用） */
.search-panel__chips--wide {
  grid-template-columns: repeat(2, 1fr);
}

.search-panel__chips--wide .chip {
  padding: 0 calc(12 * var(--sp));
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--sp));
  height: calc(44 * var(--sp));
  border: 1px solid var(--color-chip-border);
  border-radius: calc(8.4 * var(--sp));
  background-color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
}

.chip:has(.chip__input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

/* 選択中は青地に白文字（選択状態のデザインがないため現行サイトに合わせる） */
.chip:has(.chip__input:checked) .chip__label,
.chip:has(.chip__input:checked) .chip__count {
  color: var(--color-white);
}

.chip:has(.chip__input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.chip__label {
  color: var(--color-chip-text);
  font-size: calc(19 * var(--sp));
  line-height: 1;
}

.chip__count {
  color: var(--color-chip-border);
  font-size: calc(15 * var(--sp));
  line-height: 1;
}

.search-panel__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--sp));
  width: 100%;
  height: calc(64 * var(--sp));
  margin-top: calc(28 * var(--sp));
  padding: 0 calc(20 * var(--sp));
  border-radius: calc(15 * var(--sp));
  background-color: var(--color-sub);
  box-shadow: var(--shadow-button);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  line-height: 1;
}

.search-panel__button-icon {
  width: calc(30 * var(--sp));
  opacity: 0.91;
}

.search-panel__popular {
  display: none;
}

@media (min-width: 1024px) {
  .search-panel {
    margin: 0;
    padding-bottom: 1.4375rem;
    border-radius: 1.6875rem;
    box-shadow: var(--shadow-panel);
  }

  .search-panel__head {
    gap: 2.375rem;
    padding: 1.5625rem 1rem;
  }

  .search-panel__purpose {
    gap: 0.25rem;
    width: 10.375rem;
  }

  .search-panel__purpose-label {
    gap: 0.625rem;
    height: 2.0625rem;
    padding: 0;
    border-radius: 1.75rem;
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  /* 吹き出しの三角 */
  .search-panel__purpose-label::after {
    position: absolute;
    top: calc(100% - 0.0625rem);
    left: 50%;
    width: 0.8125rem;
    height: 0.5rem;
    background-color: var(--color-sub);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
    content: "";
  }

  .search-panel__purpose-icon {
    width: 1.1875rem;
  }

  .search-panel__purpose-text {
    font-size: 1.5rem;
    line-height: 1.9375rem;
  }

  .search-panel__keyword {
    height: 3.875rem;
    border-radius: 2rem;
  }

  .search-panel__input {
    padding-left: 1.5rem;
    font-size: 1.25rem;
  }

  .search-panel__submit {
    width: 6.375rem;
    font-size: 1.5rem;
  }

  .search-panel__tab {
    gap: 0.625rem;
    height: 4.9375rem;
    font-size: 1.25rem;
  }

  .search-panel__tab-icon {
    width: 1.5rem;
  }

  .search-panel__tab:first-child .search-panel__tab-icon {
    width: 1.1875rem;
  }

  .search-panel__tab-icon--layers {
    width: 1.8125rem;
  }

  .search-panel__body {
    padding: 2.75rem 3.4rem 0;
  }

  .search-panel__chips {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem 1rem;
  }

  .search-panel__chips--wide {
    grid-template-columns: repeat(4, 1fr);
  }

  .search-panel__chips--wide .chip {
    padding: 0 0.75rem;
  }

  .chip {
    gap: 0.5625rem;
    height: 3.1875rem;
    border-radius: 0.525rem;
  }

  .chip__label {
    font-size: 1.1875rem;
  }

  .chip__count {
    font-size: 0.9375rem;
  }

  .search-panel__button {
    gap: 0.875rem;
    height: 4.75rem;
    margin-top: 1.7375rem;
    padding: 0 2.5rem;
    border-radius: 0.9375rem;
    font-size: 1.75rem;
  }

  .search-panel__button-icon {
    width: 1.875rem;
  }

  /* 人気の検索タグ（上に区切り線） */
  .search-panel__popular {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--color-border);
  }

  .search-panel__popular-title {
    color: var(--color-muted);
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .search-panel__popular-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

/* トップPC（2校目の .ai に合わせる：Bold・#ff9903・入力欄の位置） */
@media (min-width: 1024px) {
  .search-panel--hero .search-panel__head {
    gap: 1.1875rem;
    padding: 1.5625rem 2.625rem 1.5625rem 1.375rem;
  }

  .search-panel--hero .search-panel__purpose-label {
    background-color: var(--color-sub-hero);
    font-size: 1.125rem;
    font-weight: 700;
  }

  .search-panel--hero .search-panel__purpose-label::after {
    background-color: var(--color-sub-hero);
  }

  .search-panel--hero .search-panel__purpose-text {
    color: var(--color-sub-hero);
    font-size: 1.625rem;
    font-weight: 700;
  }

  .search-panel--hero .search-panel__keyword {
    border-color: var(--color-input-border-hero);
  }

  .search-panel--hero .search-panel__keyword:focus-within {
    border-color: var(--color-primary);
  }

  .search-panel--hero .search-panel__input {
    padding-left: 2.4375rem;
  }

  .search-panel--hero .search-panel__input::placeholder {
    font-weight: 700;
  }

  .search-panel--hero .search-panel__submit {
    font-size: 1.4375rem;
    font-weight: 700;
  }

  .search-panel--hero .search-panel__tab {
    font-size: 1.3rem;
    font-weight: 700;
  }

  .search-panel--hero .search-panel__button {
    background-color: var(--color-sub-hero);
    font-weight: 700;
  }

  .search-panel--hero .search-panel__popular {
    gap: 0.8125rem;
    padding-left: 0.4375rem;
  }

  .search-panel--hero .search-panel__popular-title {
    letter-spacing: 0.08em;
  }

  .search-panel--hero .search-panel__popular-list {
    gap: 0.6875rem;
  }

  .search-panel--hero .hash-tag {
    font-size: 0.9167rem;
    font-weight: 700;
  }
}

/* 下層ページ用（SPでも人気の検索タグを表示） */
.search-panel--page {
  margin: 0;
}

.search-panel--page .search-panel__body {
  padding: calc(32 * var(--sp)) calc(32 * var(--sp)) 0;
}

.search-panel--page .search-panel__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12 * var(--sp));
  margin-top: calc(24 * var(--sp));
  padding-top: calc(22 * var(--sp));
  border-top: 1px solid var(--color-border);
}

.search-panel--page .search-panel__popular-title {
  color: var(--color-muted);
  font-size: calc(25 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.search-panel--page .search-panel__popular-list {
  display: contents;
}

.search-panel--page .hash-tag {
  padding: calc(6 * var(--sp)) calc(12 * var(--sp));
  border-color: var(--color-hash-border-sp);
  border-radius: 100vmax;
  font-size: calc(18 * var(--sp));
  line-height: calc(25 * var(--sp));
}

@media (min-width: 1024px) {
  .search-panel--page {
    box-shadow: var(--shadow-panel-sp);
  }

  .search-panel--page .search-panel__body {
    padding: 2.75rem 3.4rem 0;
  }

  .search-panel--page .search-panel__popular {
    flex-wrap: nowrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.375rem;
  }

  .search-panel--page .search-panel__popular-title {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .search-panel--page .search-panel__popular-list {
    display: flex;
  }

  .search-panel--page .hash-tag {
    padding: 0.375rem 0.75rem;
    border-color: var(--color-hash-border);
    border-radius: 100vmax;
    font-size: 1rem;
    line-height: 1.4375rem;
  }
}

/* ==================== Hash Tag ==================== */
/* 2校目どおり、幅は文字に合わせ、角は高さの半分で丸める */
.hash-tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-hash-border);
  border-radius: 100vmax;
  background-color: var(--color-white);
  color: var(--color-hash);
  font-size: 1rem;
  line-height: 1.4375rem;
  white-space: nowrap;
}

/* ==================== CTA Banner ==================== */
/* SPはSP専用コンポーネント（SP/CTA：幅521px）のデザイン */
.cta-banner {
  padding-top: calc(75 * var(--sp));
  background-color: var(--color-sky);
}

.cta-banner__inner {
  width: calc(521 * var(--sp));
  margin-inline: auto;
}

.cta-banner__heading {
  display: flex;
  gap: calc(12 * var(--sp));
}

.cta-banner__badge {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: calc(8 * var(--sp)) calc(16 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: calc(20 * var(--sp));
  line-height: calc(24 * var(--sp));
}

/* バッジ右の三角 */
.cta-banner__badge::after {
  position: absolute;
  top: 50%;
  left: calc(100% - 1px);
  width: calc(9 * var(--sp));
  height: calc(17 * var(--sp));
  background-color: var(--color-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
  content: "";
}

.cta-banner__badge-small {
  font-size: calc(16 * var(--sp));
}

.cta-banner__title {
  position: relative;
  padding-top: calc(9 * var(--sp));
  color: var(--color-primary);
  font-size: calc(26 * var(--sp));
  font-weight: 500;
  line-height: calc(39 * var(--sp));
  white-space: nowrap;
}

/* 「動画でこそ」の上の強調点（5つ） */
.cta-banner__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  height: calc(3 * var(--sp));
  background: radial-gradient(circle calc(1.5 * var(--sp)), var(--color-primary) 95%, transparent) left top / 1em 100% repeat-x;
  content: "";
}

.cta-banner__underline {
  display: block;
  height: calc(21.26 * var(--sp));
  margin: calc(12.06 * var(--sp)) 0 calc(18.04 * var(--sp));
  background: url("img/cta-underline.svg") center / 100% 100% no-repeat;
}

.cta-banner__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(76 * var(--sp));
  border: calc(7.71 * var(--sp)) solid transparent;
  border-radius: calc(38 * var(--sp));
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(39deg, var(--gradient-tag-border-stops)) border-box;
  box-shadow: var(--shadow-cta-sp);
  color: var(--color-primary);
  font-size: calc(33 * var(--sp));
  font-weight: 700;
  line-height: 1.5;
  animation: cta-button-pulse 1.5s ease infinite;
}

/* Shadow works（lifix様）のお問い合わせボタンと同じ動き：控えめに3回ふくらむ */
@keyframes cta-button-pulse {
  0%,
  30%,
  70% {
    transform: scale(1);
  }

  15%,
  45%,
  90% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner__button {
    animation: none;
  }
}

.cta-banner__button-small {
  font-size: calc(26 * var(--sp));
}

.cta-banner__button::after {
  position: absolute;
  top: 50%;
  right: calc(23.4 * var(--sp));
  width: calc(11.64 * var(--sp));
  height: calc(22.74 * var(--sp));
  background: url("img/icon-chevron-large.svg") center / contain no-repeat;
  transform: translateY(-50%);
  content: "";
}

@media (min-width: 1024px) {
  .cta-banner {
    padding: 2.5rem 0;
  }

  .cta-banner__inner {
    width: 44.1875rem;
  }

  .cta-banner__heading {
    gap: 1.0625rem;
  }

  .cta-banner__badge {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .cta-banner__badge::after {
    width: 0.5625rem;
    height: 1.0625rem;
  }

  .cta-banner__badge-small {
    font-size: 1rem;
  }

  .cta-banner__title {
    padding-top: 0.75rem;
    font-size: 2.3125rem;
    line-height: 1.45;
  }

  .cta-banner__title::before {
    height: 0.375rem;
    background: radial-gradient(circle 0.1875rem, var(--color-primary) 95%, transparent) left top / 1em 100% repeat-x;
  }

  .cta-banner__underline {
    height: 1.8256rem;
    margin: 0.7081rem 0 1.2149rem;
  }

  .cta-banner__button {
    height: 6.6875rem;
    border-width: 0.33125rem;
    border-radius: 3.34375rem;
    background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(40deg, var(--gradient-tag-border-stops)) border-box;
    box-shadow: var(--shadow-cta);
    font-size: 2.9375rem;
    font-weight: 500;
    line-height: 1;
  }

  .cta-banner__button-small {
    font-size: 2.3125rem;
  }

  .cta-banner__button::after {
    right: 3.8125rem;
    width: 1.375rem;
    height: 2.6875rem;
  }
}

/* ==================== Brand Band ==================== */
.brand-band {
  padding-top: calc(42 * var(--sp));
  overflow: hidden;
  background-color: var(--color-sky);
}

.brand-band__track {
  display: flex;
  width: max-content;
  animation: brand-band-scroll 30s linear infinite;
}

.brand-band__group {
  display: flex;
  flex-shrink: 0;
}

/* 右から左へループ（同じ内容の2グループを半分ずらす） */
@keyframes brand-band-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-band__track {
    animation: none;
  }
}

.brand-band__text {
  flex-shrink: 0;
  padding-right: calc(20 * var(--sp));
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: calc(81 * var(--sp));
  font-weight: 700;
  line-height: calc(122 * var(--sp));
}

@media (min-width: 1024px) {
  .brand-band {
    padding: 5.375rem 0 1.25rem;
  }

  .brand-band__track {
    animation-duration: 40s;
  }

  .brand-band__text {
    padding-right: 7.1875rem;
    font-size: 11.9375rem;
    line-height: 1;
  }
}

/* ==================== Section Head ==================== */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(40 * var(--sp));
}

.section-head__en {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--sp));
  padding-left: calc(5 * var(--sp));
  font-size: calc(27 * var(--sp));
  line-height: calc(26 * var(--sp));
  /* グラデーション文字 */
  background: var(--gradient-en);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.section-head__en::after {
  width: calc(33 * var(--sp));
  height: calc(1.24 * var(--sp));
  background: linear-gradient(90deg, var(--gradient-brand-stops));
  opacity: 0.91;
  content: "";
}

.section-head__title {
  margin-top: calc(13 * var(--sp));
  color: var(--color-primary);
  font-size: calc(36 * var(--sp));
  font-weight: 500;
  line-height: calc(52 * var(--sp));
}

/* 押すと一覧を右へ1枚分送る（右端まで行ったら先頭へ戻る） */
.section-head__scroll {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 2rem;
  line-height: 1.625rem;
  cursor: pointer;
  transition: opacity 0.3s;
}

.section-head__scroll:hover {
  opacity: 0.7;
}

/* 横にはみ出すカードがないときは押しても動かないので隠す */
.section-head__scroll[hidden] {
  display: none;
}

/* デザインと同じ傾け方（斜体だと右端が切れるため変形で傾ける）
   行の高さより文字が大きく、グラデーションの塗りが上下で切れるため、余白で塗り範囲を広げて同じ分だけ詰める */
.section-head__scroll-text {
  display: inline-block;
  margin: -0.25em;
  padding: 0.25em;
  transform: matrix(1, 0, -0.1736, 0.9848, 0, 0);
  transform-origin: 0.25em calc(100% - 0.25em);
  background: var(--gradient-en);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.section-head__scroll::after {
  width: 1.875rem;
  height: 1.5625rem;
  background: url("img/icon-scroll.svg") center / contain no-repeat;
  content: "";
}

@media (min-width: 1024px) {
  .section-head {
    margin-bottom: 2.5rem;
  }

  .section-head__en {
    gap: 1.25rem;
    padding-left: 0.3125rem;
    font-size: 1.6875rem;
    line-height: 1.625rem;
  }

  .section-head__en::after {
    width: 2.0625rem;
    height: 0.078rem;
  }

  .section-head__title {
    margin-top: 0.8125rem;
    font-size: 2.25rem;
    line-height: 3.25rem;
  }
}

/* ==================== More Button ==================== */
.more-button {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: calc(221 * var(--sp));
  height: calc(45 * var(--sp));
  padding: 0 calc(50 * var(--sp)) 0 calc(24 * var(--sp));
  border: 1px solid var(--color-primary);
  border-radius: calc(22.8 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: calc(22.5 * var(--sp));
  line-height: 1;
}

.more-button::after {
  position: absolute;
  top: 50%;
  right: calc(26 * var(--sp));
  width: calc(8 * var(--sp));
  height: calc(16 * var(--sp));
  background: url("img/icon-chevron.svg") center / contain no-repeat;
  transform: translateY(-50%);
  content: "";
}

@media (min-width: 1024px) {
  /* 文字はボタンの中央に置く（左右の余白を揃え、右の矢印にかからない幅を取る） */
  .more-button {
    justify-content: center;
    min-width: 17.25rem;
    height: 3.5625rem;
    padding: 0 2.875rem;
    border-radius: 1.78125rem;
    font-size: 1.375rem;
  }

  .more-button::after {
    right: 2.25rem;
    width: 0.5rem;
    height: 1rem;
  }
}

/* ==================== Job Card ==================== */
.job-list {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
}

.job-card {
  height: 100%;
  overflow: hidden;
  border-radius: calc(13.4 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-card-sp);
}

.job-card__link {
  display: block;
  height: 100%;
}

.job-card__thumb {
  width: 100%;
  aspect-ratio: 521 / 286;
  object-fit: cover;
}

.job-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(16.7 * var(--sp));
  padding: calc(35 * var(--sp)) calc(35 * var(--sp)) calc(30 * var(--sp));
}

.job-card__company {
  color: var(--color-chip-border);
  font-size: calc(18 * var(--sp));
  line-height: 1.45;
}

.job-card__title {
  color: var(--color-black);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(38.5 * var(--sp));
}

.job-card__lead {
  color: var(--color-card-text);
  font-size: calc(25 * var(--sp));
  line-height: 1.45;
}

.job-card__info {
  display: flex;
  flex-direction: column;
  gap: calc(21.8 * var(--sp));
  padding: calc(16.7 * var(--sp)) 0 0 calc(21.8 * var(--sp));
  color: var(--color-card-text);
  font-size: calc(22 * var(--sp));
  line-height: calc(30 * var(--sp));
}

.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(13.4 * var(--sp));
  padding-top: calc(18.4 * var(--sp));
}

.job-card__tag {
  padding: calc(8.4 * var(--sp)) calc(13.4 * var(--sp));
  border: calc(1.67 * var(--sp)) solid var(--color-primary);
  border-radius: calc(5 * var(--sp));
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  line-height: 1.45;
}

.job-card__more {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--sp));
  padding-top: calc(23.4 * var(--sp));
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  line-height: 1.45;
}

.job-card__more::after {
  width: calc(8 * var(--sp));
  height: calc(18 * var(--sp));
  background: url("img/icon-chevron-small.svg") center / contain no-repeat;
  content: "";
}

@media (min-width: 1024px) {
  .job-list {
    flex-direction: row;
    gap: 2.1875rem;
  }

  .job-list__item {
    width: 19rem;
  }

  /* NEW WORKS・POPULAR：4件目からは横にはみ出し、横スクロールで送る（NEW WORKSは「Scroll」ボタンでも送れる）
     カードの影が切れないよう、上下左右に余白を取って同じ分だけ外へ広げる（はみ出しは各セクションで切る） */
  .job-list--flow {
    margin: -2rem;
    padding: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .job-list--flow {
      scroll-behavior: auto;
    }
  }

  .job-list--flow::-webkit-scrollbar {
    display: none;
  }

  .job-list--flow .job-list__item {
    flex-shrink: 0;
  }

  /* デザインのカードは高さ560pxで固定（中身の下に余白が残る） */
  .job-card {
    min-height: 35rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-card);
  }

  .job-card__thumb {
    aspect-ratio: 304 / 171;
  }

  .job-card__body {
    gap: 0.625rem;
    padding: 1.3125rem 1.3125rem 1.125rem;
  }

  .job-card__company {
    font-size: 0.6875rem;
  }

  .job-card__title {
    font-size: 0.9375rem;
    line-height: 1.4375rem;
  }

  .job-card__lead {
    font-size: 0.9375rem;
  }

  .job-card__info {
    gap: 0.8125rem;
    padding: 0.625rem 0 0 0.8125rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }

  .job-card__tags {
    gap: 0.5rem;
    padding-top: 0.6875rem;
  }

  .job-card__tag {
    padding: 0.3125rem 0.5rem;
    border-width: 1px;
    border-radius: 0.1875rem;
    font-size: 0.8125rem;
  }

  .job-card__more {
    gap: 0.375rem;
    padding-top: 0.875rem;
    font-size: 0.8125rem;
  }

  .job-card__more::after {
    width: 0.3125rem;
    height: 0.6875rem;
  }
}

/* ==================== New Works ==================== */
/* SPデザインには無いセクション */
.new-works {
  display: none;
}

@media (min-width: 1024px) {
  /* 横スクロールの枠を影の分だけ広げているため、狭い画面で横にはみ出さないよう切る */
  .new-works {
    display: block;
    overflow: hidden;
    padding: 5rem 0 6.25rem;
    background-color: var(--color-sky);
  }

  .new-works__inner {
    max-width: var(--content-width);
    margin-inline: auto;
  }

}

/* ==================== Popular Jobs ==================== */
.popular-jobs {
  padding: calc(80 * var(--sp)) 0 calc(60 * var(--sp));
}

.popular-jobs__inner {
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding: 0 calc(20 * var(--sp));
}

@media (min-width: 1024px) {
  /* 横スクロールの枠を影の分だけ広げているため、狭い画面で横にはみ出さないよう切る */
  .popular-jobs {
    overflow: hidden;
    padding: 6.25rem 0;
  }

  .popular-jobs__inner {
    max-width: var(--content-width);
    padding: 0;
  }
}

/* ==================== Job Finder ==================== */
.job-finder {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--sp));
  margin-top: calc(40 * var(--sp));
  padding: calc(40 * var(--sp)) calc(20 * var(--sp));
  border-radius: calc(27 * var(--sp));
  background: var(--gradient-finder-sp);
  color: var(--color-white);
}

.job-finder__title {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--sp));
  font-size: calc(30 * var(--sp));
  font-weight: 500;
  line-height: calc(52 * var(--sp));
}

.job-finder__title-icon {
  width: calc(30 * var(--sp));
}

.job-finder__group {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
}

.job-finder__group:last-child {
  gap: calc(24 * var(--sp));
}

.job-finder__heading {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--sp));
  font-size: calc(18 * var(--sp));
  font-weight: 500;
  line-height: calc(24 * var(--sp));
}

.job-finder__heading::before {
  width: calc(16 * var(--sp));
  height: calc(16 * var(--sp));
  background-color: var(--color-white);
  content: "";
}

.job-finder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--sp));
}

.finder-tag {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--sp));
  min-width: calc(144 * var(--sp));
  height: calc(38 * var(--sp));
  padding: 0 calc(12 * var(--sp));
  border-radius: calc(19 * var(--sp));
  background-color: var(--color-white);
  font-size: calc(16 * var(--sp));
  line-height: calc(22 * var(--sp));
  white-space: nowrap;
}

.finder-tag__hash {
  color: var(--color-primary);
}

.finder-tag__name {
  flex: 1;
  color: var(--color-black);
}

.finder-tag__count {
  color: var(--color-count);
  font-size: calc(12 * var(--sp));
}

/* 特徴のタグは文字数に合わせた幅にし、文字をタグの中央に置く */
.job-finder__tags--fit .finder-tag {
  justify-content: center;
  min-width: 0;
}

.job-finder__tags--fit .finder-tag__name {
  flex: none;
}

.job-finder__tags--fit .finder-tag__count {
  margin-left: calc(4 * var(--sp));
}

.job-finder__industries {
  display: grid;
  grid-template-columns: repeat(4, calc(103 * var(--sp)));
  gap: calc(24 * var(--sp)) calc(16 * var(--sp));
}

/* SPデザインはPCと並び順が違う（5〜8番目と9〜12番目を入れ替え） */
.job-finder__industry--sp-second {
  order: 1;
}

.job-finder__industry--sp-third {
  order: 2;
}

.job-finder__industry--sp-last {
  order: 3;
}

.industry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--sp));
}

.industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(88 * var(--sp));
  height: calc(88 * var(--sp));
  border-radius: 50%;
  background-color: var(--color-white);
}

.industry__img {
  width: calc(54 * var(--sp));
}

.industry__img--dots {
  width: calc(38 * var(--sp));
}

.industry__name {
  font-size: calc(13 * var(--sp));
  line-height: calc(19 * var(--sp));
  text-align: center;
}

@media (min-width: 1024px) {
  .job-finder {
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding: 3.5rem 4rem 4rem;
    border-radius: 1.6875rem;
    background: var(--gradient-finder);
  }

  .job-finder__title {
    gap: 0.625rem;
    font-size: 2.5rem;
    line-height: 3.25rem;
  }

  .job-finder__title-icon {
    width: 2.6875rem;
  }

  .job-finder__group,
  .job-finder__group:last-child {
    gap: 1.25rem;
  }

  .job-finder__heading {
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .job-finder__heading::before {
    width: 1rem;
    height: 1rem;
  }

  .job-finder__tags {
    gap: 0.875rem 0.625rem;
  }

  /* 地域のタグはデザインの幅（112px）を最小にし、名前が長いタグだけ広げる */

  .job-finder__group:nth-child(3) .job-finder__tags {
    gap: 0.875rem 0.75rem;
  }

  .job-finder__group:nth-child(3) .finder-tag {
    min-width: 7rem;
  }

  .job-finder__group:nth-child(3) .finder-tag__name {
    font-weight: 700;
  }

  .finder-tag {
    min-width: 0;
    gap: 0.25rem;
    height: 2.125rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-primary);
    border-radius: 1.625rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .finder-tag__name {
    flex: none;
  }

  .finder-tag__count {
    margin-left: auto;
    font-size: 0.75rem;
  }

  .job-finder__tags--fit .finder-tag__count {
    margin-left: 0.25rem;
  }

  .job-finder__industries {
    grid-template-columns: repeat(8, 5.875rem);
    gap: 1.75rem 0.875rem;
  }

  .job-finder__industry--sp-second,
  .job-finder__industry--sp-third,
  .job-finder__industry--sp-last {
    order: 0;
  }

  .industry {
    gap: 0.75rem;
  }

  .industry__icon {
    width: 5.3125rem;
    height: 5.3125rem;
  }

  .industry__img {
    width: 3.25rem;
  }

  .industry__img--dots {
    width: 2.375rem;
  }

  .industry__name {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

/* ==================== Pick Up ==================== */
.pickup {
  padding: calc(60 * var(--sp)) 0;
  background-color: var(--color-sky);
}

.pickup__inner {
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding-left: calc(20 * var(--sp));
  overflow: hidden;
}

.pickup .section-head {
  padding-right: calc(21 * var(--sp));
}

/* SPは横スクロール */
.article-list {
  display: flex;
  gap: calc(24 * var(--sp));
  padding-right: calc(20 * var(--sp));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.article-list::-webkit-scrollbar {
  display: none;
}

.article-list__item {
  flex: 0 0 calc(258 * var(--sp));
  min-width: 0;
  scroll-snap-align: start;
}

.article-card__img {
  width: 100%;
  aspect-ratio: 258 / 156;
  border-radius: 0 calc(32.56 * var(--sp));
  object-fit: cover;
}

.article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--sp));
  margin-top: calc(16 * var(--sp));
}

.article-card__category {
  color: var(--color-primary);
  font-size: calc(16 * var(--sp));
  font-weight: 700;
  line-height: calc(24 * var(--sp));
}

.article-card__date {
  color: var(--color-muted);
  font-size: calc(14 * var(--sp));
  line-height: calc(22 * var(--sp));
}

.article-card__title {
  margin-top: calc(8 * var(--sp));
  overflow: hidden;
  color: var(--color-primary);
  font-size: calc(16 * var(--sp));
  font-weight: 700;
  line-height: calc(24 * var(--sp));
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .pickup {
    padding: 6.25rem 0 0;
  }

  .pickup__inner {
    max-width: var(--content-width);
    padding: 0;
    overflow: visible;
  }

  .pickup .section-head {
    padding-right: 0;
  }

  .article-list {
    justify-content: space-between;
    gap: 0;
    padding-right: 0;
    overflow: visible;
  }

  .article-list__item {
    flex: 0 0 19.0625rem;
  }

  .article-card__img {
    aspect-ratio: 305 / 185;
    border-radius: 0 2.415rem;
  }

  .article-card__meta {
    margin-top: 1rem;
  }

  .article-card__category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* カテゴリ前の三角 */
  .article-card__category::before {
    width: 0.8125rem;
    height: 0.9375rem;
    background-color: var(--color-primary);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
  }

  .article-card__date {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
  }

  .article-card__title {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

/* ==================== Page CTA ==================== */
.page-cta {
  padding: calc(80 * var(--sp)) 0 calc(48 * var(--sp));
}

@media (min-width: 1024px) {
  .page-cta {
    padding: 3.75rem 0 6.25rem;
    background-color: var(--color-sky);
  }
}

/* ==================== Footer ==================== */
.footer {
  padding: calc(46 * var(--sp)) calc(23 * var(--sp));
  background-color: var(--color-footer);
  color: var(--color-primary);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34.5 * var(--sp));
  max-width: calc(515 * var(--sp));
  margin-inline: auto;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(23 * var(--sp));
}

.footer__logo {
  width: calc(204 * var(--sp));
}

.footer__sns {
  display: flex;
  gap: calc(22 * var(--sp));
}

.footer__sns-link {
  display: block;
  width: calc(58 * var(--sp));
}

.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(17 * var(--sp));
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

.footer__copyright {
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

.footer__copyright small {
  font-size: inherit;
}

@media (min-width: 1024px) {
  .footer {
    padding: 3.8125rem 0 2.4375rem;
  }

  .footer__inner {
    gap: 5rem;
    max-width: var(--content-width);
  }

  .footer__brand {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .footer__logo {
    width: 18.6875rem;
  }

  .footer__sns {
    gap: 1.75rem;
  }

  .footer__sns-link {
    width: 4.5625rem;
  }

  .footer__nav-list {
    gap: 1.5rem;
    font-size: 1.625rem;
    line-height: 2.375rem;
  }

  .footer__nav-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* 区切り線 */
  .footer__nav-item + .footer__nav-item::before {
    width: 1px;
    height: 1.5rem;
    background-color: var(--color-primary);
    content: "";
  }

  .footer__copyright {
    font-size: 1rem;
    line-height: 1.4375rem;
  }
}

/* ==================== Page Layout（下層ページ共通） ==================== */
.page-main {
  padding: calc(32 * var(--sp)) 0 0;
}

.page-main__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding: 0 calc(20 * var(--sp));
}

.page-title {
  padding: calc(20 * var(--sp)) calc(24 * var(--sp));
  background-color: var(--color-sky);
  color: var(--color-primary);
  font-size: calc(36 * var(--sp));
  font-weight: 500;
  line-height: calc(50 * var(--sp));
}

/* 検索結果ページ（見出し帯の下） */
.page-main--search {
  padding-top: calc(32 * var(--sp));
}

/* CTA（下層ページは背景なし） */
.page-cta--plain {
  padding: calc(32 * var(--sp)) 0 calc(40 * var(--sp));
  background-color: transparent;
}

/* 検索結果0件（CTAの上下を広く） */
.page-cta--empty {
  padding-top: calc(40 * var(--sp));
}

@media (min-width: 1024px) {
  .page-main {
    padding-top: 2.5rem;
  }

  .page-main__inner {
    gap: 2.5rem;
    max-width: var(--content-width);
    padding: 0;
  }

  .page-title {
    padding: 1.25rem 1.5rem;
    font-size: 1.625rem;
    line-height: 2.25rem;
  }

  .page-main--search {
    padding-top: 3rem;
  }

  .page-cta--plain {
    padding: 2.5rem 0 7.5rem;
    background-color: transparent;
  }

  .page-cta--search {
    padding-bottom: 6.25rem;
  }

  .page-cta--empty {
    padding: 7.75rem 0 8.75rem;
  }
}

/* ==================== Breadcrumb ==================== */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8.71 * var(--sp));
  font-size: calc(18 * var(--sp));
  line-height: 1.45;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: calc(8.71 * var(--sp));
  color: var(--color-black);
}

.breadcrumb__item + .breadcrumb__item::before {
  width: calc(5 * var(--sp));
  height: calc(9 * var(--sp));
  background: url("img/icon-breadcrumb.svg") center / contain no-repeat;
  content: "";
}

.breadcrumb__item--current {
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .breadcrumb__list,
  .breadcrumb__item {
    gap: 0.544rem;
  }

  .breadcrumb__list {
    font-size: 0.75rem;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    width: 0.3125rem;
    height: 0.5625rem;
  }
}

/* ==================== Job Results ==================== */
.job-results__count {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--sp));
  margin-top: calc(32 * var(--sp));
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
}

.job-results__number {
  font-size: calc(25 * var(--sp));
  font-weight: 700;
}

.job-results__layout {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
  margin-top: calc(20 * var(--sp));
}

.job-results__list {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
}

@media (min-width: 1024px) {
  .job-results__count {
    gap: 0.185rem;
    margin-top: 2.5rem;
    font-size: 1.0625rem;
  }

  .job-results__number {
    font-size: 1.375rem;
  }

  .job-results__layout {
    flex-direction: row;
    gap: 2.125rem;
    margin-top: 1.25rem;
  }

  .job-results__list {
    flex-shrink: 0;
    width: 46.25rem;
    gap: 2rem;
  }
}

/* ==================== Job Item（求人一覧のカード） ==================== */
.job-item {
  padding: calc(24 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel-sp);
}

.job-item__head {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
}

.job-item__summary {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
}

.job-item__company {
  color: var(--color-chip-border);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.job-item__title {
  color: var(--color-black);
  font-size: calc(25 * var(--sp));
  font-weight: 500;
  line-height: calc(35 * var(--sp));
}

.job-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--sp)) calc(6 * var(--sp));
}

.job-item__tag {
  padding: calc(3 * var(--sp)) calc(6 * var(--sp));
  border: 1px solid var(--color-tag-border);
  border-radius: calc(3 * var(--sp));
  color: var(--color-chip-text);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.job-item__tag--type {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.job-item__thumb {
  width: 100%;
  aspect-ratio: 473 / 266;
  border-radius: calc(10 * var(--sp)) calc(10 * var(--sp)) 0 0;
  object-fit: cover;
}

.job-item__lead {
  margin-top: calc(16 * var(--sp));
  padding: calc(16 * var(--sp)) 0 calc(8 * var(--sp));
  border-top: 1px solid var(--color-divider);
  color: var(--color-chip-border);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.job-item__info-item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sp));
  padding: calc(14 * var(--sp)) 0 calc(4 * var(--sp));
  border-top: 1px solid var(--color-divider);
  color: var(--color-black);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

/* 募集情報アイコン（青丸） */
.job-item__info-item::before {
  flex-shrink: 0;
  width: calc(31 * var(--sp));
  height: calc(31 * var(--sp));
  border-radius: 50%;
  background: var(--color-primary) url("img/icon-info-pin.svg") center / calc(12 * var(--sp)) auto no-repeat;
  content: "";
}

.job-item__info-item--pay::before {
  background-image: url("img/icon-info-yen.svg");
  background-size: calc(19 * var(--sp)) auto;
}

.job-item__info-item--time::before {
  background-image: url("img/icon-info-clock.svg");
  background-size: calc(18 * var(--sp)) auto;
}

/* 長い文はSPで2行、PCで1行に省略 */
.job-item__info-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.job-item__button,
.job-item__closed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--sp));
  min-height: calc(68 * var(--sp));
  margin-top: calc(24 * var(--sp));
  padding: calc(16 * var(--sp)) calc(24 * var(--sp));
  border-radius: calc(4 * var(--sp));
  box-shadow: var(--shadow-detail-button);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(35 * var(--sp));
  text-align: center;
}

.job-item__button {
  background: var(--gradient-button);
}

.job-item__button::after {
  width: calc(8 * var(--sp));
  height: calc(16 * var(--sp));
  background: url("img/icon-arrow-white.svg") center / contain no-repeat;
  content: "";
}

.job-item__closed {
  background-color: var(--color-muted);
  font-size: calc(22 * var(--sp));
}

@media (min-width: 1024px) {
  .job-item {
    padding: 1.75rem;
    border-radius: 0.625rem;
  }

  .job-item__head {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .job-item__summary {
    flex: 1;
    gap: 0.5rem;
  }

  .job-item__company {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .job-item__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .job-item__tags {
    gap: 0.375rem;
  }

  .job-item__tag {
    padding: 0.1875rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .job-item__thumb {
    flex-shrink: 0;
    width: 17.3125rem;
    border-radius: 0.625rem 0.625rem 0 0;
  }

  .job-item__lead {
    margin-top: 1rem;
    padding: 1rem 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .job-item__info-item {
    gap: 1rem;
    padding: 0.875rem 0 0.25rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }

  .job-item__info-item::before {
    width: 1.9375rem;
    height: 1.9375rem;
    background-size: 0.75rem auto;
  }

  .job-item__info-item--pay::before {
    background-size: 1.1875rem auto;
  }

  .job-item__info-item--time::before {
    background-size: 1.125rem auto;
  }

  .job-item__info-text {
    -webkit-line-clamp: 1;
  }

  .job-item__button,
  .job-item__closed {
    gap: 1.5rem;
    min-height: 3.5rem;
    margin-top: 2.25rem;
    padding: 0.875rem 0;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .job-item__button::after {
    width: 0.5rem;
    height: 1rem;
  }
}

/* ==================== Industry Nav（職種から探す） ==================== */
.industry-nav {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--sp));
  padding: calc(12 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel-sp);
}

.industry-nav__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--sp));
  margin-bottom: calc(12 * var(--sp));
  padding: calc(12 * var(--sp)) calc(8 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-sky);
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  font-weight: 500;
  line-height: calc(31 * var(--sp));
}

.industry-nav__title::after {
  width: calc(14 * var(--sp));
  height: calc(14 * var(--sp));
  background: url("img/icon-search-blue.svg") center / contain no-repeat;
  content: "";
}

/* 見出し下の三角 */
.industry-nav__title::before {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: calc(14 * var(--sp));
  height: calc(12 * var(--sp));
  background-color: var(--color-sky);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
  content: "";
}

.industry-nav__list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--sp));
}

.industry-nav__link {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp));
  padding: calc(16 * var(--sp));
  border: 1px solid var(--color-item-border);
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-white);
}

.industry-nav__icon {
  flex-shrink: 0;
  width: calc(28 * var(--sp));
}

.industry-nav__icon--dots {
  padding: 0 calc(3 * var(--sp));
}

.industry-nav__name {
  padding-left: calc(8 * var(--sp));
  border-left: 1px solid var(--color-separator);
  color: var(--color-muted);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.industry-nav__name--other {
  font-weight: 700;
}

@media (min-width: 1024px) {
  .industry-nav {
    width: 13.125rem;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
  }

  .industry-nav__title {
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .industry-nav__title::after {
    width: 0.875rem;
    height: 0.875rem;
  }

  .industry-nav__title::before {
    width: 0.875rem;
    height: 0.75rem;
  }

  .industry-nav__list {
    gap: 0.72rem;
  }

  .industry-nav__link {
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
  }

  .industry-nav__icon {
    width: 1.75rem;
  }

  /* 点の画像は背が低いので、ほかのアイコンと同じ高さの枠に入れて項目の高さをそろえる */
  .industry-nav__icon--dots {
    height: 1.75rem;
    padding: 0 0.1875rem;
    object-fit: contain;
  }

  .industry-nav__name {
    padding-left: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* ==================== Job Detail（求人詳細） ==================== */
.job-detail-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 521 / 292;
  border: 0;
}

.job-detail {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
}

.job-detail__main {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
  color: var(--color-text);
}

.job-detail__company {
  color: var(--color-chip-border);
  font-size: calc(22 * var(--sp));
  line-height: calc(32 * var(--sp));
}

.job-detail__title {
  margin-top: calc(13 * var(--sp));
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(33 * var(--sp));
}

.job-detail__lead {
  margin-top: calc(13 * var(--sp));
  padding: calc(12 * var(--sp)) calc(24 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-lead-bg);
  font-size: calc(22 * var(--sp));
  line-height: calc(34 * var(--sp));
}

.job-detail__conditions {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
  margin: calc(24 * var(--sp)) 0 calc(-1.5 * var(--sp));
  padding-bottom: calc(25.5 * var(--sp));
  border-bottom: calc(3 * var(--sp)) solid var(--color-border);
}

.job-detail__condition {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--sp));
}

.job-detail__condition-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: calc(9 * var(--sp));
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(36 * var(--sp));
}

.job-detail__condition-label::before {
  width: calc(21 * var(--sp));
  height: calc(21 * var(--sp));
  background: url("img/icon-detail-pin.svg") center / contain no-repeat;
  content: "";
}

.job-detail__condition-label--pay::before {
  background-image: url("img/icon-detail-yen.svg");
}

.job-detail__condition-value {
  margin: 0;
  font-size: calc(22 * var(--sp));
  line-height: calc(32 * var(--sp));
  padding-top: calc(2 * var(--sp));
}

/* 見出し（アイコン＋見出し＋細線）
   アイコンの幅・アイコンと文字の間・文字と線の間・線の右端の余白は、デザインで見出しごとに違うので変数で持つ */
.detail-section__title {
  --title-icon-width: calc(20 * var(--sp));
  --title-icon-gap: calc(8 * var(--sp));
  --title-line-gap: calc(12 * var(--sp));
  --title-line-end: 0px;
  display: flex;
  align-items: center;
  gap: var(--title-line-gap);
  margin-bottom: calc(10 * var(--sp));
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(36 * var(--sp));
}

.detail-section__title::before {
  flex-shrink: 0;
  width: var(--title-icon-width);
  height: calc(21 * var(--sp));
  margin-right: calc(var(--title-icon-gap) - var(--title-line-gap));
  background: url("img/icon-detail-clock.svg") right center / contain no-repeat;
  content: "";
}

.detail-section__title::after {
  flex: 1;
  height: 1px;
  margin-right: var(--title-line-end);
  background-color: var(--color-border);
  transform: scaleY(0.5);
  content: "";
}

.detail-section__title--place {
  --title-icon-width: calc(13 * var(--sp));
  --title-icon-gap: calc(12 * var(--sp));
}

.detail-section__title--place::before {
  background-image: url("img/icon-detail-pin.svg");
}

.detail-section__title--work {
  --title-icon-width: calc(17 * var(--sp));
  --title-icon-gap: calc(12 * var(--sp));
}

.detail-section__title--work::before {
  background-image: url("img/icon-detail-work.svg");
}

/* 円アイコンはデザインで枠より2px右にはみ出しているので、幅を2px広げて右寄せにする */
.detail-section__title--pay {
  --title-icon-width: calc(23 * var(--sp));
  --title-icon-gap: calc(6 * var(--sp));
}

.detail-section__title--pay::before {
  background-image: url("img/icon-detail-yen.svg");
}

.detail-section__title--apply {
  --title-icon-width: calc(17 * var(--sp));
  --title-icon-gap: calc(7 * var(--sp));
}

.detail-section__title--apply::before {
  background-image: url("img/icon-detail-apply.svg");
}

.detail-section__title--company {
  --title-icon-width: calc(22 * var(--sp));
}

.detail-section__title--company::before {
  background-image: url("img/icon-faq-section-company.svg");
}

.detail-section__body {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(28 * var(--sp));
}

.detail-section__body--tight {
  gap: calc(10 * var(--sp));
}

.detail-section__body--hours {
  gap: calc(27 * var(--sp));
}

.detail-section__body--place {
  gap: calc(24 * var(--sp));
}

.detail-section__body--pay {
  line-height: calc(32 * var(--sp));
}

.detail-section__body--apply {
  gap: calc(30 * var(--sp));
}

.detail-section__label {
  line-height: calc(33 * var(--sp));
}

.detail-section__catch {
  line-height: calc(32 * var(--sp));
}

/* 複数行をまとめたブロック（行間はデザインの行どうしの間隔） */
.detail-section__group {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--sp));
}

.detail-section__group--loose {
  gap: calc(10 * var(--sp));
}

.detail-section__group--catch {
  gap: calc(22 * var(--sp));
}

.detail-section__subtitle {
  font-size: calc(22 * var(--sp));
  font-weight: 700;
  line-height: calc(33 * var(--sp));
}

.detail-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--sp)) calc(4 * var(--sp));
}

.detail-section__tag {
  padding: calc(4 * var(--sp)) calc(9 * var(--sp));
  border: 1px solid var(--color-detail-tag-border);
  border-radius: calc(3 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-chip-text);
  font-size: calc(22 * var(--sp));
  line-height: calc(28 * var(--sp));
}

.detail-section__tag--type {
  color: var(--color-primary);
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--sp));
  line-height: calc(32 * var(--sp));
}

.company-info__row {
  display: flex;
  gap: calc(20 * var(--sp));
}

.company-info__term {
  flex-shrink: 0;
}

.company-info__desc {
  margin: 0;
}

/* 本文中のリンク（入力欄に書いたURL・本文エディタのリンク） */
.detail-section__body a {
  color: var(--color-primary);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .detail-section__body a:hover {
    text-decoration: none;
  }
}

/* 「ひなたの極」認証企業のロゴ（認証企業のみ表示） */
.company-info__badge {
  position: relative;
  width: calc(52 * var(--sp));
  margin-top: calc(22 * var(--sp));
  cursor: pointer;
  outline: none;
}

.company-info__badge-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 「ひなたの極」説明の吹き出し（ロゴの上に表示） */
.company-info__badge-note {
  position: absolute;
  bottom: calc(100% + 12 * var(--sp));
  left: 0;
  z-index: 10;
  width: calc(400 * var(--sp));
  padding: calc(14 * var(--sp)) calc(18 * var(--sp));
  border-radius: calc(8 * var(--sp));
  background-color: var(--color-text);
  color: var(--color-white);
  font-size: calc(20 * var(--sp));
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(6 * var(--sp)));
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
}

/* 吹き出しの三角（ロゴ中央を指す） */
.company-info__badge-note::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(26 * var(--sp) - 8 * var(--sp));
  border-width: calc(8 * var(--sp)) calc(8 * var(--sp)) 0;
  border-style: solid;
  border-color: var(--color-text) transparent transparent;
}

.company-info__badge:hover .company-info__badge-note,
.company-info__badge:focus .company-info__badge-note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 求人概要（サイドバー） */
.job-summary {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--sp));
  padding: calc(20 * var(--sp)) calc(24 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel-sp);
  color: var(--color-text);
}

.job-summary__company {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp));
  padding: calc(8 * var(--sp));
  border-radius: calc(30 * var(--sp));
  background-color: var(--color-sky);
  color: var(--color-primary);
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

.job-summary__company::before {
  flex-shrink: 0;
  width: calc(8 * var(--sp));
  height: calc(14 * var(--sp));
  background: url("img/icon-summary-pin.svg") center / contain no-repeat;
  content: "";
}

.job-summary__title {
  padding-bottom: calc(12 * var(--sp));
  border-bottom: 1px solid var(--color-border);
  font-size: calc(22 * var(--sp));
  font-weight: 700;
  line-height: calc(33 * var(--sp));
}

.job-summary__conditions {
  margin: 0;
}

/* 各条件の下に区切り線（値の8px下）、条件どうしの間は12px */
.job-summary__condition {
  padding-bottom: calc(8 * var(--sp));
  border-bottom: 1px solid var(--color-border);
}

.job-summary__condition + .job-summary__condition {
  margin-top: calc(12 * var(--sp));
}

.job-summary__label {
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.job-summary__value {
  margin: calc(8 * var(--sp)) 0 0;
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

.job-summary__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(68 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-sub);
  box-shadow: var(--shadow-apply-small);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.easy-apply {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--sp));
  padding: calc(20 * var(--sp)) calc(16 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.easy-apply__head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sp));
  padding-bottom: calc(16 * var(--sp));
  border-bottom: 1px solid var(--color-border);
}

.easy-apply__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(56 * var(--sp));
  height: calc(68 * var(--sp));
  border: 1px solid var(--color-badge-border);
  border-radius: calc(28 * var(--sp));
  font-size: calc(28 * var(--sp));
  line-height: calc(35 * var(--sp));
}

.easy-apply__badge-unit {
  font-size: calc(16 * var(--sp));
  line-height: calc(20 * var(--sp));
}

.easy-apply__text {
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.easy-apply__number {
  font-size: calc(25 * var(--sp));
}

.easy-apply__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(16 * var(--sp));
  counter-reset: step;
}

.easy-apply__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--sp));
  font-size: calc(18 * var(--sp));
  line-height: calc(26 * var(--sp));
  text-align: center;
  counter-increment: step;
}

.easy-apply__step::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--sp));
  height: calc(32 * var(--sp));
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  content: counter(step);
}

.job-summary__updated {
  color: var(--color-border);
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
  text-align: center;
}

/* 応募ボタン帯 */
.apply-bar {
  margin-top: calc(50 * var(--sp));
  padding: calc(16 * var(--sp)) calc(20 * var(--sp));
  background-color: var(--color-bg);
  box-shadow: var(--shadow-apply-bar);
}

.apply-bar__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--sp));
  max-width: calc(521 * var(--sp));
  min-height: calc(72 * var(--sp));
  margin-inline: auto;
  border-radius: calc(12 * var(--sp));
  background-color: var(--color-sub);
  box-shadow: var(--shadow-apply-button);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(35 * var(--sp));
}

.apply-bar__button::after {
  width: calc(8 * var(--sp));
  height: calc(16 * var(--sp));
  background: url("img/icon-arrow-white.svg") center / contain no-repeat;
  content: "";
}

/* 関連する求人 */
.related-jobs {
  padding: calc(32 * var(--sp)) 0;
}

.related-jobs__inner {
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding: 0 calc(20 * var(--sp));
}

.related-jobs__title {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--sp));
  margin-bottom: calc(32 * var(--sp));
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 500;
  line-height: calc(35 * var(--sp));
}

.related-jobs__title::after {
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
  content: "";
}

.related-jobs .job-list {
  gap: calc(24 * var(--sp));
}

@media (min-width: 1024px) {
  .page-main--detail {
    padding-bottom: 0;
  }

  .job-detail-video__player {
    width: 61.3125rem;
    aspect-ratio: 981 / 551;
  }

  .job-detail {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .job-detail__main {
    flex-shrink: 0;
    width: 46.0625rem;
    gap: 2.285rem;
  }

  .job-detail__company {
    padding-left: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.0625rem;
  }

  .job-detail__title {
    margin-top: 0.786rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .job-detail__lead {
    margin-top: 0.786rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  /* 区切り線（太さ3px）の中心が行の26.76px下に来るように、線の半分だけ下の余白を詰める */
  .job-detail__conditions {
    width: 45.1875rem;
    gap: 0.522rem;
    margin-top: 1.4925rem;
    margin-bottom: -0.09375rem;
    padding-bottom: 1.57875rem;
    border-bottom-width: 0.1875rem;
  }

  .job-detail__condition {
    gap: 0;
  }

  .job-detail__condition-label {
    width: 6.25rem;
    gap: 0.625rem;
    font-size: 1.1875rem;
    line-height: 1.4375rem;
  }

  .job-detail__condition-label::before {
    width: 1.25rem;
    height: 1.3125rem;
  }

  .job-detail__condition-value {
    padding-top: 0.19375rem;
    font-size: 1rem;
    line-height: 1.1875rem;
  }

  .detail-section__title {
    --title-icon-width: 1.25rem;
    --title-icon-gap: 0.513rem;
    --title-line-gap: 0.817rem;
    --title-line-end: 1rem;
    min-height: 3.75rem;
    margin-bottom: 0.625rem;
    font-size: 1.1875rem;
    line-height: 1.4375rem;
  }

  .detail-section__title--place {
    --title-icon-width: 0.8125rem;
    --title-icon-gap: 0.732rem;
    --title-line-gap: 0.6875rem;
    --title-line-end: 1.1875rem;
  }

  .detail-section__title--work {
    --title-icon-width: 1.0625rem;
    --title-icon-gap: 0.6875rem;
    --title-line-gap: 0.6875rem;
    min-height: 3.4375rem;
  }

  .detail-section__title--pay {
    --title-icon-width: 1.4375rem;
    --title-icon-gap: 0.375rem;
    --title-line-gap: 0.875rem;
    --title-line-end: 0.9375rem;
  }

  .detail-section__title--apply {
    --title-icon-width: 1.0625rem;
    --title-icon-gap: 0.448rem;
    --title-line-gap: 0.625rem;
    --title-line-end: 1.25rem;
  }

  .detail-section__title--company {
    --title-icon-width: 1.375rem;
    --title-line-gap: 0.625rem;
    --title-line-end: 2.75rem;
  }

  .detail-section__title::before {
    height: 1.3125rem;
  }

  .detail-section__body {
    gap: 1.25rem;
    font-size: 1rem;
    line-height: 1.28125rem;
  }

  .detail-section__body--tight {
    gap: 0.3125rem;
  }

  .detail-section__body--hours {
    gap: 1.665rem;
  }

  .detail-section__body--place {
    gap: 1.47375rem;
  }

  .detail-section__body--pay {
    line-height: 1.1875rem;
  }

  .detail-section__body--apply {
    gap: 1.855rem;
  }

  .detail-section__label {
    line-height: 1.5rem;
  }

  .detail-section__catch {
    line-height: 1.1875rem;
  }

  .detail-section__group {
    gap: 0.3125rem;
  }

  .detail-section__group--loose {
    gap: 0.625rem;
  }

  .detail-section__group--catch {
    gap: 1.378rem;
  }

  .detail-section__subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .detail-section__tags {
    max-width: 31.375rem;
    gap: 0.25rem;
  }

  .detail-section__tag {
    padding: 0.25rem 0.5625rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .company-info {
    gap: 1.375rem;
    padding-bottom: 0.625rem;
    line-height: 1.1875rem;
  }

  .company-info__row {
    gap: 1.25rem;
  }

  .company-info__term {
    width: 6.25rem;
  }

  .company-info__badge {
    width: 2.5rem;
    margin-top: 0.75rem;
  }

  .company-info__badge-note {
    bottom: calc(100% + 0.625rem);
    width: 17rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    transform: translateY(0.25rem);
  }

  .company-info__badge-note::after {
    left: calc(1.25rem - 0.375rem);
    border-width: 0.375rem 0.375rem 0;
  }

  .job-summary {
    flex-shrink: 0;
    width: 13.4375rem;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.625rem;
  }

  .job-summary__company {
    min-height: 2.1875rem;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1.875rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .job-summary__company::before {
    width: 0.5rem;
    height: 0.875rem;
  }

  .job-summary__title {
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .job-summary__condition {
    padding-bottom: 0.5rem;
  }

  .job-summary__condition + .job-summary__condition {
    margin-top: 0.75rem;
  }

  .job-summary__label {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .job-summary__value {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .job-summary__button {
    min-height: 3rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .easy-apply {
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.25rem;
  }

  .easy-apply__head {
    min-height: 4.0625rem;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .easy-apply__badge {
    width: 2.125rem;
    height: 2.75rem;
    border-radius: 1.0625rem;
    font-size: 1.125rem;
    line-height: 1.375rem;
  }

  .easy-apply__badge-unit {
    font-size: 0.625rem;
    line-height: 0.75rem;
  }

  .easy-apply__text {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .easy-apply__number {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }

  .easy-apply__steps {
    gap: 0.375rem;
  }

  .easy-apply__step {
    gap: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1rem;
  }

  .easy-apply__step::before {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.75rem;
  }

  .job-summary__updated {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .apply-bar {
    margin-top: 6.25rem;
    padding: 1rem 0;
  }

  .apply-bar__button {
    max-width: 42.4375rem;
    min-height: 3.75rem;
    gap: 1rem;
    border-radius: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .apply-bar__button::after {
    width: 0.5rem;
    height: 1rem;
  }

  .related-jobs {
    padding: 2.5rem 0;
  }

  .related-jobs__inner {
    max-width: var(--content-width);
    padding: 0;
  }

  .related-jobs__title {
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .related-jobs .job-list {
    gap: 2.1875rem;
  }
}

/* ==================== Page Heading（青い見出し帯） ==================== */
.page-heading {
  padding: calc(23 * var(--sp));
  background-color: var(--color-primary);
  color: var(--color-white);
}

.page-heading__inner {
  max-width: calc(515 * var(--sp));
  margin-inline: auto;
}

.page-heading__title {
  display: flex;
  align-items: center;
  gap: calc(11.5 * var(--sp));
  font-size: calc(36 * var(--sp));
  font-weight: 700;
  line-height: calc(50 * var(--sp));
}

.page-heading__title::before {
  flex-shrink: 0;
  width: calc(32 * var(--sp));
  height: calc(35 * var(--sp));
  background: url("img/icon-page-title.svg") center / contain no-repeat;
  content: "";
}

.page-heading__text {
  margin-top: calc(11.5 * var(--sp));
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

@media (min-width: 1024px) {
  .page-heading__br {
    display: none;
  }
}

/* 検索結果用（アイコンなし・件数表示） */
.page-heading--search {
  padding: calc(32 * var(--sp)) calc(20 * var(--sp));
}

.page-heading--search .page-heading__inner {
  max-width: calc(521 * var(--sp));
}

.page-heading--search .page-heading__title::before {
  display: none;
}

.page-heading--search .page-heading__text {
  margin-top: calc(8 * var(--sp));
  font-size: calc(22 * var(--sp));
  font-weight: 700;
  line-height: calc(31 * var(--sp));
}

@media (min-width: 1024px) {
  .page-heading {
    padding: 2.6875rem 0 2.0625rem;
  }

  .page-heading__inner {
    max-width: var(--content-width);
  }

  .page-heading__title {
    gap: 0.8125rem;
    font-size: 2.5rem;
    line-height: 3.625rem;
  }

  .page-heading__title::before {
    width: 2.0625rem;
    height: 2.25rem;
  }

  .page-heading__text {
    margin-top: 1.1875rem;
    font-size: 1rem;
    line-height: 1.4375rem;
  }

  .page-heading--search {
    padding: 2.5rem 0;
  }

  .page-heading--search .page-heading__inner {
    max-width: var(--content-width);
  }

  .page-heading--search .page-heading__title {
    font-size: 2.625rem;
    line-height: 3.6875rem;
  }

  .page-heading--search .page-heading__text {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5625rem;
  }
}

/* ==================== Simple Page（下層ページの本文エリア） ==================== */
.simple-page {
  padding: calc(20 * var(--sp)) 0 calc(40 * var(--sp));
}

.simple-page--white {
  background-color: var(--color-white);
}

.simple-page__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
  max-width: calc(561 * var(--sp));
  margin-inline: auto;
  padding: 0 calc(20 * var(--sp));
}

/* 利用規約・個人情報保護方針（パンくずの直下に本文） */
.simple-page--legal .simple-page__inner {
  gap: 0;
}

/* 応募・お問い合わせ（カード中央寄せ） */
.simple-page--card {
  padding-top: calc(32 * var(--sp));
}

@media (min-width: 1024px) {
  .simple-page {
    padding: 1.25rem 0 6.25rem;
  }

  .simple-page__inner {
    gap: 2.5rem;
    max-width: var(--content-width);
    padding: 0;
  }

  .simple-page--card {
    padding-top: 2.5rem;
  }

  .simple-page--complete-contact .simple-page__inner {
    gap: 3.625rem;
  }

  .simple-page--complete-contact {
    padding-bottom: 7.5rem;
  }
}

/* ==================== Form（応募・お問い合わせ共通） ==================== */
.form-layout {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
}

.apply-target {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
  padding: calc(24 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-sky);
}

.apply-target__heading {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp));
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  line-height: calc(32 * var(--sp));
}

.apply-target__heading::before {
  width: calc(17 * var(--sp));
  height: calc(19 * var(--sp));
  background: url("img/icon-doc.svg") center / contain no-repeat;
  content: "";
}

.apply-target__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(35 * var(--sp));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.apply-target__company {
  color: var(--color-muted);
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
  padding: calc(32 * var(--sp)) calc(24 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-text);
}

.form-card--contact {
  gap: calc(24 * var(--sp));
}

.form-card__head::after {
  display: block;
  height: calc(4 * var(--sp));
  margin-top: calc(24 * var(--sp));
  background-color: var(--color-form-line);
  content: "";
}

.form-card__title {
  font-size: calc(36 * var(--sp));
  font-weight: 500;
  line-height: calc(47 * var(--sp));
}

.form-card--contact .form-card__title {
  font-weight: 700;
}

.form-card__lead {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
  margin-top: calc(24 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

.form-card__lead--bold {
  font-weight: 700;
}

.form-card__fields {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
  margin: 0;
  padding: 0;
  border: 0;
}

.form-card--contact .form-card__fields {
  gap: calc(24 * var(--sp));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--sp));
  margin: 0;
  padding: 0;
  border: 0;
}

.form-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--sp));
  padding: 0;
}

.form-field--inline .form-field__label-row {
  justify-content: flex-start;
}

.form-field__label {
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

.form-field--inline .form-field__label {
  font-size: calc(25 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.form-field__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(48 * var(--sp));
  height: calc(26 * var(--sp));
  border-radius: calc(2.9 * var(--sp));
  background-color: var(--color-sub);
  color: var(--color-white);
  font-size: calc(16 * var(--sp));
  line-height: 1;
}

.form-field__badge--optional {
  background-color: var(--color-muted);
}

.form-field__control {
  width: 100%;
  height: calc(70 * var(--sp));
  padding: 0 calc(17.46 * var(--sp));
  border: calc(0.73 * var(--sp)) solid var(--color-border);
  border-radius: calc(5.8 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: calc(22 * var(--sp));
}

.form-field__control::placeholder {
  color: var(--color-placeholder-input);
}

.form-field__control:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form-field__control--textarea {
  height: calc(186 * var(--sp));
  padding: calc(17.46 * var(--sp));
  resize: vertical;
}

.form-field__control--select {
  padding-right: calc(46 * var(--sp));
  background: var(--color-white) url("img/icon-select.svg") right calc(16 * var(--sp)) center / calc(14 * var(--sp)) auto no-repeat;
  appearance: none;
}

.form-field__readonly {
  padding: calc(12 * var(--sp)) calc(16 * var(--sp));
  border: 1px solid var(--color-readonly-border);
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-bg);
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

/* ラジオ・チェックボックス */
.form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--sp));
}

.form-choices--column {
  flex-direction: column;
  gap: calc(12 * var(--sp));
}

.form-choice {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
  cursor: pointer;
}

.form-choice__input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--color-check-border);
  border-radius: 50%;
  background-color: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.form-choice__input[type="checkbox"] {
  border-radius: 0.125rem;
}

.form-choice__input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: inset 0 0 0 0.1875rem var(--color-white);
}

.form-choice__input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 0.125rem var(--color-white);
}

.form-submit {
  display: flex;
  align-items: center;
  gap: calc(11.64 * var(--sp));
  min-height: calc(73 * var(--sp));
  padding: calc(17.46 * var(--sp)) calc(23.27 * var(--sp));
  border-radius: calc(5.8 * var(--sp));
  background-color: var(--color-sub);
  box-shadow: var(--shadow-submit-sp);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(38 * var(--sp));
}

.form-submit::before {
  flex-shrink: 0;
  width: calc(26 * var(--sp));
  height: calc(29 * var(--sp));
  background: url("img/icon-search-large.svg") center / contain no-repeat;
  opacity: 0.91;
  content: "";
}

.form-submit__label {
  flex: 1;
  padding-right: calc(37.64 * var(--sp));
  text-align: center;
}

.form-note {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(31 * var(--sp));
  text-align: center;
}

.form-note__link {
  color: var(--color-link);
}

@media (min-width: 1024px) {
  .form-layout {
    width: 48.75rem;
    margin-inline: auto;
    gap: 2.5rem;
  }

  .apply-target {
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    border-radius: 0.625rem;
  }

  .apply-target__heading {
    gap: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .apply-target__heading::before {
    width: 1.0625rem;
    height: 1.1875rem;
  }

  .apply-target__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    -webkit-line-clamp: 1;
  }

  .apply-target__company {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .form-card {
    gap: 1.25rem;
    padding: 4rem 4rem 3rem;
    border-radius: 0.625rem;
  }

  .form-card--contact {
    gap: 1.5rem;
  }

  .form-card__head::after {
    height: 0.25rem;
    margin-top: 1.5rem;
  }

  .form-card__title {
    font-size: 2rem;
    line-height: 2.625rem;
  }

  .form-card__lead {
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .form-card__fields {
    gap: 1.25rem;
  }

  .form-card--contact .form-card__fields {
    gap: 1.5rem;
  }

  .form-field {
    gap: 0.75rem;
  }

  .form-field__label-row,
  .form-field--inline .form-field__label-row {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .form-field__label,
  .form-field--inline .form-field__label {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .form-field__badge {
    width: 2.0625rem;
    height: 1.125rem;
    border-radius: 0.125rem;
    font-size: 0.75rem;
  }

  .form-field__control {
    height: 3.3125rem;
    padding: 0 1rem;
    border-width: 0.5px;
    border-radius: 0.625rem;
    font-size: 1rem;
  }

  .form-field__control--date {
    width: 15rem;
    height: 3.0625rem;
  }

  .form-field__control--select {
    height: 3.0625rem;
    padding-right: 2.875rem;
    background-position: right 1rem center;
    background-size: 0.875rem auto;
  }

  .form-field__control--textarea {
    height: 9.375rem;
    padding: 0.9375rem 1rem;
  }

  .form-field__readonly {
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .form-choices,
  .form-choices--column {
    flex-direction: row;
    gap: 0.5rem 1.5rem;
  }

  .form-choice {
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .form-submit {
    justify-content: center;
    gap: 0.875rem;
    min-height: 3.5rem;
    padding: 0 2.5rem;
    border-radius: 0.1875rem;
    box-shadow: none;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
  }

  .form-submit::before {
    width: 1.875rem;
    height: 2.0625rem;
  }

  .form-submit__label {
    flex: none;
    padding-right: 0;
  }

  .form-note {
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* ==================== Greeting（代表挨拶） ==================== */
.greeting {
  background-color: var(--color-greeting-bg);
}

.greeting__body {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
  color: var(--color-black);
}

.greeting__profile {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
  width: calc(360 * var(--sp));
  margin-inline: auto;
}

.greeting__photo {
  width: 100%;
  aspect-ratio: 360 / 234;
  object-fit: cover;
}

.greeting__role {
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

.greeting__name {
  font-size: calc(25 * var(--sp));
  line-height: calc(35 * var(--sp));
}

.greeting__message {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(35 * var(--sp));
}

.contact-form-section {
  padding: calc(40 * var(--sp)) calc(20 * var(--sp));
  background-color: var(--color-bg);
}

.contact-form-section .form-card {
  max-width: calc(521 * var(--sp));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .greeting__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }

  .greeting__profile {
    flex-shrink: 0;
    width: 19.5rem;
    margin: 0;
  }

  .greeting__photo {
    aspect-ratio: 312 / 234;
  }

  .greeting__role {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .greeting__name {
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-align: center;
  }

  .greeting__message {
    gap: 1.375rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }

  .contact-form-section {
    padding: 6.25rem 0;
  }

  .contact-form-section .form-card {
    max-width: 48.75rem;
  }
}

/* ==================== Action Button（青・オレンジのボタン） ==================== */
.action-button {
  display: flex;
  align-items: center;
  gap: calc(11.64 * var(--sp));
  min-height: calc(73 * var(--sp));
  padding: calc(17.46 * var(--sp)) calc(23.27 * var(--sp));
  border-radius: calc(5.8 * var(--sp));
  background-color: var(--color-primary);
  box-shadow: var(--shadow-action-sp);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(38 * var(--sp));
}

.action-button::before {
  flex-shrink: 0;
  width: calc(26 * var(--sp));
  height: calc(23 * var(--sp));
  background: url("img/icon-home.svg") center / contain no-repeat;
  content: "";
}

.action-button__label {
  flex: 1;
  padding-right: calc(37.64 * var(--sp));
  text-align: center;
}

.action-button--accent {
  background-color: var(--color-sub);
  box-shadow: var(--shadow-submit-sp);
}

.action-button--accent::before {
  height: calc(29 * var(--sp));
  background-image: url("img/icon-search-large.svg");
  opacity: 0.91;
}

@media (min-width: 1024px) {
  .action-button {
    justify-content: center;
    gap: 1.0625rem;
    min-height: 3.4375rem;
    padding: 0 2.5rem;
    border-radius: 0.1875rem;
    box-shadow: none;
    font-size: 1.25rem;
    line-height: 1;
  }

  .action-button::before {
    width: 1.4375rem;
    height: 1.3125rem;
  }

  .action-button__label {
    flex: none;
    padding-right: 0;
  }

  .action-button--accent {
    gap: 0.875rem;
    box-shadow: none;
    font-weight: 500;
  }

  .action-button--accent::before {
    width: 1.875rem;
    height: 2.0625rem;
  }

  .action-button--large {
    min-height: 4rem;
    font-size: 1.5rem;
  }
}

/* ==================== Complete（応募完了・お問い合わせ完了） ==================== */
.complete-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--sp));
  padding: calc(48 * var(--sp)) calc(24 * var(--sp)) calc(40 * var(--sp));
  border-radius: calc(12 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-text);
  text-align: center;
}

.complete-card::before {
  width: calc(57 * var(--sp));
  height: calc(47 * var(--sp));
  background: url("img/icon-plane.svg") center / contain no-repeat;
  content: "";
}

.complete-card__title {
  font-size: calc(36 * var(--sp));
  font-weight: 700;
  line-height: calc(51 * var(--sp));
}

.complete-card__message {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(34 * var(--sp));
}

.next-flow {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
  width: 100%;
  padding: calc(24 * var(--sp));
  border-radius: calc(8 * var(--sp));
  background-color: var(--color-bg);
  text-align: left;
}

.next-flow__title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--sp));
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  font-weight: 500;
  line-height: calc(34 * var(--sp));
}

.next-flow__title::before {
  width: calc(19 * var(--sp));
  height: calc(22 * var(--sp));
  background: url("img/icon-flow.svg") center / contain no-repeat;
  content: "";
}

.next-flow__list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--sp));
  padding-left: 1.4em;
  font-size: calc(16 * var(--sp));
  line-height: calc(24 * var(--sp));
  list-style: decimal;
}

.complete-card__actions {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
  width: 100%;
}

@media (min-width: 1024px) {
  .complete-card {
    width: 48.75rem;
    margin-inline: auto;
    gap: 2rem;
    padding: 5.5rem 3.75rem 4rem;
    border-radius: 0.75rem;
  }

  .complete-card::before {
    width: 3.5625rem;
    height: 2.9375rem;
  }

  .complete-card__title {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }

  .complete-card__title br {
    display: none;
  }

  .complete-card__message {
    gap: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .next-flow {
    gap: 1.25rem;
    padding: 1.5rem 2.25rem;
    border-radius: 0.5rem;
  }

  .next-flow__title {
    gap: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .next-flow__title::before {
    width: 1.1875rem;
    height: 1.375rem;
  }

  .next-flow__list {
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .complete-card__actions {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }

  .complete-card__actions .action-button {
    width: 19.875rem;
  }
}

/* ==================== FAQ ==================== */
.faq__heading {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--sp));
}

.faq__title {
  padding-bottom: calc(16 * var(--sp));
  border-bottom: 1px solid var(--color-badge-border);
  color: var(--color-primary);
  font-size: calc(36 * var(--sp));
  font-weight: 700;
  line-height: calc(48 * var(--sp));
}

.faq__intro {
  color: var(--color-muted);
  font-size: calc(22 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.faq-nav {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
}

.faq-nav__link {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--sp));
  padding: calc(14 * var(--sp)) calc(24 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-primary);
  box-shadow: var(--shadow-nav-button);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  line-height: calc(35 * var(--sp));
}

.faq-nav__link::before {
  flex-shrink: 0;
  width: calc(22 * var(--sp));
  height: calc(22 * var(--sp));
  background: url("img/icon-faq-person.svg") center / contain no-repeat;
  content: "";
}

.faq-nav__link--company::before {
  background-image: url("img/icon-faq-company.svg");
}

.faq-nav__link::after {
  flex-shrink: 0;
  width: calc(9 * var(--sp));
  height: calc(17 * var(--sp));
  margin-left: auto;
  background: url("img/icon-faq-arrow.svg") center / contain no-repeat;
  content: "";
}

.faq-section__title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--sp));
  padding-bottom: calc(20 * var(--sp));
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 500;
  line-height: calc(33 * var(--sp));
}

.faq-section__title::before {
  width: calc(23 * var(--sp));
  height: calc(23 * var(--sp));
  background: url("img/icon-faq-section.svg") center / contain no-repeat;
  content: "";
}

.faq-section__title--company::before {
  background-image: url("img/icon-faq-section-company.svg");
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
  margin-top: calc(32 * var(--sp));
}

.faq-item {
  overflow: hidden;
  border-radius: calc(4 * var(--sp));
}

.faq-item__question,
.faq-item__answer {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--sp));
  padding: calc(16 * var(--sp)) calc(20 * var(--sp));
  font-size: calc(22 * var(--sp));
  line-height: calc(32 * var(--sp));
}

.faq-item__question {
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-text);
  list-style: none;
  cursor: pointer;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  flex-shrink: 0;
  width: calc(18 * var(--sp));
  height: calc(9 * var(--sp));
  margin-left: auto;
  background: url("img/icon-faq-close.svg") center / contain no-repeat;
  content: "";
}

.faq-item[open] .faq-item__question {
  background-color: var(--color-faq-question);
  color: var(--color-primary);
}

.faq-item[open] .faq-item__question::after {
  background-image: url("img/icon-faq-open.svg");
}

.faq-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: calc(24 * var(--sp));
  height: calc(33 * var(--sp));
  /* 英字は下寄りに描かれるので、下に余白を足して見た目の中心をそろえる */
  padding: 0 calc(3 * var(--sp)) 0.15em;
  border-radius: calc(5 * var(--sp));
  background-color: var(--color-primary);
  color: var(--color-white);
}

.faq-item__badge--answer {
  background-color: var(--color-sub);
}

.faq-item__answer {
  background-color: var(--color-white);
  color: var(--color-muted);
}

/* 箇条書きを含む回答（段落と箇条書きを縦に並べる） */
.faq-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.faq-item__list {
  padding-left: 1.5em;
  list-style: disc;
}

.faq-item__list--ordered {
  list-style: decimal;
}

.information {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
  padding: calc(32 * var(--sp)) calc(24 * var(--sp));
  background-color: var(--color-bg);
}

.information__head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sp));
}

.information__title {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sp));
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: calc(36 * var(--sp));
  font-weight: 700;
  line-height: calc(50 * var(--sp));
}

.information__title::before {
  width: calc(39 * var(--sp));
  height: calc(33 * var(--sp));
  background: url("img/icon-info.svg") center / contain no-repeat;
  content: "";
}

.information__logo {
  width: calc(140 * var(--sp));
  margin-left: auto;
}

.information__text {
  color: var(--color-muted);
  font-size: calc(22 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.information__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--sp));
  min-height: calc(71 * var(--sp));
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-primary);
  box-shadow: var(--shadow-nav-button);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  line-height: calc(35 * var(--sp));
}

.information__button::after {
  width: calc(8 * var(--sp));
  height: calc(16 * var(--sp));
  background: url("img/icon-arrow-white.svg") center / contain no-repeat;
  content: "";
}

@media (min-width: 1024px) {
  .faq__heading {
    gap: 1rem;
  }

  .faq__title {
    padding-bottom: 1rem;
    font-size: 2.625rem;
    line-height: 3.5rem;
  }

  .faq__intro {
    font-size: 1rem;
    line-height: 1.625rem;
  }

  .faq-nav {
    flex-direction: row;
    gap: 1.5rem;
  }

  .faq-nav__link {
    width: 21rem;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .faq-nav__link::before {
    width: 1.375rem;
    height: 1.375rem;
  }

  .faq-nav__link::after {
    width: 0.5625rem;
    height: 1.0625rem;
  }

  .faq-section__title {
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .faq-section__title::before {
    width: 1.4375rem;
    height: 1.4375rem;
  }

  .faq-list {
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .faq-item {
    border-radius: 0.25rem;
  }

  .faq-item__question,
  .faq-item__answer {
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .faq-item__answer {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .faq-item__question::after {
    width: 1.125rem;
    height: 0.5625rem;
  }

  .faq-item__badge {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0 0.15em;
    border-radius: 0.3125rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .information {
    gap: 2.5rem;
    padding: 3rem 4rem 3.5rem;
  }

  .information__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }

  .information__title::before {
    width: 2.4375rem;
    height: 2.0625rem;
  }

  .information__logo {
    width: 8.75rem;
  }

  .information__text {
    font-size: 1rem;
    line-height: 1.625rem;
  }

  .information__button {
    gap: 1.5rem;
    min-height: 4rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .information__button::after {
    width: 0.5rem;
    height: 1rem;
  }
}

/* ==================== Legal（利用規約・個人情報保護方針） ==================== */
.legal {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp));
  padding-top: calc(32 * var(--sp));
  color: var(--color-muted);
}

.legal__lead {
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

.legal__chapter {
  padding: calc(16 * var(--sp));
  background-color: var(--color-sky);
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(33 * var(--sp));
}

.legal__article {
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(35 * var(--sp));
}

.legal__text {
  font-size: calc(22 * var(--sp));
  line-height: calc(37 * var(--sp));
}

/* 箇条書き（デザインにないため本文と同じ文字で、行頭に点を付ける） */
.legal__list {
  padding-left: 1.5em;
  font-size: calc(22 * var(--sp));
  line-height: calc(37 * var(--sp));
  list-style: disc;
}

.legal__link {
  color: var(--color-primary);
  text-decoration: underline;
}

/* 制定日・最終更新日は本文の最後に右寄せ */
.legal__text--date {
  text-align: right;
}

/* 本文を1段階細く（個人情報保護方針） */
.legal--light .legal__lead,
.legal--light .legal__text,
.legal--light .legal__list {
  font-weight: 400;
}

@media (min-width: 1024px) {
  .legal {
    gap: 1.5rem;
    padding-top: 3.5rem;
  }

  .legal__lead {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .legal__chapter {
    padding: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .legal__article {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .legal__text,
  .legal__list {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
}

/* ==================== 404 ==================== */
.not-found {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp));
  color: var(--color-text);
}

.not-found__code {
  margin-bottom: calc(83 * var(--sp));
  color: var(--color-primary);
  font-size: calc(110 * var(--sp));
  font-weight: 700;
  line-height: calc(160 * var(--sp));
}

.not-found__title {
  font-size: calc(36 * var(--sp));
  font-weight: 700;
  line-height: calc(52 * var(--sp));
}

.not-found__text {
  font-size: calc(25 * var(--sp));
  line-height: calc(36 * var(--sp));
}

.not-found .action-button {
  margin-top: calc(12 * var(--sp));
}

@media (min-width: 1024px) {
  .not-found {
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }

  .not-found__code {
    margin-bottom: 6rem;
    font-size: 6.875rem;
    line-height: 8.25rem;
  }

  .not-found__title {
    font-size: 2rem;
    line-height: 1.45;
  }

  .not-found__text {
    font-size: 1.1875rem;
    line-height: 1.45;
  }

  .not-found .action-button {
    width: 23.3125rem;
    margin-top: 0.5625rem;
  }
}

/* ==================== Search Result（検索結果） ==================== */
.job-results--search .job-results__number {
  font-weight: 500;
}

.job-results--search .job-results__layout {
  margin-top: calc(10 * var(--sp));
}

.tag-panel {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--sp));
  padding: calc(12 * var(--sp));
  border-radius: calc(10 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-tag-panel);
}

.tag-panel__title {
  position: relative;
  margin-bottom: calc(12 * var(--sp));
  padding: calc(12 * var(--sp)) 0;
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-sky);
  color: var(--color-primary);
  font-size: calc(22 * var(--sp));
  font-weight: 500;
  line-height: calc(31 * var(--sp));
  text-align: center;
}

.tag-panel__title::after {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: calc(14 * var(--sp));
  height: calc(12 * var(--sp));
  background-color: var(--color-sky);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
  content: "";
}

.tag-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--sp));
}

.tag-panel__tag {
  display: block;
  padding: calc(6 * var(--sp)) calc(10 * var(--sp));
  border: 1px solid var(--color-muted);
  border-radius: calc(4 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-muted);
  font-size: calc(18 * var(--sp));
  line-height: calc(27 * var(--sp));
}

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(23 * var(--sp));
  padding: calc(35 * var(--sp));
  border-radius: calc(11.6 * var(--sp));
  background-color: var(--color-white);
  box-shadow: var(--shadow-tag-panel);
  text-align: center;
}

.search-empty::before {
  width: calc(58 * var(--sp));
  height: calc(58 * var(--sp));
  background: url("img/icon-search-empty.svg") center / contain no-repeat;
  content: "";
}

.search-empty__title {
  color: var(--color-primary);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(38 * var(--sp));
}

.search-empty__text {
  margin-top: calc(6 * var(--sp));
  color: var(--color-empty-text);
  font-size: calc(22 * var(--sp));
  line-height: calc(33 * var(--sp));
}

.search-empty__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--sp));
  width: 100%;
  min-height: calc(73 * var(--sp));
  border-radius: calc(5.8 * var(--sp));
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: calc(25 * var(--sp));
  font-weight: 700;
  line-height: calc(35 * var(--sp));
}

.search-empty__button::after {
  width: calc(8 * var(--sp));
  height: calc(16 * var(--sp));
  background: url("img/icon-arrow-white.svg") center / contain no-repeat;
  content: "";
}

@media (min-width: 1024px) {
  .job-results--search .job-results__layout {
    margin-top: 0.625rem;
  }

  .job-results--search .job-results__list {
    width: 46.25rem;
  }

  .tag-panel {
    flex-shrink: 0;
    align-self: flex-start;
    width: 13.125rem;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
  }

  .tag-panel--stretch {
    align-self: stretch;
    width: 13.5rem;
  }

  .tag-panel__title {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .tag-panel__title::after {
    width: 0.875rem;
    height: 0.75rem;
  }

  .tag-panel__list {
    gap: 0.5rem;
  }

  .tag-panel__tag {
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .search-empty {
    flex-shrink: 0;
    width: 46rem;
    gap: 2rem;
    padding: 3.75rem 2.5rem 3.5rem;
    border-radius: 0.625rem;
  }

  .search-empty::before {
    width: 4.125rem;
    height: 4.125rem;
  }

  .search-empty__title {
    font-size: 1.375rem;
    line-height: 1.9375rem;
  }

  .search-empty__text {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.375rem;
  }

  .search-empty__button {
    width: auto;
    min-height: 3.5rem;
    gap: 1.25rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .search-empty__button::after {
    width: 0.5rem;
    height: 1rem;
  }
}

/* ==================== WordPress用の追加 ==================== */
/* ここから下は WordPress テーマだけにある部品（miyajob_code の style.css にはない） */

/* 認証バッジが複数あるときは横に並べる */
.company-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--sp));
}

/* フォームの入力エラー */
.form-errors {
  margin: 0 0 calc(24 * var(--sp));
  padding: calc(16 * var(--sp)) calc(20 * var(--sp));
  border: 1px solid var(--color-sub);
  border-radius: calc(8 * var(--sp));
  background-color: var(--color-white);
  color: var(--color-sub);
  font-size: calc(22 * var(--sp));
  line-height: 1.6;
  list-style: none;
}

/* ボット対策の隠し入力欄（人には見えない） */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .company-info__badges {
    gap: 0.75rem;
  }

  .form-errors {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
  }
}