@charset "UTF-8";

/* ==========================================================================
   給与・賞与振込サービス
   ========================================================================== */

/* ==========================================================================
   Section 1: まとめて・おトク・かんたんに振込
   ========================================================================== */

/* メリットカード バッジ */
.p-payroll-card__badge {
  display: table;
  padding: .3rem 1.2rem;
  background: #1d3050;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: .4rem;
  margin-bottom: 1.2rem;
}

/* メリットカード キャッチ */
.p-payroll-card__catch {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #afa278;
}

/* メリットカード 注釈 */
.p-payroll-card__note {
  margin-top: .8rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #808080;
}

/* メリットカード リンク */
.p-payroll-card__link {
  margin-top: 1.6rem;
  text-align: right;
}

/* ==========================================================================
   特長2: EASYボックス
   ========================================================================== */
.p-payroll-easy {
  border: 1px solid #c8b882;
  border-radius: .4rem;
  padding: 2.4rem 3.2rem;
  background: #fff;
}

.p-payroll-easy__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.p-payroll-easy__tag {
  display: inline-block;
  padding: .3rem 1rem;
  background: #1d3050;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: .2rem;
  flex-shrink: 0;
}

/* 特長2 アイコン3列 */
.p-payroll-icons {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 72rem;
  margin: 0 auto;
}

.p-payroll-icons__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3.2rem;
  text-align: center;
}

.p-payroll-icons__item + .p-payroll-icons__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: .1rem;
  height: 100%;
  background-image: linear-gradient(to bottom, #aaa 3px, transparent 3px);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}

.p-payroll-icons__img {
  margin: 0;
}

.p-payroll-icons__img img {
  height: auto;
}

.p-payroll-icons__label {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #333;
}

/* 特長1 比較画像横並び */
.p-payroll-fig-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
}

.p-payroll-fig-row figure {
  margin: 0;
}

.p-payroll-fig-row figure img {
  height: auto;
  max-width: 100%;
}

/* 特長ブロック: step背景画像を無効化 */
#point-01.p-step-wrap,
#point-02.p-step-wrap,
#point-03.p-step-wrap {
  background-image: none;
}

/* サービス概要テーブル */
.table-B.no-border th {
  width: 28rem;
  text-align: center;
}

.table-B.no-border td {
  text-align: left;
}

/* 関連サービス・リンク ボタン並び */
.p-payroll-related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.p-payroll-related li {
  display: block;
  flex-shrink: 0;
}

/* 特長3 見出しサブタイトル */
.p-payroll-subtitle {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #9a8050;
  line-height: 1;
}