@charset "utf-8";
/* CSS Document */
.frame_2c_right .frame_wrap {
  width: 100% !important;
  margin: 30px 0px;
  padding: 10px 0px;
}
p.point {
  color: #2557a0;
  font-size: 18px;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
p.point::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 4px;
  background: #2557a0;
  bottom: -10px;
  left: 0;
}
@media (max-width: 768px) {
  p.point {
    font-size: 16px;
  }
}
.listpattern01 {
  margin: 0;
  padding: 0;
  list-style: none;
}
.listpattern01 li {
  padding-left: 20px;
  width: 100%;
  box-sizing: border-box;
  background: url("/hojin/it/img4/arrow_b_r.png") no-repeat left top 4px /12px 16px;
  margin-bottom: 10px;
}
.redpatern {
  padding: 30px 0px 0px;
}
.redpatern li {
  color: #008F79;
  background: url("/hojin/it/img4/arrow_r_r.png") no-repeat left top 4px /12px 16px;
}
.listpattern02 {
  margin: 10px 0px;
  padding: 0;
  list-style: none;
}
.listpattern02 li {
  padding-left: 20px;
  font-weight: normal;
  color: #666;
  width: 100%;
  box-sizing: border-box;
  background: url("/hojin/it/img4/arrow_g_r.png") no-repeat left top 4px/12px 16px;
  margin-bottom: 10px;
}
.listpattern03 {
  padding: 0;
  list-style-type: space-counter;
  list-style-position: inside;
  margin: 0;
  font-weight: normal;
  color: #666;
}
.listpattern03 li {
  position: relative;
  padding-left: 15px;
}
ol.listpattern03 li::before {
  content: "※";
  position: absolute;
  left: 0;
}
.listpattern03 li li {
  list-style: circle;
  list-style-position: inside;
  padding-left: 10px;
}
.listpattern04 {
  padding: 0;
  list-style-type: disc;
  list-style-position: inside;
  margin: 0;
  font-weight: normal;
}
.greyBG .listpattern04 {
  padding: 20px;
  font-weight: bold;
}
.linkbox {
  margin: 10px 0px;
}
.linkbox a {
  padding: 10px 30px;
  background: url("/hojin/it/img4/arrow_r.png") no-repeat left 10px center /12px 16px #2557a0;
  border: 1px solid #2557a0;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  position: relative;
  min-width: 300px;
}
.linkbox a:hover {
  background: url("/hojin/it/img4/arrow_b_r.png") no-repeat left 10px center /12px 16px #fff;
  color: #2557a0;
}
.linkbox a[target="_blank"]:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: url("/hojin/it/img4/target_w.png") no-repeat center center /16px 16px;
  right: 10px;
  top: 50%;
  margin-top: -8px;
}
.linkbox a:hover[target="_blank"]:after {
  background: url("/hojin/it/img4/target_b.png") no-repeat center center /16px 16px;
}
.linkbox a[href$=".pdf"]::after, .linkbox a[href$=".pdf"]:hover::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 20px;
  background: url(/hojin/it/img4/pdf.png) no-repeat right top/16px 20px;
  right: 10px;
}
.table_wrap {
  overflow-x: scroll;
  margin: 50px 0px;
  padding: 0;
}
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
  min-height: 200px;
}
.table td {
  border: 1px solid #ccc;
  padding: 15px 5px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  min-width: 100px;
}
.table td span, .table th span {
  font-size: 0.7em;
  vertical-align: top;
}
.table td span.sup {
  display: block;
}
.table td img {
  max-width: 100px;
}
.table th, .table td.colortd {
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 15px 5px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.table td p.normal {
  white-space: normal;
  font-size: 80%;
  color: #666;
}
@media (max-width: 768px) {
  .table th {
    position: sticky;
    min-width: 100px;
    left: 0;
  }
  .table {
    table-layout: auto;
    white-space: nowrap;
  }
  .linkbox a {
    width: 100%;
  }
}
/*ここからフェーズ3で追加しています。これより上は触ってないので、必要に応じ修正あれば下のCSSでハックします。*/
.ttlsection p {
  text-shadow: 0px 0px 4px #fff;
}
.onetime_card {
  background: url("/hojin/it/img4/onetime_card_head_2601.png") no-repeat right 30px center/285px 143px #f8f8f8;
}
.pay-easy_logo {
  background: url("/hojin/it/img4/pasy_logo2.png") no-repeat right 30px center/auto 70% #f8f8f8;
}
.taikenban {
  background: url("/hojin/it/img4/pc_2601.png") no-repeat right 30px center/auto 70% #f8f8f8;
}
.zedi_head {
  background: url("/hojin/it/img4/zedi_head.png") no-repeat right 30px center/auto 100px #f8f8f8;
}
@media (max-width: 768px) {
  .onetime_card {
    background: url("/hojin/it/img4/onetime_card_head_2601.png") no-repeat center top 20px/auto 100px #f8f8f8;
    padding-top: 120px;
    text-align: center !important;
  }
  .pay-easy_logo {
    background: url("/hojin/it/img4/pasy_logo2.png") no-repeat center top 20px/auto 100px #f8f8f8;
    padding-top: 120px;
    text-align: center !important;
  }
  .taikenban {
    background: url("/hojin/it/img4/pc_2601.png") no-repeat center top 20px/auto 100px #f8f8f8;
    padding-top: 120px;
    text-align: center !important;
  }
      .zedi_head {
    background: url("/hojin/it/img4/zedi_head.png") no-repeat center top 20px/auto 100px #f8f8f8;
    padding-top: 120px;
    text-align: center !important;
  }
}
.add_space {
  margin: 30px 0px;
}
ul.change_50 {
  margin: 30px 0px !important;
  list-style: none !important;
  border: none !important;
}
ul.change_50 li {
  width: 50% !important;
  padding: 20px 5px !important;
  background: #f5f7fc !important;
  border-bottom: 1px solid #ccc !important;
}
ul.change_50 li.active {
  border-top: 5px solid #2557a0 !important;
  border-bottom: 1px solid #fff !important;
  background: #fff !important;
}
ul.aiueo {
  display: flex;
  margin: 30px 0px;
  justify-content: space-between;
  align-items: center;
}
ul.aiueo li {
  color: #ccc;
}
ul.aiueo li.aiueottl {
  color: #000;
  font-size: 80%;
}
.table td.tdhead {
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 15px 5px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.youtube_wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 30px 0px;
}
.youtube_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
p.normal {
  font-weight: normal;
}
ul.taikenban_Link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 0px;
}
ul.taikenban_Link li {
  width: 32%;
  font-size: 90%;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
@media (max-width: 768px) {
  ul.taikenban_Link li {
    width: 49%;
    font-size: 100%;
  }
}
ul.taikenban_Link li a {
  padding: 60px 20px 20px;
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
  vertical-align: middle;
  background: url("/hojin/it/img4/target_b.png") no-repeat right 10px top 10px/20px 20px #f5f7fc;
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #1a1a1a;
}
ul.taikenban_Link li a:hover {
  background: url("/hojin/it/img4/target_w.png") no-repeat right 10px top 10px/20px 20px #2557a0;
  color: #fff;
}
ul.taikenban_Link li a span::before {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 10px;
  margin-left: -25px;
  background-image: url("/hojin/it/img4/taiken_icon.png");
  background-size: 50px 600px;
}
ul.taikenban_Link li a:hover span::before {
  background-image: url("/hojin/it/img4/taiken_icon_w.png");
  background-size: 50px 600px;
}
ul.taikenban_Link li span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
}
ul.taikenban_Link li:nth-child(1) span::before {
  background-position: 0px 0px;
}
ul.taikenban_Link li:nth-child(2) span::before {
  background-position: 0px -50px;
}
ul.taikenban_Link li:nth-child(3) span::before {
  background-position: 0px -100px;
}
ul.taikenban_Link li:nth-child(4) span::before {
  background-position: 0px -150px;
}
ul.taikenban_Link li:nth-child(5) span::before {
  background-position: 0px -200px;
}
ul.taikenban_Link li:nth-child(6) span::before {
  background-position: 0px -250px;
}
ul.taikenban_Link li:nth-child(7) span::before {
  background-position: 0px -300px;
}
ul.taikenban_Link li:nth-child(8) span::before {
  background-position: 0px -350px;
}
ul.taikenban_Link li:nth-child(9) span::before {
  background-position: 0px -400px;
}
ul.taikenban_Link li:nth-child(10) span::before {
  background-position: 0px -450px;
}
ul.taikenban_Link li:nth-child(11) span::before {
  background-position: 0px -500px;
}
ul.taikenban_Link li:nth-child(12) span::before {
  background-position: 0px -550px;
}
.sec_ttl span.blue {
  background: #2557a0;
  color: #fff;
  padding: 0 10px;
  margin-right: 10px;
}