@charset "UTF-8";
/* Updated 2026/02/03.T */
/* Updated 2025/11/17.T */
/* Updated 2025/03/25.T */
/* Updated 2024/03/22.T */
/* Updated 2024/03/18.T */
/* Updated 2023/09/27.T */
/* Updated 2023/07/21.T */
@font-face {
  font-family: "noto-sans-black";
  src: url("/build/2000/smbc-reference/kojin/special/fonts/NotoSansJP-Black.woff") format("woff");
}
/* ----------------------------------
common
---------------------------------- */
#containment-area {
  margin-bottom: 0;
}
sup{
  font-size: 1.2rem;
}
#footer-content {
  margin-top: 0;
}
.btn-type01.-orange01{
  background-color: #E95501;
}
.btn-type01.-type01{
  width: 100%;
  max-width: 400px;
}
.btn-type01.-type01>.inner{
  min-height: 64px;
  font-size: 2rem;
}
/*02*/
.btn-type01.-type02{
  width: 100%;
  max-width: 340px;
}
.btn-type01.-type02>.inner{
  min-height: 54px;
  font-size: 1.8rem;
}
/* ----------------------------------
kv
---------------------------------- */
.kv-area{
  padding: 28px 20px 0;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_kv02.png) no-repeat center 0;
}
.kv-area .inner{
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
/* ----------------------------------
bg-wrap01
---------------------------------- */
.bg-wrap01{
  margin: 77px 0 0;
  padding: 0 20px 60px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_03.png) no-repeat center -2px, linear-gradient(transparent 94px, #F5F9E6 94px);
}
.bg-wrap01>.inner{
  max-width: 1080px;
  margin: 0 auto;
}
.bg-wrap01.-type02{
  margin: 0;
  padding: 84px 20px 100px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_02.png) no-repeat center -2px, #F5F9E6;
}
/* ----------------------------------
bg-wrap02
---------------------------------- */
.bg-wrap02{
  padding: 100px 20px 60px;
  background: #fff url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_04.png) no-repeat center -2px;
}
.bg-wrap02>.inner{
  max-width: 1080px;
  margin: 0 auto;
}
.bg-wrap02.-type02{
  padding: 94px 20px 60px;
}
/* ----------------------------------
bg-wrap03
---------------------------------- */
.bg-wrap03{
  padding: 60px 20px 60px;
  background: #F5F9E6;
}
.bg-wrap03>.inner{
  max-width: 1080px;
  margin: 0 auto;
}
/* ----------------------------------
bg-wrap04
---------------------------------- */
.bg-wrap04{
  padding: 78px 20px 140px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_03.png) no-repeat center bottom,#E2EFBC url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_02.png) no-repeat center -2px;
}
.bg-wrap04>.inner{
  max-width: 1080px;
  margin: 0 auto;
}
/* ----------------------------------
sec-ttl01
---------------------------------- */
.sec-ttl01{
  text-align: center;
}
/* ----------------------------------
sec-ttl02
---------------------------------- */
.sec-ttl02{
  margin: 0 0 30px;
  text-align: center;
}
/* ----------------------------------
sec-ttl03
---------------------------------- */
.sec-ttl03{
  margin: 0;
  text-align: center;
  font-size: 4rem;
  color: #004831;
  font-weight: bold;
  font-family: "noto-sans-black";
}
/* ----------------------------------
card-wrap01
---------------------------------- */
.card-wrap01{
  display: flex;
  justify-content: space-between;
}
.card-wrap01>.item01{
  margin-top: 60px;
  padding: 32px 18px 24px;
  width: 528px;
  max-width:49%;
  background: #fff;
}
.card-wrap01>.item01 .text01{
  margin: 20px 0 0;
  font-size: 1.4rem;
  font-weight: bold;
}
.card-wrap01>.item01 .text01 sup{
  font-size: .9rem;
}
.card-wrap01>.item01 .img01{
  text-align: center;
}
.card-wrap01>.item01 .img03-wrap {
  display: flex;
  gap: 30px;
}
.card-wrap01>.item01 .img02{
  margin: 32px 0 0;
  text-align: center;
}
.card-wrap01>.item01 .img02>img{
  width: 160px;
}
.card-wrap01>.item01 .img03-wrap>.item01{
  width: 100%;
  margin: 32px 0 0;
  padding: 24px 22px;
  border-radius: 8px;
  background: #F3F8F6;
  text-align: center;
  font-weight: bold;
  color: #004831;
  text-decoration: none;
}
.card-wrap01>.item01 .img03-wrap>.item01>p{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
}
.card-wrap01>.item01 .img03-wrap>.item01 .img{
  width: 80px;
  margin: 16px auto 0;
}
.card-wrap01 .list-notice02{
  margin: 24px 0 0!important;
}
.card-wrap01>.item01>.text02 {
  color: #E95501;
  margin-top: 16px;
  font-weight: bold;
  text-align: center;
  font-size: 2.0rem;
}
/* ----------------------------------
card-wrap02
---------------------------------- */
.card-wrap02{
  position: relative;
  margin: 104px auto 0;
  border-radius: 8px;
  padding: 42px 60px 40px;
  background: #F5F9E6;
}
.card-wrap02>.step01{
  position: absolute;
  left: calc(50% - 40px);
  top: -66px;
  width: 80px;
}
.card-wrap02>.ttl01{
  font-size: 2.4rem;
  color: #004831;
  text-align: center;
  font-weight: bold;
}
.card-wrap02.-next::after{
  display: block;
  content: '';
  position: absolute;
  bottom: -20px;
  left: calc(50% - 26px);
  border-top: 30px solid #F5F9E6;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
}
/* ----------------------------------
card-wrap03
---------------------------------- */
.card-wrap03{
  padding: 40px;
  margin: 40px 0 0;
  border-radius: 8px;
  background: #fff;
}
.card-wrap01 + .card-wrap03{
  margin-top: 24px;
}
/* ----------------------------------
card-wrap04
---------------------------------- */
.card-wrap04{
  position: relative;
  margin: 40px 0 0;
  padding: 100px 48px 48px;
  border-radius: 8px;
  background: #fff;
}
.card-wrap04>.icon01{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 8px 8px 0 0;
  height: 50px;
  background: #004831;
  color: #fff;
  font-weight: bold;
  font-size: 2.4rem;
}
.card-wrap04>.text01{
  margin: 32px 0 0;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.card-wrap04>.text02{
  margin: 32px 0 0;
  text-align: center;
}
.card-wrap04>.text02>p{
  padding: 24px;
  border-radius: 8px;
  background: #FEF7E6;
  color: #004831;
  font-size: 2.4rem;
  font-weight: bold;
}
/* ----------------------------------
table-wrap01
---------------------------------- */
.table-wrap01{
  margin: 32px 0 0;
  border: 1px solid #D5DEDB;
  border-radius: 8px;
  overflow: hidden;
}
.table-wrap01>table{
  width: 100%;
  background: #fff;
}
.table-wrap01>table>tbody>tr>th{
  padding: 18px 16px;
  border: 1px solid #D5DEDB;
  border-width: 1px 0 0 0;
  background: #E2EFBC;
  color: #004831;
  font-size: 1.6rem;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.table-wrap01>table>tbody>tr>td{
  padding: 18px 16px;
  border: 1px solid #D5DEDB;
  border-width: 1px 0 0 1px;
  font-size: 1.6rem;
  text-align: center;
  vertical-align: middle;
}
.table-wrap01>table>tbody>tr:first-child>th,
.table-wrap01>table>tbody>tr:first-child>td{
  border-top: 0;
}
.table-wrap01 .w01{
  width: 29.16%;
}
.table-wrap01 .w02{
  width: 20.83%;
}
.table-wrap01>table>tbody>tr>.td01{
  background: #F3F8F6;
  font-size: 1.3rem;
  font-weight: bold;
}
/* ----------------------------------
table-wrap02
---------------------------------- */
.table-wrap02{
  margin: 60px 0 0;
  border-radius: 8px;
  overflow: hidden;
}
.table-wrap02>table{
  width: 100%;
  background: #fff;
}
.table-wrap02>table>tbody>tr>th{
  padding: 8px;
  background: #C4D700;
  font-size: 2.4rem;
  color: #004831;
  text-align: center;
  font-weight: bold;
}
.table-wrap02>table>tbody>tr>td{
  padding: 22px 16px;
  background: #F5F9E6;
  vertical-align: middle;
  font-weight: bold;
  font-size: 2rem;
  color: #004831;
}
.table-wrap02>table>tbody>tr>.td01{
  padding: 14px 16px;
  border-left: 1px solid #D5DEDB;
  font-size: 4rem;
  line-height: 1;
  color: #004831;
  text-align: center;
  font-weight: bold;
}
.table-wrap02>table>tbody>tr>.td02{
  padding: 14px 16px;
  border-left: 1px solid #D5DEDB;
  font-size: 4rem;
  line-height: 1;
  color: #C83030;
  text-align: center;
  font-weight: bold;
}
.table-wrap02>table>tbody>tr:nth-child(odd)>td{
  background: #E2EFBC;
}
.table-wrap02>table .width01{
  width: 9.25%;
}
/* ----------------------------------
img-wrap01
---------------------------------- */
.img-wrap01{
  margin: 24px 0 0;
  text-align: center;
}
.img-wrap01:first-child{
  margin-top: 0;
}
.img-wrap01>.wide01{
  max-width: 400px;
}
/* ----------------------------------
card-normal01.-type01
---------------------------------- */
.card-normal01.-type01{
  margin-top: 42px;
}
.card-normal01.-type01>.inner>.header{
  padding: 32px 42px;
}
.card-normal01.-type01>.inner>.header>.title{
  font-size: 2.4rem;
}
.toggle-block01.card-normal01.-type01>.inner>.header[role=tab]::after{
  top: calc(50% - 11px);
  right: 10px;
  width: 22px;
  height: 22px;
}
.card-normal01.-type01>.inner>.body{
  padding: 24px 42px 40px;
}
.card-normal01.-type01>.inner>.body:not(:first-child)::before {
  width: calc(100% - (42px * 2));
}
.card-wrap01 + .card-normal01.-type01{
  margin-top: 24px;
}
/* ----------------------------------
card-normal01.-type02
---------------------------------- */
.card-normal01.-type02{
  margin-top: 32px;
  border-radius: 16px;
  border:none;
  background: #F3F8F6;
  width: 100%;
}
.card-normal01.-type02>.inner>.header{
  padding: 40px 32px 0;
}
.card-normal01.-type02>.inner>.header>.title{
  font-size: 3.2rem;
  color: #004831;
}
.card-normal01.-type02>.inner>.body{
  padding: 32px 32px 40px;
}
.card-normal01.-type02>.inner>.body:not(:first-child)::before{
  display: none;
}
/* ----------------------------------
card-normal01.-type03
---------------------------------- */
.card-normal01.-type03{
  margin-top: 60px;
  border-radius: 10px;
}
.card-normal01.-type03>.inner>.header{
  padding: 32px 40px;
}
.card-normal01.-type03>.inner>.header>.title{
  font-size: 2.4rem;
  color: #141D1D!important;
}
.toggle-block01.card-normal01.-type03>.inner>.header[role=tab]::after{
  top: calc(50% - 14px);
  right: 40px;
  width: 28px;
  height: 28px;
}
.card-normal01.-type03>.inner>.body{
  padding: 24px 40px;
}
.card-normal01.-type03>.inner>.body:not(:first-child)::before {
  width: calc(100% - (40px * 2));
}
/* ----------------------------------
card-normal01.-type04
---------------------------------- */
.card-normal01.-type04{
  margin-top: 24px;
}
.card-normal01.-type04>.inner>.header>.title{
  font-size: 2.0rem;
}
.toggle-block01.card-normal01.-type04>.inner>.header[role=tab]::after{
  top: calc(50% - 11px);
  right: 10px;
  width: 22px;
  height: 22px;
}
/* ----------------------------------
text-layout01
---------------------------------- */
.text-layout01{
  margin: 40px 0 0;
  border-radius: 8px;
  background: #fff;
}
.text-layout01>.head{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
  max-width: 750px;
  margin: 0 auto;
  border-bottom: 1px solid #E5EDEA;
}
.text-layout01>.body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 32px 60px 40px;
}
.text-layout01 .img01{
  width: 100px;
  margin-left: 24px;
}
.text-layout01 .text01{
  position: relative;
  padding: 0 0 0 72px;
  color: #004831;
  font-weight: bold;
  font-size: 2.4rem;
}
.text-layout01 .text02{
  position: relative;
  padding: 0 0 0 72px;
  color: #004831;
  font-weight: bold;
  font-size: 2.2rem;
}
.text-layout01 .text02 em{
  color: #E95501;
  font-weight: bold;
}
.text-layout01 .text01::before,
.text-layout01 .text02::before{
  display: block;
  content: '';
  position: absolute;
  left: 24px;
  top: -0.1em;
  width: 40px;
  height: 40px;
}
.text-layout01 .text01::before{
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_17.png) no-repeat 0 0 / 100%;
}
.text-layout01 .text02::before{
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_18.png) no-repeat 0 0 / 100%;
}
.text-layout01 + .text-layout01{
  margin-top: 32px;
}
/* ----------------------------------
text-layout02
---------------------------------- */
.text-layout02{
  margin: 16px 0 0;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  color: #E95501;
  font-weight: bold;
  font-size: 2.2rem;
  text-align: center;
}
/* ----------------------------------
text-layout03
---------------------------------- */
.text-layout03{
  position: relative;
  margin: 0 24px 94px;
}
.text-layout03>.item01{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background: #F3F8F6;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  color: #004831;
}
.text-layout03>.item01 em{
  font-weight: bold;
  color: #E95501;
}
.text-layout03::after{
  display: block;
  content: '';
  position: absolute;
}
.text-layout03::after{
  left: calc(50% - 37px);
  bottom: -63px;
  width: 74px;
  height: 31px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_16.svg) no-repeat 0 0 / 100%;
}
/* ----------------------------------
text-layout04
---------------------------------- */
.text-layout04 .item01{
  margin: 16px 0 0;
  padding: 24px;
  border-radius: 8px;
  background: #F3F8F6;
  color: #004831;
  font-weight: bold;
  font-size: 2.2rem;
  text-align: center;
}
.text-layout04 em{
  font-weight: bold;
  font-size: 2.8rem;
  color: #E95501;
}
/* ----------------------------------
text-ttl01
---------------------------------- */
.text-ttl01{
  margin: 40px 0 0;
  font-size: 2.8rem;
  color: #004831;
  font-weight: bold;
  text-align: center;
}
.text-ttl01>em{
  padding: 0 8px;
  background: linear-gradient(transparent 66%, #FFDB66 66%);
  font-weight: bold;
}
/* ----------------------------------
text-ttl02
---------------------------------- */
.text-ttl02{
  position: relative;
  margin: 20px 0 0;
  padding: 0 0 0 30px;
  font-size: 2.6rem;
  color: #004831;
  font-weight: bold;
}
.text-ttl02::before{
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 21px;
  height: 20px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_14.png) no-repeat 0 0 / 100%;
}
._t-center .text-ttl02{
  display: inline-block;
}
/* ----------------------------------
text-ttl03
---------------------------------- */
.text-ttl03{
  margin: 40px 0 0;
  font-size: 2.8rem;
  color: #004831;
  font-weight: bold;
  text-align: center;
}
.text-ttl03:first-child{
  margin-top: 0;
}
/* ----------------------------------
text-ttl04
---------------------------------- */
.text-ttl04{
  margin: 48px 0 0;
  font-size: 3rem;
  color: #004831;
  font-weight: bold;
  text-align: center;
}
/* ----------------------------------
img-layout01
---------------------------------- */
.img-layout01{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}
.img-layout01>.item01{
  width: 172px;
}
.img-layout01>.item02{
  flex: 1;
  margin-left: 24px;
  font-size: 1.8rem;
}
/* ----------------------------------
bnr-text01
---------------------------------- */
.bnr-text01{
  margin: 40px 0 0;
  color: #E95501;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}
.bnr-text01>p{
  display: inline-block;
  position: relative;
  padding: 0 34px;
}
.bnr-text01>p::before,
.bnr-text01>p::after{
  display: block;
  content: '';
  position: absolute;
  bottom: 0.2em;
  font-size: 24px;
  line-height: 1;
  color: #E95501;
}
.bnr-text01>p::before{
  content: '?';
  left: 0;
}
.bnr-text01>p::after{
  content: '?';
  right: 0;
}
/* ----------------------------------
bnr-img01
---------------------------------- */
.bnr-img01{
  margin: 16px 0 0;
  text-align: center;
}
/* ----------------------------------
btn-list01.-type01
---------------------------------- */
.btn-list01.-type01{
  margin-top: 48px;
}
/* ----------------------------------
card-layout01
---------------------------------- */
.card-layout01{
  display: flex;
  margin: 24px 0 0!important;
}
.card-layout01>.item01{
  width: 232px;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(20, 29, 29, 0.05),0 8px 10px rgba(20, 29, 29, 0.08);
  text-align: center;
}
.card-layout01>.item01:not(:first-child){
  margin-left: 20px;
}
.card-layout01>.item01>.inner{
  text-decoration: none;
}
.card-layout01>.item01>.inner>.head{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(3em + 32px);
  padding: 16px;
  border-bottom: 1px solid #EFF2F1;
  font-size: 1.6rem;
  color: #03794F;
  font-weight: bold;
}
.card-layout01>.item01>.inner>.body{
  padding: 22px;
}
/* ----------------------------------
card-layout02
---------------------------------- */
.card-layout02{
  display: flex;
  margin: 40px 0 0;
}
.card-layout02>.item01{
  position: relative;
  width: 250px;
  background: #F5F9E6;
  border-radius: 8px;
  padding: 48px 12px 24px;
  text-align: center;
}
.card-layout02>.item01::before{
  display: block;
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 50px;
  height: 52px;
}
.card-layout02>.item01:nth-child(1):before{
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_19.svg) no-repeat 0 0 /100%;
}
.card-layout02>.item01:nth-child(2):before{
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_20.svg) no-repeat 0 0 /100%;
}
.card-layout02>.item01:nth-child(3):before{
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_21.svg) no-repeat 0 0 /100%;
}
.card-layout02>.item01:not(:first-child){
  margin-left: 58px;
}
.card-layout02>.item01:not(:first-child)::after{
  display: block;
  content: '';
  position: absolute;
  left: -42px;
  top: calc(50% - 20px);
  width: 26px;
  height: 40px;
  background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_22.svg) no-repeat 0 0 / 100%;
}
.card-layout02>.item01>.head{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 144px;
  font-size: 1.6rem;
}
.card-layout02>.item01>.body{
  margin: 16px 0 0;
}
.card-layout02>.item01>.body img{
  max-width: 140px;
}
/* ----------------------------------
border-wrap01
---------------------------------- */
.border-wrap01{
  border: 1PX solid #D9E1DE;
  margin: 84px 0 0;
  padding: 40px 106px 32px;
  border-radius: 8px;
}
/* ----------------------------------
text-block01 -type01
---------------------------------- */
.text-block01.-type01{
  margin: 60px 0 0;
}
.text-block01.-type01 a.icon-link01:not([class*=btn-type]):not([class*=card-tile]){
  text-decoration: underline;
}
/* ----------------------------------
cv-area01
---------------------------------- */
.cv-area01{
  padding: 35px 18px;
  box-shadow: 0 0 12px rgba(86, 99, 95, 0.16);
  background: #fff;
}
/*----------------------------------------------
fix-wrap01
----------------------------------------------*/
.fix-wrap01{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 12px rgba(86, 99, 95, 0.16);
}
/*----------------------------------------------
modal-content01
----------------------------------------------*/
.modal-content01>.text01{
  margin: 24px 0 0;
  font-size: 1.6rem;
  font-weight: bold;
  color: #03794F;
  text-align: center;
}
.modal-content01>.img01{
  text-align: center;
}
.modal-content01>.img01.-wide01>img{
  width: 118px;
}
.modal-content01>.img01.-wide02>img{
  width: 178px;
}
.modal-content01>.img01.-wide03>img{
  width: 164px;
}
.modal-content01>.img01.-wide04>img{
  width: 166px;
}
.modal-content01>.img01.-wide05>img{
  width: 297px;
}
.modal-content01>.img01.-wide06>img{
  width: 338px;
}
/*----------------------------------------------
list-wrap01
----------------------------------------------*/
.list-wrap01{
  font-size: 12px;
}
#content-area .list-wrap01 [class*=list-notice]:not(:first-child),
.list-wrap01 .list-notice01>.item:not(:first-child){
  margin-top: 0;
}
.list-wrap01 .list-num01:not(:first-child){
  margin-top: 0;
}
.list-wrap01 .list-num01>.item:not(:first-child){
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  sup{
    font-size: 1.0rem;
  }
  .btn-type01.-type01>.inner{
    min-height: 54px;
    font-size: 1.8rem;
  }
  /* ----------------------------------
  kv
  ---------------------------------- */
  .kv-area{
    padding:0;
    background: none;
  }
  .kv-area .btn-list01{
    margin: 0;
    padding: 10px 20px 30px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(086,99,95,.15);
  }
  /* ----------------------------------
  bg-wrap01
  ---------------------------------- */
  .bg-wrap01,
  .bg-wrap01.-type02{
    background: #F5F9E6 url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_02_sp.png) no-repeat center 0 / 100%;
    margin-top: 60px;
    padding: 0 18px 40px;
  }
  .bg-wrap01.-type02{
    margin-top: 0;
  }
  /* ----------------------------------
  bg-wrap02
  ---------------------------------- */
  .bg-wrap02{
    padding: 80px 18px 0;
    background: #fff url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_04_sp.png) no-repeat center -2px / 100%;
  }
  .bg-wrap02.-type02{
    padding-top: 0;
  }
  /* ----------------------------------
  bg-wrap03
  ---------------------------------- */
  .bg-wrap03{
    padding: 20px 18px 60px;
    background: #F5F9E6;
  }
  /* ----------------------------------
  bg-wrap04
  ---------------------------------- */
  .bg-wrap04{
    background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_02_sp.png) no-repeat 0 0 / 100% ,#E2EFBC url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_bg_03_sp.png) no-repeat 0 bottom / 100%;
    margin-top: 40px;
    padding: 0 18px 100px;
  }
  /* ----------------------------------
  sec-ttl01
  ---------------------------------- */
  .bg-wrap01.-type02 .sec-ttl01,
  .bg-wrap04 .sec-ttl01{
    margin: 0 -18px;
  }
  /* ----------------------------------
  sec-ttl02
  ---------------------------------- */
  .sec-ttl02.-wide01 img{
    max-width: 261px;
  }
  .bg-wrap02 .sec-ttl02{
    margin: 0 -18px;
  }
  /* ----------------------------------
  sec-ttl03
  ---------------------------------- */
  .sec-ttl03{
    font-size: 3.2rem;
  }
  /* ----------------------------------
  card-wrap01
  ---------------------------------- */
  .card-wrap01{
    display: block;
  }
  .card-wrap01>.item01{
    width: auto;
    margin-top: 32px;
    max-width:100%;
  }
  .card-wrap01>.item01 .text01{
    margin: 24px 0 0;
    font-size: 1.2rem;
  }
  .card-wrap01>.item01 .img02{
    margin: 24px 0 0;
  }
  .card-wrap01>.item01 .img02>img{
    width: 118px;
  }
  .card-wrap01>.item01 .img01.-wide01 img{
    width: 298px;
    max-width: 98%;
  }
  .card-wrap01>.item01 .img01.-wide02 img{
    width: 265px;
    max-width: 87%;
  }
  .card-wrap01>.item01 .img03-wrap {
    gap: 6%;
  }
  .card-wrap01>.item01 .img03-wrap>.item01 {
    padding: 3% 5%;
  }
  .card-wrap01>.item01 .img03-wrap>.item01 .img{
    width: 80%;
  }
  .card-wrap01>.item01>.text02 {
    font-size: 1.8rem;
  }
  /* ----------------------------------
  card-wrap02
  ---------------------------------- */
  .card-wrap02{
    margin: 84px auto 0;
    padding: 36px 20px 24px;
  }
  .card-wrap02>.step01{
    left: calc(50% - 30px);
    top: -44px;
    width: 60px;
  }
  .card-wrap02>.ttl01{
    font-size: 2rem;
  }
  /* ----------------------------------
  card-wrap03
  ---------------------------------- */
  .card-wrap03{
    padding: 24px;
    margin: 20px 0 0;
  }
  /* ----------------------------------
  card-wrap04
  ---------------------------------- */
  .card-wrap04{
    margin: 24px 0 0;
    padding: 77px 18px 24px;
  }
  .card-wrap04>.icon01{
    height: 45px;
    font-size: 2rem;
  }
  .card-wrap04>.text01{
    margin: 16px 0 0;
    font-size: 1.6rem;
  }
  .card-wrap04>.text02{
    margin: 16px 0 0;
    text-align: center;
  }
  .card-wrap04>.text02>p{
    display: block;
    padding: 16px 10px;
    font-size: 2.0rem;
  }
  /* ----------------------------------
  table-wrap01
  ---------------------------------- */
  .table-wrap01{
    margin: 24px 0 0;
  }
  .table-wrap01>table>tbody>tr>th{
    padding: 10px 8px;
    font-size: 1.4rem;
  }
  .table-wrap01>table>tbody>tr>td{
    padding: 10px 8px;
    font-size: 1.4rem;
  }
  .table-wrap01>table>tbody>tr>.td01{
    font-size: 1.2rem;
  }
  .table-wrap01 .w01{
    width: 40%;
  }
  .table-wrap01 .w02{
    width: 26.75%;
  }
  /* ----------------------------------
  card-normal01
  ---------------------------------- */
  .card-normal01.-type01{
    margin-top: 24px;
  }
  .toggle-block01.card-normal01.-type01>.inner>.header[role=tab]>.title{
    padding-right: 22px;
  }
  .card-normal01.-type01>.inner>.header>.title{
    font-size: 1.6rem;
  }
  .card-normal01.-type01>.inner>.body{
    padding: 24px 19px;
  }
  .card-normal01.-type01>.inner>.header{
    padding: 16px 20px;
  }
  .card-normal01.-type01>.inner>.body:not(:first-child)::before{
    width: calc(100% - 36px);
  }
  .card-wrap01 + .card-normal01.-type01{
    margin-top: 32px;
  }
  /* ----------------------------------
  card-normal01.-type02
  ---------------------------------- */
  .card-normal01.-type02{
    margin-top: 24px;
  }
  .card-normal01.-type02>.inner>.header{
    padding: 16px 16px 0;
  }
  .card-normal01.-type02>.inner>.header>.title{
    font-size: 2.4rem;
  }
  .card-normal01.-type02>.inner>.body{
    padding: 16px 16px 40px;
  }
  /* ----------------------------------
  card-normal01
  ---------------------------------- */
  .card-normal01.-type03{
    margin-top: 20px;
  }
  .card-normal01.-type03>.inner>.header {
    padding: 16px 20px;
  }
  .toggle-block01.card-normal01.-type03>.inner>.header[role=tab]::after {
    top: calc(50% - 11px);
    right: 10px;
    width: 22px;
    height: 22px;
  }
  .card-normal01.-type03>.inner>.header>.title{
    font-size: 1.6rem;
  }
  .card-normal01.-type03>.inner>.body{
    padding: 24px 19px;
  }
  .card-normal01.-type03>.inner>.body:not(:first-child)::before {
    content: "";
    width: calc(100% - 36px);
  }
  /* ----------------------------------
  text-ttl01
  ---------------------------------- */
  .text-ttl01{
    margin: 24px 0 0;
    font-size: 2.4rem;
  }
  /* ----------------------------------
  text-ttl02
  ---------------------------------- */
  .text-ttl02{
    margin: 12px 0 0;
    font-size: 1.8rem;
  }
  .text-ttl02::before{
    top: 0.3em;
  }
  ._t-center .text-ttl02{
    display: block;
  }
  /* ----------------------------------
  text-ttl04
  ---------------------------------- */
  .text-ttl04{
    margin: 34px 0 0;
    font-size: 2rem;
  }
  /* ----------------------------------
  img-layout01
  ---------------------------------- */
  .img-layout01{
    display: block;
  }
  .img-layout01>.item01{
    width: auto;
  }
  .img-layout01>.item02{
    margin: 24px 0 0;
    font-size: 1.6rem;
  }
  /* ----------------------------------
  text-layout01
  ---------------------------------- */
  .text-layout01{
    margin: 30px 0 0;
  }
  .text-layout01>.head{
    padding: 22px 0 16px;
    margin: 0 18px;
  }
  .text-layout01>.body{
    display: block;
    padding: 16px;
  }
  .text-layout01 .img01{
    width: 60px;
    margin-left: 8px;
  }
  .text-layout01 .text01{
    flex: 1;
    padding: 0 0 0 38px;
    font-size: 1.6rem;
  }
  .text-layout01 .text02{
    padding: 0 0 0 38px;
    font-size: 1.6rem;
  }
  .text-layout01 .text01::before,
  .text-layout01 .text02::before{
    left: 0;
    top: -0.1em;
    width: 30px;
    height: 30px;
  }
  .text-layout01 + .text-layout01{
    margin-top: 16px;
  }
  /* ----------------------------------
  text-layout02
  ---------------------------------- */
  .text-layout02{
    margin: 16px 0 0;
    padding: 16px;
    font-size: 1.6rem;
  }
  /* ----------------------------------
  text-layout03
  ---------------------------------- */
  .text-layout03{
    display: block;
    margin: 0 0 48px;
  }
  .text-layout03>.item01{
    display: block;
    padding: 16px;
    width: auto;
    font-size: 2rem;
  }
  .text-layout03>.item01:not(:first-child){
    position: relative;
    margin-top: 38px;
  }
  .text-layout03>.item01:not(:first-child)::before{
    display: block;
    content: '';
    position: absolute;
    left: calc(50% - 7px);
    top: -24px;
    width: 14px;
    height: 14px;
    background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_15.svg) no-repeat 0 0 / 100%;
  }
  .text-layout03::before{
    display: none;
  }
  .text-layout03::after{
    left: calc(50% - 21px);
    bottom: -32px;
    width: 42px;
    height: 16px;
  }
  .text-layout04 em{
  font-weight: bold;
  font-size: 2.2rem;
  color: #E95501;
}
  /* ----------------------------------
  bnr-text01
  ---------------------------------- */
  .bnr-text01{
    margin: 24px 0 0;
    font-size: 1.6rem;
  }
  .bnr-text01>p{
    padding: 0 28px;
  }
  .bnr-text01>p::before,
  .bnr-text01>p::after{
    bottom: 0.2em;
    font-size: 16px;
  }
  /* ----------------------------------
  bnr-img01
  ---------------------------------- */
  .btn-list01.-type01{
    margin-top: 32px;
  }
  /* ----------------------------------
  card-layout01
  ---------------------------------- */
  .card-layout01{
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 8px!important;
  }
  .card-layout01>.item01{
    width: 48.49%;
    margin: 16px 0 0;
  }
  .card-layout01>.item01:not(:first-child){
    margin-left: 0;
  }
  .card-layout01>.item01>.inner>.head{
    padding: 16px 8px;
  }
  .card-layout01>.item01>.inner>.body{
    padding: 12px 14px;
  }
  /* ----------------------------------
  border-wrap01
  ---------------------------------- */
  .border-wrap01{
    margin: 30px 0 0;
    padding: 24px 18px;
    border-radius: 8px;
  }
  /* ----------------------------------
  card-layout02
  ---------------------------------- */
  .card-layout02{
    justify-content: space-between;
    margin: 24px 0 0;
  }
  .card-layout02>.item01{
    width: 45.21%;
    border-radius: 8px;
    padding: 16px 12px 0;
  }
  .card-layout02>.item01::before{
    left: -10px;
    top: -12px;
    width: 30px;
    height: 32px;
  }
  .card-layout02>.item01:nth-child(1){
    display: none;
  }
  .card-layout02>.item01:nth-child(2):before{
    background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_19.svg) no-repeat 0 0 /100%;
  }
  .card-layout02>.item01:nth-child(3):before{
    background: url(/build/2000/smbc-reference/kojin/open-account/salary_new/imgs/index_ico_20.svg) no-repeat 0 0 /100%;
  }
  .card-layout02>.item01:not(:first-child){
    margin-left: 0;
  }
  .card-layout02>.item01:not(:last-child)::after{
    display: none;
  }
  .card-layout02>.item01:last-child::after{
    left: -14%;
    top: calc(50% - 9px);
    width: 3.2vw;
    height: 4.8vw;
  }
  .card-layout02>.item01>.head{
    min-height: 120px;
    font-size: 1.2rem;
    line-height: 1.2;
  }
  .card-layout02>.item01>.body{
    margin: 16px 0 0;
  }
  .card-layout02>.item01>.body img{
    max-width: 100%;
  }
  /* ----------------------------------
  table-wrap02
  ---------------------------------- */
  .table-wrap02{
    margin: 24px 0 0;
  }
  .table-wrap02>table>tbody>tr>td{
    padding: 14px 16px;
    font-size: 1.6rem;
  }
  .table-wrap02>table>tbody>tr>th{
    padding: 16px 8px;
    font-size: 2.2rem;
  }
  /* ----------------------------------
  text-block01 -type01
  ---------------------------------- */
  .text-block01.-type01{
    margin: 44px 0 0;
  }
  /*----------------------------------------------
  fix-wrap01
  ----------------------------------------------*/
  .fix-wrap01{
    padding: 10px;
  }
  .fix-wrap01 .btn-list01{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .fix-wrap01 .btn-list01:not(.-spColumn)>.item{
    margin: 0;
    width: 49%;
  }
  .fix-wrap01 .btn-type01.-type01>.inner {
    min-height: 44px;
    font-size: 1.4rem;
    line-height: 1.3;
  }
  /* ----------------------------------
  cv-area01
  ---------------------------------- */
  .cv-area01{
    padding: 10px 18px 30px;
    box-shadow: 0 4 8px rgba(86, 99, 95, 0.15);
  }
  /* ----------------------------------
  img-wrap01
  ---------------------------------- */
  .img-wrap01>.wide01{
    max-width: 100%;
  }
  /*----------------------------------------------
  modal-content01
  ----------------------------------------------*/
  .modal-content01>.img01.-wide05>img{
    width: 207px;
  }
  .modal-content01>.img01.-wide06>img{
    width: 218px;
  }
}