@charset "UTF-8";
/* =========================================================================
   採用に関するコンプライアンス セクション（募集要項ページ 追加分）
   - 既存 style.css（レオパレスキャリア採用サイト）に追記でも可
   - 本番ページ /career_recruitment/information/index.html の
     アルムナイ採用ブロック（.p-information__alumni）の直後に挿入
   - 依存: 既存 .p-information__title / .p-information__container
   ========================================================================= */

/* ---------- 共通コンテナ ---------- */
.p-information__compliance,
.compliance-variant {
  scroll-margin-top: 8rem;
}

.compliance-variant {
  margin-top: 5.9rem; /* 44px + 15px */
}

/* 見出し（既存 .p-information__title を継承し、英字サブを添える） */
.compliance-variant .p-information__title.with-en {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.compliance-variant .p-information__title .en {
  font-family: "Public Sans", "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  color: #004098;
  font-weight: 500;
  opacity: 0.75;
  text-transform: uppercase;
}

/* リード文 */
.compliance-variant .compliance__lead {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.87;
  letter-spacing: 0.02em;
  color: #333;
  margin-top: 1.6rem;
  margin-bottom: 3.2rem;
}

@media screen and (max-width: 767px) {
  .compliance-variant {
    margin-top: 4.7rem; /* 32px + 15px */
  }
  .compliance-variant .compliance__lead {
    font-size: 1.3rem;
    margin-bottom: 2.4rem;
  }
}

/* ---------- 2列CTA（レイアウト①：応募方法と同型） ---------- */
.compliance-variant.layout-01 .compliance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.9rem;
  margin-top: 2rem;
}
.compliance-variant.layout-01 .compliance__card {
  height: 12.5rem;
  border-radius: 0.8rem;
  padding: 0 2.6rem 0 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.35;
  letter-spacing: 1px;
  transition: all 0.3s;
  color: #ffffff;
  background: #004098;
  gap: 2rem;
  text-decoration: none;
}
.compliance-variant.layout-01 .compliance__card:hover {
  background: #286cc9;
  opacity: 1;
}
.compliance-variant.layout-01 .compliance__card.is-secondary {
  color: #004098;
  background: rgba(186, 226, 255, 0.35);
}
.compliance-variant.layout-01 .compliance__card.is-secondary:hover {
  background: rgba(186, 226, 255, 0.6);
}
.compliance-variant.layout-01 .compliance__card .label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.compliance-variant.layout-01 .compliance__card .label .en {
  font-family: "Public Sans", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .compliance-variant.layout-01 .compliance__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .compliance-variant.layout-01 .compliance__card {
    height: 7.6rem;
    font-size: 1.4rem;
    padding: 0 1.6rem 0 2rem;
  }
}

/* ---------- 円形アイコン ---------- */
.compliance-variant .icon-ext,
.compliance-variant .icon-pdf {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #ffffff;
  border: 0.1rem solid #004098;
  position: relative;
  flex-shrink: 0;
}
/* 外部リンク矢印（既存 icon_arrow_blue.svg を流用・水平右向き） */
.compliance-variant .icon-ext::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/icon_arrow_blue.svg) no-repeat center / 2.2rem 0.8rem;
}
/* PDFアイコン（書類＋PDFラベル / icon_pdf_blue.svg） */
.compliance-variant .icon-pdf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/icon_pdf_blue.svg) no-repeat center / 3rem 3rem;
}

@media screen and (max-width: 767px) {
  .compliance-variant .icon-ext,
  .compliance-variant .icon-pdf {
    width: 4rem;
    height: 4rem;
  }
  .compliance-variant .icon-ext::before {
    background-size: 1.6rem 0.6rem;
  }
  .compliance-variant .icon-pdf::before {
    background-size: 1.8rem 1.8rem;
  }
}