@charset "UTF-8";
/* =========================================================
   サービス一覧（p-service）
   SP：画像上・本文下の縦積み1列 / PC：画像左・本文右の2列グリッド
   カード背景：1・4枚目 #EBF3FF / 2・3枚目 #EBFBFF（SP/PC共通）
   ========================================================= */
.p-service {
  padding: 38px 0 60px;
}
@media only screen and (min-width: 992px) {
  .p-service {
    padding: 60px 0 80px;
  }
}

.p-service__inner {
  width: 100%;
  max-width: 1326px;
  margin: 0 auto;
  padding: 0 15px;
}

.p-service__list-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media only screen and (min-width: 992px) {
  .p-service__list-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* カード（背景：SP/PC共通）
   1・4枚目 #EBF3FF / 2・3枚目 #EBFBFF（5枚目以降も同じ繰り返し） */
.p-service__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  .p-service__card {
    flex-direction: row;
  }
}
.p-service__card:nth-child(4n+1), .p-service__card:nth-child(4n) {
  background-color: #EBF3FF;
}
.p-service__card:nth-child(4n+2), .p-service__card:nth-child(4n+3) {
  background-color: #EBFBFF;
}

/* 画像（SP：横長バナー / PC：左の縦長カラム） */
.p-service__img {
  flex-shrink: 0;
}
@media only screen and (min-width: 992px) {
  .p-service__img {
    width: 146px;
  }
}
.p-service__img picture,
.p-service__img img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-service__img img {
  height: 100px;
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (min-width: 992px) {
  .p-service__img img {
    height: 100%;
  }
}

/* 本文エリア */
.p-service__body {
  flex: 1;
  min-width: 0;
  padding: 20px;
}
@media only screen and (min-width: 992px) {
  .p-service__body {
    padding: 30px 20px 30px 30px;
  }
}

.p-service__ttl {
  color: #0E63C4;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 992px) {
  .p-service__ttl {
    font-size: 30px;
  }
}

/* 在留資格などの補足（下に区切り線） */
.p-service__sub {
  margin-top: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid #A8BED1;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
@media only screen and (min-width: 992px) {
  .p-service__sub {
    margin-top: 8px;
    padding-bottom: 16px;
    font-size: 16px;
  }
}

.p-service__text {
  margin-top: 20px;
  color: #333;
}

/* 箇条書き（青い●） */
.p-service__points {
  margin-top: 12px;
}
@media only screen and (min-width: 992px) {
  .p-service__points {
    margin-top: 14px;
  }
}

.p-service__point {
  position: relative;
  padding-left: 18px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
@media only screen and (min-width: 992px) {
  .p-service__point {
    font-size: 16px;
  }
}
.p-service__point + .p-service__point {
  margin-top: 4px;
}
.p-service__point::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #0E63C4;
}
@media screen and (min-width: 821px) {
  .p-service__point::before {
    top: 7px;
  }
}

/* 番号付きリスト（SP1列 / PC2列・左列01〜05→右列06〜10の列方向に流す） */
.p-service__steps {
  margin-top: 12px;
}
@media only screen and (min-width: 992px) {
  .p-service__steps {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 16px;
    column-gap: 16px;
    margin-top: 14px;
  }
}

.p-service__step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}
@media only screen and (min-width: 992px) {
  .p-service__step {
    font-size: 16px;
  }
}
.p-service__step + .p-service__step {
  margin-top: 4px;
}
@media only screen and (min-width: 992px) {
  .p-service__step + .p-service__step {
    margin-top: 6px;
  }
}

.p-service__step-num {
  flex-shrink: 0;
  color: #0E63C4;
  font-weight: 500;
}

/* 白い枠（対象職種の例 など） */
.p-service__box {
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
@media only screen and (min-width: 992px) {
  .p-service__box {
    border-radius: 20px;
  }
}

.p-service__box-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 821px) {
  .p-service__box-label {
    font-size: 14px;
  }
}

/* タグ（青い塗り） */
.p-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.p-service__tag {
  display: inline-block;
  padding: 2px 10px;
  background-color: #0E63C4;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (min-width: 821px) {
  .p-service__tag {
    padding: 2px 8px;
  }
}

/* 枠なし・縦積みのタグ（登録支援機関業務）：文字は12px */
.p-service__tags--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
}
.p-service__tags--stack .p-service__tag {
  font-size: 12px;
}
@media screen and (min-width: 821px) {
  .p-service__tags--stack .p-service__tag {
    font-size: 14px;
  }
}
/*# sourceMappingURL=service.css.map */