@charset "Shift_JIS";
/* Updated 2024/04/26.a */
/* Updated 2023/08/31.T */
/* Updated 2022/05/30.a */

#web21 {
  margin-top: 40px;
}

#web21_banner {
  width: 100%;
}

#web21_banner ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.web21_center {
  text-align: center;
}

.web21_txt {
  text-align: center;
}

.web21_txt p {
  padding-left: 150px;
  text-align: left;
}

.glyph-atmWarning01>.inner::before {
  background: url(/kojin/imgs/contact_list_ico_04.svg) 0 0/100% auto no-repeat;
}

.glyph-lock01>.inner::before {
  background: url(/kojin/imgs/contact_list_ico_03.svg) 0 0/100% auto no-repeat;
}

.glyph-cardCross01>.inner::before {
  background: url(/kojin/imgs/contact_list_ico_01.svg) 0 0/100% auto no-repeat;
}

.glyph-debitMemo01>.inner::before {
  background: url(/kojin/imgs/contact_list_ico_05.svg) 0 0/100% auto no-repeat;
}

.glyph-olive01>.inner::before {
  background: url(/kojin/cmn/imgs/contact_list_ico_01.svg) 0 0/100% auto no-repeat;
}

.glyph-safetypass01>.inner::before {
  background: url(/kojin/cmn/imgs/contact_list_ico_02.png) 0 0/100% auto no-repeat;
}

.glyph-vpoint01>.inner::before {
  background: url(/kojin/cmn/imgs/contact_list_ico_03.png) 0 0/100% auto no-repeat;
}

.card-tile01:not([href$=pdf]):not([class*=fn-blank])::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(50% - (1.375em / 2));
  right: 4px;
  width: 1.375em;
  height: 1.375em;
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) 0 0/cover no-repeat;
}

[class*=card-normal]>.inner[class*=glyph-]>.header::before {
  top: calc(50% - 17px);
  right: 21px;
  left: auto;
  width: 35px;
  height: 35px;
}

[class*=card-normal]>.inner[class*=glyph-]>.header:hover {
  background: #f5f5f5;
}

[class*=card-normal]>.inner[class*=glyph-]>.header>.title {
  padding-right: 35px;
}

@media screen and (max-width: 767px) {
  #web21_banner ul {
    display: block;
  }

  #web21_banner ul li {
    width: 100%;
    text-align: center;
  }

  .web21_txt p {
    padding-left: 0;
  }

  .title-background01>.inner>.body::before {
    display: none;
  }

  [class*=card-normal]>.inner[class*=glyph-]>.header::before {
    right: 12px;
  }
}