@charset "UTF-8";

/* ==========================================================================
   副業・フリーランス人材白書 アーカイブページ
   ========================================================================== */

:root {
  --archive-max-width: 1088px;
  --archive-side-padding-pc: 60px;
  --archive-side-padding-sp: 20px;
  --archive-color-primary: #005096;
  --archive-color-primary-dark: #07507B;
  --archive-color-text: #222;
  --archive-color-bg-kv: #c2e9f7;
  --archive-color-bg-kv-light: #e6f6fd;
  --archive-color-border: #d3e3ed;
  --archive-color-individual: #2A9DC9;
  --archive-color-company: #7A8992;
  --archive-header-height-pc: 80px;
  --archive-header-height-sp: 70px;
}

html {
  font-size: 16px;
}

body {
  color: var(--archive-color-text);
  background: #fff;
  font-family: "Noto Sans JP", noto-sans-cjk-jp, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* アーカイブ一覧：ヘッダーの「資料ダウンロード無料」は非表示（年度ページは共通ヘッダーのまま） */
body.hr-report-archive-index .l-header__nav__inner li:has(.l-header__download-btn) {
  display: none;
}

body.hr-report-archive-index .l-header__whitepaper-list-link {
  display: none;
}

body.hr-report-archive-index .whitepaper-cta__subtitle {
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

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

.archive-main {
  padding-top: var(--archive-header-height-pc);
}

@media (max-width: 767px) {
  .archive-main {
    padding-top: 0;
  }
}

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

.only-sp {
  display: none;
}

@media (max-width: 767px) {
  .only-pc {
    display: none;
  }

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

/* ==========================================================================
   KV (Key Visual) — Figma「提案02_サイト用」132:2671
   ========================================================================== */

.archive-kv {
  position: relative;
  width: 100%;
  min-height: 37.5rem; /* 600px */
  overflow: hidden;
  background-color: #c3eeff;
}

.archive-kv__inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: min(var(--archive-max-width), 100%); /* アーカイブ一覧・サービスと同じ 1088 カラム */
  min-height: 37.5rem;
  margin: 0 auto;
  padding: 3rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 4.5rem;
}

.archive-kv__text {
  flex: 0 1 33.0625rem; /* 529px */
  min-width: 0;
  max-width: 33.0625rem;
}

.archive-kv__title {
  margin: 0;
}

.archive-kv__title-img {
  display: block;
  width: 100%;
  max-width: 33.0625rem;
  height: auto;
}

.archive-kv__desc {
  margin: 3.75rem 0 0; /* 60px below title */
  font-size: 1rem; /* 16px（ルート 16px 時） */
  font-weight: 500;
  line-height: 1.5;
  color: var(--archive-color-primary-dark);
  text-align: justify;
  font-feature-settings: "pwid" 1;
}

.archive-kv__desc p {
  margin: 0;
}

.archive-kv__desc p + p {
  margin-top: 0;
}

.archive-kv__desc-quote {
  letter-spacing: -0.04em; /* Figma -0.64px / 16px */
}

.archive-kv__illust {
  flex: 0 0 auto;
  width: 100%;
  max-width: 34.03125rem; /* 544.5px */
  align-self: flex-start;
}

.archive-kv__illust-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  /* PC：KV 背景は Figma 出力のラジアルグラデーション（SP 以下は単色 #C3EEFF のまま） */
  .archive-kv {
    background-color: #93e1ff;
    background-image: url("/skilljunkan/hr_report/assets/img/archive/kv-bg-gradient.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  /*
   * 左端のみ下部コンテンツ（1088 カラム）と揃え、右は Figma 右 padding。
   * 幅は 1440 相当以下で可変、1440px 超では (90rem+1088px)/2 を上限にテキスト・イラスト列の幅を維持。
   */
  .archive-kv__inner {
    max-width: none;
    margin: 0;
    margin-left: max(0px, calc((100% - min(var(--archive-max-width), 100%)) / 2));
    margin-right: 0;
    width: min(
      calc((90rem + var(--archive-max-width)) / 2),
      min(90rem, calc((100% + min(var(--archive-max-width), 100%)) / 2))
    );
    padding: 3rem 4.6875rem 3rem 0;
  }

  /* テキスト開始 y=145px・イラスト y=48px（横位置は .archive-list-section__inner と同一カラム） */
  .archive-kv__text {
    margin-top: 6.0625rem; /* 97px */
  }
}

@media (max-width: 1023px) {
  .archive-kv {
    min-height: 0;
  }

  .archive-kv__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-width: min(var(--archive-max-width), 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 2.5rem var(--archive-side-padding-sp) 2.5rem;
    gap: 2rem;
  }

  .archive-kv__text {
    flex: 1 1 auto;
    max-width: 33.0625rem;
    margin-top: 0;
  }

  .archive-kv__desc {
    margin-top: 2rem;
  }

  .archive-kv__illust {
    max-width: 28rem;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .archive-kv__inner {
    flex-direction: column-reverse;
    /* .archive-list-section と同じ横インセット（19px） */
    padding: 2rem 1.1875rem;
  }

  .archive-kv__desc {
    text-align: left;
  }

  .archive-kv__illust {
    max-width: 22.5rem;
  }
}

/* ==========================================================================
   Archive list
   ========================================================================== */

.archive-list-section {
  padding: 6.25rem 0;
  background: #fff;
}

/* Figma 132:2632 Frame 492（1088×887）：内側2ブロックの縦 gap 60px */
.archive-list-section__inner {
  width: 100%;
  max-width: min(var(--archive-max-width), 100%);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 767px) {
  /* Figma 132:923 Introduction：コンテンツ幅337 = 375 − 左右19px */
  .archive-list-section {
    padding: 80px 1.1875rem; /* 上下 80px、横 19px */
  }

  .archive-list-section__inner {
    gap: 5rem; /* 80px：年度ブロック間 */
  }
}

.archive-card {
  margin: 0 auto;
  background: #fff;
}

/* Frame 490 / 491：見出し行（74px）とメイン行の間 117−74 = 43px */
.archive-card__unit {
  display: flex;
  flex-direction: column;
  gap: 2.6875rem; /* 43px */
}

/* Frame 430：マーク 69×69 + gap 10 + 見出しエリア（残り ≈1009px） */
.archive-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem; /* 10px */
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  min-height: 4.625rem; /* 74px */
}

/* Group 12（69×69） */
.archive-card__mark {
  position: relative;
  width: 4.3125rem; /* 69px */
  height: 4.3125rem;
  flex-shrink: 0;
}

.archive-card__mark-piece {
  position: absolute;
  display: block;
}

.archive-card__mark-piece--tl {
  left: 0;
  top: 0;
  width: 3.2931875rem; /* 52.691px */
  height: 3.2931875rem;
  background: #c3eeff;
}

.archive-card__mark-piece--sm-silver {
  left: 2.195625rem; /* 35.13px */
  top: 3.25375rem; /* 52.06px */
  width: 1.0585rem; /* 16.936px */
  height: 1.0585rem;
  background: #7a8992;
}

.archive-card__mark-piece--sm-primary {
  left: 2.195625rem;
  top: 2.195625rem; /* 35.13px */
  width: 1.0585rem;
  height: 1.0585rem;
  background: var(--archive-color-primary-dark);
}

.archive-card__mark-piece--bar-blue {
  left: 3.25375rem; /* 52.06px */
  top: 2.195625rem;
  width: 1.0585rem;
  height: 2.1170625rem; /* 33.873px */
  background: #0095d8;
}

/* Frame 429 */
.archive-card__header-inner {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 4.625rem; /* 74px */
  padding: 0 0.625rem;
  box-sizing: border-box;
}

.archive-card__title {
  margin: 0;
  font-size: 2rem; /* 32px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--archive-color-primary-dark);
  letter-spacing: 0.04em; /* 1.28px @32px */
  font-feature-settings: "pwid" 1;
}

/* Frame 489：528×296 + gap 30 + 右 529×296 */
.archive-card__main {
  display: flex;
  gap: 1.875rem; /* 30px */
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.archive-card__thumb {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--archive-color-border);
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.archive-card__thumb--2026 {
  width: 33rem; /* 528px */
  height: 18.5rem; /* 296px */
}

.archive-card__thumb--2025 {
  width: 33.125rem; /* 530px */
  height: 18.5625rem; /* 297px */
}

.archive-card__thumb:hover {
  opacity: 0.85;
}

.archive-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Frame 488：縦 15px gap（22 + 15 + 188 + 15 + 56 = 296） */
.archive-card__detail {
  flex: 0 0 33.0625rem; /* 529px */
  width: 33.0625rem;
  max-width: 100%;
  min-width: 0;
  min-height: 18.5rem; /* 296px */
  display: flex;
  flex-direction: column;
  gap: 0.9375rem; /* 15px */
  box-sizing: border-box;
}

.archive-card__detail--2025 {
  min-height: 18.4375rem; /* 295px */
}

.archive-card__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px：tag 46 + 10 + 日付 */
  flex-shrink: 0;
  min-height: 1.375rem; /* 22px */
  margin: 0;
}

.archive-card__meta--no-tag {
  min-height: 1.3125rem; /* 21px */
}

.archive-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.875rem; /* 46px */
  min-height: 1.375rem;
  padding: 0.15rem 0.25rem 0.21rem;
  box-sizing: border-box;
  border: 1px solid var(--archive-color-primary-dark);
  border-radius: 2px;
  background: #fff;
  color: var(--archive-color-primary-dark);
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em; /* 0.56px */
  font-feature-settings: "pwid" 1;
}

.archive-card__date {
  margin: 0;
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  line-height: 1.8;
  color: var(--archive-color-primary-dark);
  letter-spacing: 0.04em; /* 0.6px */
  font-feature-settings: "pwid" 1;
  flex: 1 1 auto;
  min-width: 0;
}

/* 132:2648 / 132:2667 本文ブロック（高さ188px想定） */
.archive-card__lead {
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 1.8;
  color: #222;
  text-align: justify;
  letter-spacing: -0.028125rem; /* -0.45px */
  font-feature-settings: "pwid" 1;
  flex: 1 1 auto;
  min-height: 0;
}

.archive-card__lead p {
  margin: 0;
}

/* Frame 486：248 + gap 77 + 204 = 529 — 右カラム下端に固定（.archive-card__lead が flex 成長） */
.archive-card__cta {
  display: flex;
  align-items: center;
  gap: 4.8125rem; /* 77px */
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-height: 3.5rem; /* 56px */
}

/* 528+529px の行がビューポートより広いときはサムネのみ縮小（1024px などで横スクロール防止） */
@media (max-width: 1100px) {
  .archive-card__thumb--2026,
  .archive-card__thumb--2025 {
    width: 26rem;
    height: 14.5rem;
  }

  .archive-card__detail,
  .archive-card__detail--2025 {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   Tablet（768–1024px）：1024 でも横インセットを揃える（KV と一覧の左端一致）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .archive-kv__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .archive-list-section__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
  }

  /* 固定幅2カラムだと ~975px 必要なため、タブレットは縦並び＋全幅で収める */
  .archive-card__main {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .archive-card__thumb--2026,
  .archive-card__thumb--2025 {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .archive-card__thumb--2026 {
    aspect-ratio: 528 / 296;
  }

  .archive-card__thumb--2025 {
    aspect-ratio: 530 / 297;
  }

  .archive-card__detail,
  .archive-card__detail--2025 {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    flex-basis: auto;
    min-width: 0;
  }

  .archive-contact__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
  }

  .archive-service__inner,
  .whitepaper-cta__inner,
  .whitepaper-service__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  /* Figma 132:923：til（69行）と本文スタック（gap60）／本文内は画像下15・リード下30・CTA内30 */
  .archive-card__unit {
    gap: 3.75rem; /* 60px */
  }

  .archive-card__header {
    align-items: center;
    gap: 1.25rem; /* 20px */
    min-height: 4.3125rem; /* 69px */
  }

  .archive-card__header-inner {
    display: flex;
    align-items: center;
    min-height: 4.3125rem;
    padding: 0;
  }

  .archive-card__title {
    font-size: 1.625rem; /* 26px */
    line-height: 1.5;
    letter-spacing: 0.04em; /* 1.04px @26px */
  }

  .archive-card__main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9375rem; /* 15px：画像〜メタ */
  }

  .archive-card__thumb--2026 {
    width: 100%;
    height: auto;
    aspect-ratio: 597 / 335;
  }

  .archive-card__thumb--2025 {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 449;
  }

  .archive-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .archive-card__detail,
  .archive-card__detail--2025 {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    gap: 0;
  }

  .archive-card__meta {
    margin-bottom: 0.9375rem; /* 15px：メタ〜リード */
  }

  .archive-card__lead {
    flex: 0 0 auto;
    margin-bottom: 1.875rem; /* 30px：リード〜CTA */
    font-size: 0.9375rem; /* 15px */
    text-align: left;
  }

  .archive-card__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 30px; /* 詳細ボタン〜プレス */
    min-height: 0;
  }
}

.archive-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 15.5rem; /* 248px */
  height: 3.5rem; /* 56px */
  padding: 1rem 2.75rem 1rem 1rem;
  box-sizing: border-box;
  background: var(--archive-color-primary-dark);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4375rem; /* 23px */
  letter-spacing: 0.02em;
  border-radius: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.archive-card__btn::after {
  content: "";
  position: absolute;
  right: 0.8125rem; /* 13px */
  top: 50%;
  transform: translateY(-50%);
  width: 1.875rem; /* 30px */
  height: 0.375rem; /* 6px */
  background: url("/skilljunkan/hr_report/assets/img/archive/btn-arrow.svg") no-repeat center / contain;
  pointer-events: none;
}

.archive-card__btn:hover {
  background: #00679a;
}

.archive-card__press {
  display: inline-flex;
  align-items: center;
  flex: 0 0 12.75rem; /* 204px */
  max-width: 12.75rem;
  box-sizing: border-box;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.8;
  color: #222;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
  letter-spacing: 0.04em; /* 0.56px */
  font-feature-settings: "pwid" 1;
}

.archive-card__press:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .archive-card__btn {
    width: 100%;
    max-width: none;
    height: 4.375rem; /* 70px */
    margin: 0;
    padding: 1rem 2.75rem 1rem 1rem;
  }

  .archive-card__press {
    flex: 0;
    width: 100%;
    max-width: none;
    margin-left: auto;
    justify-content: flex-end;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.04em; /* 0.52px @13px */
  }
}

/* ==========================================================================
   Contact (お問い合わせ)
   ========================================================================== */

.archive-contact {
  padding: 6.25rem 0 5rem;
  background: #fff;
}

.archive-contact__inner {
  width: 100%;
  max-width: var(--archive-max-width);
  margin: 0 auto;
  padding: 0 var(--archive-side-padding-pc);
  text-align: center;
  box-sizing: border-box;
}

.archive-contact__title {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  color: var(--archive-color-text);
  margin: 0 0 3rem;
  letter-spacing: 0.1em;
}

.archive-contact__list {
  display: flex;
  justify-content: center;
  gap: 1.8125rem; /* 29px */
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive-contact__list > li {
  flex: 0 1 16rem; /* 256px */
}

.archive-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 4.375rem; /* 70px */
  background: #fff;
  border: 1px solid var(--archive-color-primary);
  color: var(--archive-color-primary);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.4;
  transition: background 0.3s ease, color 0.3s ease;
  padding: 0 2.5rem;
  box-sizing: border-box;
}

.archive-contact__btn::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 1.875rem;
  height: 1px;
  background: var(--archive-color-primary);
  transform: translateY(-50%);
  transition: background 0.3s ease;
}

.archive-contact__btn::before {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: calc(50% - 4px);
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1px solid var(--archive-color-primary);
  border-right: 1px solid var(--archive-color-primary);
  transform: rotate(45deg);
  transition: border-color 0.3s ease;
}

.archive-contact__btn:hover {
  background: var(--archive-color-primary);
  color: #fff;
}

.archive-contact__btn:hover::after {
  background: #fff;
}

.archive-contact__btn:hover::before {
  border-color: #fff;
}

@media (max-width: 767px) {
  .archive-contact {
    padding: 3rem 0 2.5rem;
  }

  .archive-contact__inner {
    padding: 0 var(--archive-side-padding-sp);
  }

  .archive-contact__title {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }

  .archive-contact__list {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .archive-contact__list > li {
    flex: 0 0 auto;
    width: 100%;
    max-width: 17.5rem;
  }

  .archive-contact__btn {
    height: 4rem;
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   HiPro intro service
   ========================================================================== */

.archive-service {
  padding: 4rem 0 5rem;
  background: #fff;
  text-align: center;
}

.archive-service__inner {
  width: 100%;
  max-width: var(--archive-max-width);
  margin: 0 auto;
  padding: 0 var(--archive-side-padding-pc);
  box-sizing: border-box;
}

.archive-service__icon {
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  margin: 0 auto 2.5rem;
}

.archive-service__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.archive-service__subtitle {
  font-size: 0.9375rem;
  color: var(--archive-color-text);
  margin: 0 0 1.25rem;
  letter-spacing: 0.06em;
}

.archive-service__title {
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  color: var(--archive-color-text);
  margin: 0 0 2.25rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.archive-service__desc {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--archive-color-text);
  margin: 0 0 2.5rem;
  letter-spacing: 0.04em;
}

.archive-service__links {
  display: flex;
  justify-content: center;
  gap: 2.125rem; /* 34px */
  margin-bottom: 5rem;
  flex-wrap: wrap;
}

.archive-service__link-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8125rem;
}

.archive-service__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem; /* 256px */
  height: 4.375rem; /* 70px */
  color: #fff;
  font-size: 1.1875rem; /* 19px */
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: opacity 0.3s ease;
}

.archive-service__link.is-individual {
  background: var(--archive-color-individual);
}

.archive-service__link.is-company {
  background: var(--archive-color-company);
}

.archive-service__link::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 1.875rem;
  height: 1px;
  background: #fff;
  transform: translateY(-50%);
}

.archive-service__link::before {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: calc(50% - 4px);
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

.archive-service__link:hover {
  opacity: 0.85;
}

.archive-service__link-desc {
  font-size: 0.8125rem;
  color: var(--archive-color-text);
  letter-spacing: 0.04em;
  margin: 0;
}

@media (max-width: 767px) {
  .archive-service {
    padding: 2.5rem 0 3rem;
  }

  .archive-service__inner {
    padding: 0 var(--archive-side-padding-sp);
  }

  .archive-service__title {
    font-size: 1.25rem;
  }

  .archive-service__desc {
    font-size: 0.875rem;
    line-height: 1.85;
    text-align: left;
  }

  .archive-service__links {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .archive-service__link {
    width: 100%;
    max-width: 17.5rem;
    height: 4rem;
    font-size: 1rem;
  }
}

/* skill circulation society banner */
.archive-service__label {
  display: block;
  width: 100%;
  max-width: 45rem; /* 720px */
  margin: 0 auto 1.25rem;
}

.archive-service__label a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10.0625rem; /* 161px */
  background: url("/skilljunkan/assets/img/common/label-bg1.jpg") no-repeat center bottom;
  background-size: cover;
  transition: opacity 0.3s ease;
}

.archive-service__label a:hover {
  opacity: 0.85;
}

.archive-service__label img {
  width: 28rem;
  height: auto;
}

@media (max-width: 767px) {
  .archive-service__label a {
    height: 7rem;
  }

  .archive-service__label img {
    width: 14.5rem;
  }
}

/* hipro site link */
.archive-service__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 45rem; /* 720px */
  margin: 0 auto;
  height: 12.1875rem; /* 195px */
  background: #fff;
  border: 1px solid var(--archive-color-company);
  gap: 2.5rem;
  transition: opacity 0.3s ease;
}

.archive-service__logo:hover {
  opacity: 0.85;
}

.archive-service__logo img {
  width: 13.4375rem; /* 215px */
  height: auto;
}

.archive-service__logo span {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--archive-color-primary);
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .archive-service__logo {
    height: 7.5rem;
    gap: 1.25rem;
  }

  .archive-service__logo img {
    width: 8rem;
  }

  .archive-service__logo span {
    font-size: 0.9375rem;
  }
}