:root {
  --color-white: #fff;
  --color-txt: #1e2855;
  --color-accent: #1e78eb;
  --color-accent02: #5e9cf8;
  --color-accent03: #2b7ade;
  --color-gray: #aaa;
  --color-gray02: #c8c8c8;
  --color-gray03: #f6f6f6;
  --color-consulting: #5e9cf8;
  --color-bg: #f4f3ef;
  --color-yellow: #e2f174;
  --color-navy: #47505f;
  --color-dark-navy: #1e2855;
  --color-beige: #f4f3ef;
  --color-red: #e15555;
}

/* =======================================================
service
======================================================= */
.l-service {
  /* Figma 269:3526：カード列下端(y950)から資料セクション画像上端(y1090)まで140pxに合わせる（見出し「お役立ち資料」はSP正本のみ存在のためPC/SP共通で残し、余白側で吸収） */
  padding: 7.5rem 0 3.4375rem;
}
@media screen and (max-width: 768px) {
  .l-service {
    padding: 3.75rem 0;
    background: var(--color-gray03);
  }
}

.p-service__column {
  display: grid;
  grid-template: "img-wrapper ttl" "img-wrapper overview" "img-wrapper btn";
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 23.75rem 1fr;
  gap: 0 6.875rem;
  padding: 4.5625rem 8.625rem;
  background: var(--color-gray03);
  border-radius: 1.875rem;
}
@media screen and (max-width: 768px) {
  .p-service__column {
    grid-template: "ttl" "img-wrapper" "btn" "overview";
    grid-template-rows: auto;
    grid-template-columns: auto;
    gap: 0;
    padding: 0;
  }
}
.p-service__column-img-wrapper {
  position: relative;
  grid-area: img-wrapper;
  align-self: start;
}
@media screen and (max-width: 768px) {
  .p-service__column-img-wrapper {
    width: 19.75rem;
    margin: 0 auto 1.25rem;
  }
}
.p-service__column-img-wrapper::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border: 0.0625rem solid var(--color-gray02);
  transform: translate(-50%, -50%);
}
.p-service__column-ttl {
  grid-area: ttl;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 768px) {
  .p-service__column-ttl {
    margin-bottom: 2.5rem;
  }
}
.p-service__column-ttl::before {
  left: 0;
}
.p-service__column-overview {
  grid-area: overview;
  /* Figma 269:3559：本文下端から「資料請求する」ボタン上端(Group 1728 y802)まで66pxに合わせる */
  margin-bottom: 4.125rem;
}
@media screen and (max-width: 768px) {
  .p-service__column-overview {
    margin-bottom: 0;
  }
}
.p-service__column-overview-txt {
  line-height: calc(26/14);
}
.p-service__column-btn {
  display: flex;
  grid-area: btn;
  gap: 0.8125rem;
  align-items: center;
  justify-content: center;
  width: 27.5rem;
  height: 3.75rem;
  padding-bottom: 0.125rem;
  font-size: 1.125rem;
  line-height: calc(28/18);
  color: var(--color-white);
  letter-spacing: 0.1em;
  background: var(--color-accent);
  border-radius: 3.125rem;
}
@media screen and (max-width: 768px) {
  .p-service__column-btn {
    gap: 0.625rem;
    width: 100%;
    height: 2.875rem;
    margin-bottom: 1.125rem;
    font-size: 0.875rem;
    line-height: calc(26/14);
  }
}
@media screen and (max-width: 768px) {
  .p-service__column-btn::before {
    content: "";
  }
}
.p-service__column-btn::after {
  width: 0.875rem;
  height: 1rem;
  content: "";
  background: url("../images/info/icon-dl.svg") top center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .p-service__column-btn::after {
    width: 0.75rem;
    height: 0.8125rem;
    margin-top: 0.125rem;
    background: url("../images/info/icon-dl-sp.svg") top center/contain no-repeat;
  }
}

/* =======================================================
document
======================================================= */
.l-document {
  padding-bottom: 9.625rem; /* Figma 269:3526：説明文下端1569→CTA上端1723。 */
}
@media screen and (max-width: 768px) {
  .l-document {
    padding: 3.75rem 0;
  }
}

.p-document__ttl {
  margin-bottom: 2.5rem;
}
.p-document__box-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-document__box-wrapper {
    grid-template-columns: auto;
  }
}
.p-document__box-img-wrapper {
  position: relative;
  margin-bottom: 1.5625rem;
}
@media screen and (max-width: 768px) {
  .p-document__box-img-wrapper {
    width: 19.75rem;
    margin: 0 auto 1.25rem;
  }
}
.p-document__box-img-wrapper::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border: 0.0625rem solid var(--color-gray02);
  transform: translate(-50%, -50%);
}
.p-document__box-btn {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.625rem;
  place-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5625rem 0 0.6875rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: calc(26/14);
  border: 0.0625rem solid;
  border-radius: 3.125rem;
}
.p-document__box-btn::before {
  content: "";
}
.p-document__box-btn::after {
  width: 0.75rem;
  height: 0.8125rem;
  content: "";
  background: url("../images/info/icon-dl-navy.svg") top center/contain no-repeat;
}
.p-document__box-txt {
  margin-bottom: 0.5rem;
  line-height: calc(26/14);
}
@media screen and (min-width: 769px) {
  .p-document__box-btn {
    /* Figma 269:3533：外寸46pxに上下の罫線を含める。 */
    padding: 0.5rem 0 0.625rem;
  }
  .p-document__box-txt {
    margin-bottom: 0;
  }
}
.p-document__box-def {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 2.125rem;
  color: var(--color-gray);
}
@media screen and (max-width: 768px) {
  .p-document__box-def {
    margin-bottom: 0;
  }
}
.p-document__box-dttl {
  font-size: 0.75rem;
  line-height: calc(20/12);
  letter-spacing: 0.1em;
}
.p-document__box-ditem {
  padding-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: calc(16/13);
}

/* =======================================================
column
======================================================= */
.l-column {
  padding-bottom: 9.375rem;
}
@media screen and (max-width: 768px) {
  .l-column {
    padding-bottom: 5rem;
  }
}
.l-column .p-archive__article-wrapper {
  padding-bottom: 3.75rem;
}
@media screen and (max-width: 768px) {
  .l-column .p-archive__article-wrapper {
    padding-bottom: 2.5rem;
  }
}
.l-column .p-archive__btn {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.9375rem 0 1.0625rem;
  font-size: 1.125rem;
  line-height: calc(28/18);
  color: var(--color-white);
  letter-spacing: 0.1em;
  background: var(--color-navy);
  border-radius: 3.125rem;
}
@media screen and (max-width: 768px) {
  .l-column .p-archive__btn {
    gap: 0.5625rem;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    line-height: calc(26/14);
    letter-spacing: 0.05em;
  }
}
.l-column .p-archive__btn::after {
  width: 0.8125rem;
  height: 1rem;
  content: "";
  background: url("../images/info/btn-more-arrow.svg") top center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .l-column .p-archive__btn::after {
    width: 0.75rem;
    height: 0.875rem;
    background: url("../images/info/btn-more-arrow-sp.svg") top center/contain no-repeat;
  }
}

.p-column__ttl {
  margin-bottom: 3.3125rem;
}
/* 10/14谷：サービス資料の下に導入企業のロゴ（控えめに・4列×2段） */
.p-service__column-logos { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(27, 47, 110, .12); }
.p-service__column-logos-ttl { margin: 0 0 .75rem; font-size: .75rem; letter-spacing: .08em; color: #6b7280; }
.p-service__column-logos-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; }
.p-service__column-logos-list li { display: flex; align-items: center; justify-content: center; aspect-ratio: 190 / 80; }
.p-service__column-logos-list img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media screen and (max-width: 768px) {
  .p-service__column-logos-list { grid-template-columns: repeat(4, 1fr); gap: .25rem .5rem; }
}