@charset "utf-8";
article h1 {
  border-bottom: 3px solid #aed5f2;
  font-size: 175%;
  font-weight: bold;
  line-height: 1.2;
  color: #3c3c3c;
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
}

article h1:after {
  content: "";
  display: block;
  width: 45px;
  height: 45px;
  background: url(/service/images/icon.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: -5px;
  right: 0;
}

article h2.tl {
  background: #cfe7f8;
  text-align: center;
  padding: 5px 0;
  color: #00428d;
}

.mb_2 {
  margin-bottom: 2em;
}

.mt_2 {
  margin-top: 2em;
}

.mt_1 {
  margin-top: -1em;
}

.bg_blue {
  background: #00428d;
}

.w_80 {
  width: 80%;
  margin: auto;
}

.indent {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.red {
  color: red;
}

.fl_r {
  float: right;
}

h2.tl {
  border-bottom: 1px solid #00428d;
  font-weight: bold;
  font-size: 125%;
  color: #666;
  margin-bottom: 10px;
}

article section .col2 {
  display: flex;
  justify-content: space-between;
}


/*2021/05/04*/

article section .col2>div {
  width: 48%;
}

article section .col3 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
}

article section .col3 div, article section .col3 dl {
  width: 32%;
  margin: 0 2% 2% 0;
}

article section .col3 div:nth-child(3n), article section .col3 dl:nth-child(3n) {
  margin: 0 0 2% 0;
}

article section .col4 {
  display: flex;
  flex-wrap: wrap;
}

article section .col4 div, article section .col4 dl {
  width: 23%;
  margin: 0 2% 2% 0;
}

article section .col4 div:nth-child(4n), article section .col4 dl:nth-child(4n) {
  margin: 0 0 2% 0;
}

article section .num_list {
  margin-bottom: 10px;
}


/*2021/05/05*/

article section .num_list li {
  position: relative;
  padding: 0 0 0 40px;
  margin-bottom: 20px;
  text-indent: 0;
}

article section .num_list span {
  padding: 0 .6em;
  background: #00428d;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}


/**/

article section .fs18 {
  font-size: 112.5%;
}

article section .fs20 {
  font-size: 125%;
}


/* .id-head 本人確認 */


/*2021/05/04*/

article section.id-head dl {
  padding: 30px 60px;
  background: #fff2d5;
  margin-bottom: 40px;
}

article section.id-head dt {
  text-align: center;
  margin-bottom: 10px;
  font-size: 120%;
}

article section.id-head dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

article section.id-head dd a {
  display: flex;
  width: 48%;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50px;
  border: 2px solid #00428d;
  font-size: 1.2em;
  font-weight: bold;
  color: #00428d
}

article section.id-head dd a:before {
  content: "▼";
  padding-right: 8px;
  font-size: 1.2em;
}


/* .online オンライン本人確認 */


/*2021/05/04*/

article section h3 {
  font-weight: bold;
  font-size: 150%;
  color: #00428d;
  margin-bottom: 20px;
  text-align: center;
}

article section .col2.online, article section .col2.app {
  margin-bottom: 66px;
  flex-wrap: wrap;
}

article section .col2.online dl {
  font-size: 100%;
  background: #ebffff;
  padding-bottom: 15px;
  width: 48%;
  margin-bottom: 1em;
}

article section .col2.online dt {
  margin-bottom: .9em;
  font-weight: bold;
}

article section .col2.online dt span {
  display: inline-block;
  padding: 0.6em 0.6em;
  background: #00428d;
  color: #fff;
  font-weight: bold;
  margin-right: .5em;
}

article section .col2.online dd {
  padding: 0 15px;
}

article section .col2.online dd p {
  font-size: 87.5%;
  line-height: 1.4;
  padding: 2px 0 44px 0;
}

article section .col2.online dd img {
  max-width: 50%;
  margin-left: 20px;
}

article section .col2.app dl {
  font-size: 100%;
  background: #fff;
  box-shadow: 0px 0px 15px -5px #777777;
  padding: 0 0 15px 0;
  width: 48%;
  margin-bottom: 4%
}

article section .col2.app dt {
  padding: 19px 15px 0 50px;
  margin-bottom: 10px;
  font-weight: bold;
  position: relative;
}

article section .col2.app dt span {
  display: inline-block;
  padding: 0.6em 0.6em;
  background: #ff8040;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
}

article section .col2.app dd {
  padding: 15px;
  margin: 0;
} 

article section .col2.app dd p {
  font-size: 87.5%;
  line-height: 1.4;
  padding: 0 0 15px 0;
}

article section .col2.app .image div {
  width: 50%;
  padding: 15px 0;
}

article section .col2.app .image div p {
  line-height: 1.4;
  padding: 0 15px 0 15px;
}

article section img.border {
  border: 1px solid #ccc;
}


/*
article section.online p.num_list {
    font-size: 112.5%;
	font-weight:bold;
}
article section.online p.num_list span {
    display: inline-block;
    padding: 0 .6em;
    background: #F6AA00;
    color: #fff;
    font-weight: bold;
    margin-right: .5em;
}
*/


/* .flow 本人確認の流れ */

article section.flow h2 {
  border-bottom: 1px solid #00428d;
  font-weight: bold;
  font-size: 112.5%;
  color: #00428d;
  margin-bottom: 10px;
  text-align: center;
}


/*2021/05/05*/

article section.flow li {
  font-size: 112.5%;
}

article section.flow li img {
  vertical-align: middle;
  margin-right: 3px;
}

article section.flow li span {
  background: #00428d;
}

article section.flow li.replace {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

article section.flow li.replace div:first-of-type {
  width: calc(45% - 40px);
  padding: 0 0 0 40px;
}

article section.flow li.replace div:last-of-type {
  width: 50%;
}


/* .submission 本人確認書類は以下２点以上ご提出が必要です */

article section.submission h2 {
  background: #ff0000;
  text-align: center;
  font-size: 137.5%;
  font-weight: bold;
  color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

article section.submission .upload h2 {
  background: #00428d !important;
  text-align: center;
  font-size: 137.5%;
  font-weight: bold;
  color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

article section.submission .col2.summary {
  margin-bottom: 50px;
}

article section.submission .col2.summary div {
  width: 48.5%;
}

article section.submission .col2.summary h3 {
  text-align: center;
  font-size: 137.5%;
  font-weight: bold;
}

article section.submission .col2.summary h3 i {
  padding-right: 10px;
}

article section.submission .col2.summary div:first-of-type h3 {
  color: #1eaa39;
}

article section.submission .col2.summary div:last-of-type h3 {
  color: #ff2e40;
}


/* .group_a A群：本人確認書類 .group_b B群：補完書類 */

article section.submission .group_a, article section.submission .group_b {
  padding: 0 30px;
  margin-bottom: 50px;
}

article section.submission .group_a h4, article section.submission .group_b h4 {
  border-bottom: 1px solid #00428d;
  text-align: center;
  font-size: 137.5%;
  color: #00428d;
  margin-bottom: 20px;
}

article section.submission .group_a .col2 {
  margin-bottom: 20px;
}

article section.submission .group_a .col2 dl {
  font-size: 100%;
  background: #ebffff;
  padding-bottom: 15px;
  width: 48%;
}

article section.submission .group_a .col2 dt {
  margin-bottom: .5em;
  font-weight: bold;
}

article section.submission .group_a .col2 dt span {
  display: inline-block;
  padding: 0 .6em;
  background: #00428d;
  color: #fff;
  font-weight: bold;
  margin-right: .5em;
}

article section.submission .group_a .col2 dd {
  padding: 0 15px;
}

article section.submission .group_a .col2 dd p {
  font-size: 87.5%;
  height: 6em;
  line-height: 1.4;
  padding: 0 0 15px 0;
}

article section.submission .group_b .group_b_cont {
  background: #ffffd7;
  padding: 30px;
  font-size: 112.5%;
}

article section.submission .group_b .group_b_cont .num_list {
  margin: 20px 0;
}

article section.submission .group_b .group_b_cont .col2 {}

article section.submission .group_b .group_b_cont .col2 div:first-of-type {
  /*width: 70%; margin-right: 5%;*/
}

article section.submission .group_b .group_b_cont .col2 div:last-of-type {
  /*width: 25%;*/
}

article section.submission .group_b .group_b_cont .notice {
  font-size: 77.7%;
}


/* .upload 本人確認書類のアップロード */

article section.submission .upload .img_box {
  text-align: center;
}

article section.submission .upload .col3 {
  margin: 20px 0;
  padding: 0 30px;
}

article section.submission .upload .col3 dl {
  font-size: 100%;
  background: #d2d2d2;
}

article section.submission .upload .col3 dt {
  margin-bottom: .5em;
  font-weight: bold;
}

article section.submission .upload .col3 dt span {
  display: inline-block;
  padding: 0 .6em;
  background: #626262;
  color: #fff;
  font-weight: bold;
  margin-right: .5em;
}

article section.submission .upload .col3 dd {
  padding: 0 15px 15px;
}

article section.submission .upload .col3 dd p {
  font-size: 87.5%;
  height: 4em;
  line-height: 1.4;
  padding: 0 0 15px 0;
}

article section.submission .upload h3 {
  border-bottom: 1px solid #00428d;
  font-weight: bold;
  font-size: 112.5%;
  color: #00428d;
  margin-bottom: 10px;
}

article section.submission .upload .strong {
  color: #00428d;
  text-align: center;
  border-bottom: 1px solid #00428d;
}

article section.submission .driver_license.col2 {
  margin: 20px 0;
}

article section.submission .driver_license.col2 dl {
  width: 50%;
}

article section.submission .driver_license.col2 dt {
  height: 35px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 112.5%;
}

article section.submission .driver_license.col2 dl:first-of-type dt {
  background: #00428d;
  position: relative;
  margin-bottom: 15px;
}

article section.submission .driver_license.col2 dl:first-of-type dt:after {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 17.5px 0 17.5px 20px;
  border-color: transparent transparent transparent #00428d;
  position: absolute;
  right: -20px;
}

article section.submission .driver_license.col2 dl:last-of-type dt {
  background: #000059;
  margin-bottom: 43px;
}

article section.submission .driver_license.col2 dd {
  padding: 0 30px;
}

article section.submission .driver_license.col2 dd img {
  margin-bottom: 30px;
}

article section.submission .driver_license.col2 dd strong {
  display: block;
  border-bottom: 1px solid #00428d;
  font-weight: bold;
  font-size: 112.5%;
  color: #00428d;
  margin-bottom: 10px;
  text-align: center;
}

.notice {
  text-indent: -1em;
  margin-left: 1em;
  line-height: 1.4;
}

.notice.mtb_3 {
  margin-top: -3em;
  margin-bottom: 3em;
}

.sp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 640px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .w_80 {
    width: 100%;
    margin: auto;
  }
  article h1 {
    margin-bottom: 15px;
  }
  article section .col2, article section .col3, article section .col4 {
    display: block;
  }
  article section .col2 div, article section .col2 dl, article section .col3 div, article section .col3 dl, article section .online.col2 dl, article section .app.col2 dl, article section.flow li.replace, article section.submission .col2.summary div, article section.submission .group_b .group_b_cont .col2 div:first-of-type, article section.submission .group_b .group_b_cont .col2 div:last-of-type, article section.submission .upload .col2 div:first-of-type, article section.submission .upload .col2 div:last-of-type, article section.submission .driver_license.col2 dl, article section.submission .group_a .col2 dl {
    display: block;
    width: 100%;
    margin-right: 0;
  }
  article section.flow li.replace {
    flex-direction: column;
    width: calc(100% - 1.3em);
  }
  article section.flow li.replace div:first-of-type {
    width: calc(100% - 40px);
  }
  article section.flow li.replace div:last-of-type {
    width: 100%;
    margin: 15px 0 0 auto;
  }
  article section.online p.num_list {
    text-indent: -1.3em;
    margin-left: 1.3em;
  }
  article section.online .app .image {
    display: flex;
    width: 100%;
  }
  article section .num_list span {
    text-indent: 0;
    text-align: center;
  }
  /* .id-head 本人確認 */
  /*2021/05/04*/
  article section.id-head dl {
    padding: 15px;
  }
  article section.id-head dd a {
    display: flex;
    width: 48%;
    height: 40px;
    font-size: 1em;
  }
  article section.online .col2 dd p {
    height: auto
  }
  article section.online .col2 dd img.fl_r {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
  }
  article section.submission h2 {
    margin-bottom: 10px;
  }
  article section.submission .col2.summary div {
    margin-bottom: 10px;
  }
  article section.submission .group_a, article section.submission .group_b {
    padding: 0 0;
    margin-bottom: 30px;
  }
  article section.submission .group_a .col2 dl {
    margin-bottom: 15px;
  }
  article section.submission .group_a .col2 dd p {
    height: auto
  }
  article section.submission .group_b .group_b_cont .col2 div:first-of-type {
    margin-bottom: 15px;
  }
  article section.submission .group_b .group_b_cont {
    padding: 15px;
  }
  article section.submission .upload .col3 {
    padding: 0 15px;
  }
  article section.submission .upload .col3 dl {
    margin-bottom: 15px;
  }
  article section.submission .driver_license.col2 dd {
    padding: 0;
  }
  article section.submission .driver_license.col2 dl:first-of-type dt:after {
    display: none;
  }
  article section.submission .driver_license.col2 dl:first-of-type {
    margin-bottom: 20px;
  }
  article section.submission .driver_license.col2 dl:first-of-type dt, article section.submission .driver_license.col2 dl:last-of-type dt {
    margin-bottom: 5px;
  }
  article section.submission .driver_license.col2 dd img {
    margin-bottom: 15px;
  }
  article section .col2.online dd img {
    max-width: 35%;
    margin-left: 20px;
    margin-top: -1px;
  }
  /*オンライン本人確認*/
  article section .col2.online dd p {
    padding: 26px 0 30px 0;
  }
  article section .col2.online dd img {
    max-width: 31%;
    margin-left: 4px;
    margin-top: 11px;
  }
  .dl_online dl {
    padding-bottom: 44px;
  }
  #img4 {
    max-width: 38%;
    margin-top: -27px;
  }
}

@media screen and (max-width: 639px) {
  article section .col2.online dd img {
    max-width: 28%;
    margin-left: 4px;
    margin-top: 11px;
}
  #img4 {
    max-width: 28%;
  }
}


@media screen and (max-width: 500px) {
  #img4 {
    max-width: 38%;
    margin-top: -16px;
  }
	article section .col2.online dd img {
    max-width: 39%;
    margin-left: 4px;
    margin-top: 11px;
}
}

@media screen and (max-width: 375px) {
  article section .col2.online dd img {
    max-width: 47%;
    margin-top: 18px;
  }
  .dl_online {
    padding-bottom: 32px;
  }
  #img4 {
    max-width: 52%;
    margin-top: -19px;
  }
}