/*This style sheet is only for "how-to buy" pages.*/


/***** 全ページ共通：見出し*****/

.for-sp {
    display: none;
}

/*"HtoB" mean page name:"how to buy"*/
.HtoB-title {
    display: flex;
}
.HtoB-title div:nth-child(1) {
    width: 60%;
    margin: auto 0;
}
.HtoB-title div:nth-child(2) {
    width: 39%;
    margin: 1.04% 0;
}

.HtoB-subtitle {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    padding: 0.5% 0 0.5% 1%;
}
.HtoB-subtitle:before{
    background-color: rgb(254 254 255 / 38%);
    content: '';
    display: block;
    transform: rotate(12deg);
    position: absolute;
    bottom: -1vw;
    right: -8vw;
    width: 74vw;
    height: 17vw;
}

.HtoB-subtitle1 {
    background-color: #035d9c;
}
.HtoB-subtitle2 {
    background-color: #d62d0b;
}
.HtoB-subtitle3 {
    background-color: #12793c;
}
.HtoB-subtitle4 {
    background-color: #bf007c;
}


/*step*/
.HtoB-step {
    position: relative;
    width: min(15vw, 7rem);
    height: min(12vw, 6.2rem);
    margin: 2% 1% 1.5% 0;
    border-radius: 50%;
    background-color: #249ec9;
}
    
.HtoB-step p {
    position: absolute;
    left: 0;
    top: 16%;
    margin: 0 1% 0;
    width: 100%;
    color: #fff;
    font-weight: 800;
    transform: scale(1.1, 0.9);
    text-align: center !important;
}

.HtoB-step1 {
    background-color: #249ec9 !important;
}
.HtoB-step2 {
    background-color: #f25333 !important;
}
.HtoB-step3 {
    background-color: #1aa351 !important;
}
.HtoB-step4 {
    background-color: #d83298 !important;
}

.HtoB-title h1 {
    font-size: min(6.4vw,59px);
    font-weight: 800;
}

.step-number {
    font-size: min(6vw, 42px) !important;
    padding-top: 8%;
}

.step-title h2 {
    font-size: min(6.0vw,55px);
    font-weight: 800;
    margin-bottom: 0;
}
.HtoB-subtitle p,.step-title p {
    font-size: min(3.5vw,18px) !important;
    font-weight: 700;
    padding-left: 1.35%;
}

.contner-steptitle {
    display: flex;
    margin: 3% 0 4% 0;
}
.contner-steptitle div:nth-child(2) {
    width: 65%;
    padding-top: 1%;
}
.contner-steptitle div:nth-child(3) {
    width: 30%;
}

/*step list*/
.step-list {
    list-style-type: none;
}
.step-list li {
    font-size: min(1.65vw,14px);
    background-color: #d1d1d1;
    border-top-left-radius: 0.75em;
    border-bottom-left-radius: 0.75em;
    margin: 1.5% 0;
    padding: 1% 0 1% 7%;
    width: 90%;
    float: right;
}
.step-list li:first-child {
    margin-top: 0;
}
.step-list li:last-child {
    margin-bottom: 0;
}
.step-list li a {
    color: #000;
}
.step-list li a:hover {
    opacity: 0.5 ;
}

.step-here {
    width: 105% !important;
    font-size: min(2vw,16px) !important;
    font-weight: 800;
    padding: 1.5% 0 1.5% 7% !important;
}
.step-here a {
    color: #FFF !important;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

/***** 全共通：画像サイズ *****/
.resizeimage img {
    max-width: 100% !important;
}


/***** 全共通：div幅設定 *****/
.w-50 div {
    width: 50%;
}

/***** 全共通：指定の無い内文字設定 *****/
.HtoB, .HtoB p, .HtoB li {
    font-size: min(3.5vw, 14px);
    word-break: break-all;
    text-align: left;
}


/****** container共通設定 ******/
/*wrap-flex,step-container1は各ページで使用中*/
.wrap-flex,.step-container1,.step1-container2,.step1-container4,.box-comparison,
.step2-container2,.step2-container3 {
    display: flex;
    margin-bottom: 3%;
}


/***** 全共通：ページ送り *****/
.page-numbers {
    width:60%;
    margin: 10% auto 20%; /*20%は完成時に調節または削除*/
}
.page-numbers a,.page-numbers a:hover {
    color:#FFF;
}
.page-numbers ul {
    display: flex;
    list-style: none;
    justify-content: center;
    margin-left: 0;
}
.page-numbers li {
    color: #FFF;
    background-color: #bfbfbf;
    font-size: min(3.15vw,17px);
    font-weight: 800;
    border-radius: 0.15em;
    padding: 0.5% 2%;
    margin: 0 0.5%;
}
.page-numbers li:hover {
    background-color: #939393;
}
.page-numbers p {
    color: #FFF;
    font-size: min(4.3vw,18px);
    font-weight: 800;
    text-align: center;
    border-radius: 2em;
    padding: 1.25% 2% 1%;

}
.page-numbers p:hover {
    opacity: 0.85;
}
.col-step1:hover {
    background-color: #249ec9 !important;
}
.col-step2:hover {
    background-color: #f25333 !important;
}
.col-step3:hover {
    background-color: #1aa351 !important;
}
.col-step4:hover {
    background-color: #d83298 !important;
}


/************ STEP1 ************/

/*STEP1 見出し共通設定*/
.step1-right h2,.step1-container3 h2,.wrap-merit h2 {
    color: #259ec9;
    font-size: min(2.2vw,22px);
    font-weight: 800;
}
.step1-right h2,.wrap-comparison h2,.wrap-comparison h3,.wrap-comparison p,.wrap-merit h2 {
    text-align: center;
}

/*STEP1 その他各共通設定*/
.step1-container2 h3,.step1-container2 h4,.wrap-comparison h3,.wrap-comparison h2,.wrap-comparison p {
    font-weight: 800;
}
.step1-container2 h4,.step1-container2 p {
    text-align: left;
}
.step1-container2 h4,.wrap-comparison h3 {
    font-size: 1.95vmin;
    padding: 5% 0 4% 0;
}
.HtoB-title p {
    font-size: min(2.8vw,14px);
    line-height: 1.3;
    margin-bottom: 0;
    overflow: hidden;
}

/*STEP1 各設定*/
.step1-right section {
    padding-left: 4%;
}
.step1-right h2{
    margin-bottom: 3%;
}

.topic-service {
    background-color: #259ec9;
    color: #FFF;
    font-size: 2.5vmin;
    font-weight: 700;
    text-align: center;
    padding: 0.5%;
}

.step1-container2 div {
    width: 33%;
    border: 1px solid #b3b3b3;
    text-align: center;
    margin: 1%;
    padding: 1.75%;
}

.step1-container3 {
    margin-bottom: 5%;
}
.step1-container3 h2 {
    margin-bottom: 1%;
}

.step1-container4 div {
    width: 100%;
}

.wrap-comparison {
    height: fit-content;
    background-color: #e2e1db;
    padding: 1%;
    margin: 0 3% 2% 0;
    border-radius: 2em;
}
.wrap-comparison h2 {
    color: #259ec9;
    font-size: min(5.0vw, 24px);
    margin: 0;
}

.box-comparison div {
    background-color: #259ec9;
    color: #FFF;
    margin: 0 2%;
    padding: 0 2.5%;
}
.box-comparison p {
    font-size: min(3vw,12px);
    line-height: 1.25em;
    font-weight: 700;
}

.wrap-merit h2 {
    margin-bottom: 3.5%;
}
/*追加：選ぶポイント*/
.step1-container5 {
    display: flex;
    flex-wrap: wrap;
}
.step1-container5 div {
    width: 31%;
    border: 1px solid #b3b3b3;
    border-radius: 25px;
    padding: 2% 1.5%;
    margin: 0 auto;
    text-align: center;
}
.step1-container5 div:last-child {
    width: 98%;
    margin: 1.5% auto 3% auto;
}
.step1-container5 p:nth-child(4) {
    padding: 2% 3% 2% 1.25%;
}
.step1-container5 img {
    width: min(65vw,250px);
    margin: 5% auto;
}
.list-insure {
    display: flex;
    list-style: none;
    margin: 0;
}
.list-insure li {
    width: 30%;
    background: #b9dfeb2e;
    margin: 0 1.25%;
}
.list-insure h5 {
    background: #fafafa;
    color: #2b9ec9;
    font-size: min(3.8vw,17px);
    font-weight: 700;
    padding-bottom: 0.5%;
    margin-bottom: 0;
    text-align: center;
    border-bottom: 5px solid #b9dfeb;
}
.list-insure p {
    padding: 3.5% 5% 1% 5%;
    margin-top: 0;
}
.step1-container5 h3,.step1-container5 h4 {
    font-weight: 700;
    text-align: center;
}
.step1-container5 h4 {
    font-size: min(4vw,14px);
    margin: 3% auto;
}
.center {
    text-align: center !important;
}




/************ STEP2 ************/

/*STEP2 共通設定*/
.step2-point,.step2-container2 h2,.step2-container2 h3,.step2-container2 span,.step2-container3 span,.step2-left h2,.step2-right ul {
    color: #f25333;
    font-weight: 700;
}

.step2-right ul,.step2-left h3 {
    font-weight: 700;
}

.step2-container2 h2,.step2-left h4,.step2-container3 h3,.step2-check {
    color: #FFF;
}

.step2-container2 h2,.step2-container3,.step2-container3 h3 {
    border-radius: 1.0em;
}

/*STEP2 各設定*/

.step2-point,.step2-container2 h3,.step2-container2 h2,.step2-container3 h2 {
    font-size: min(4vw,21px);
}
.step2-point {
    border-top: 4px solid #f25333;
    border-bottom: 4px solid #f25333;
    margin-bottom: 2%;
    text-align: center;
    padding: 0.35% 0;
}

.step2-container2 {
    flex-wrap: wrap;
}
.step2-container2 div {
    width: 50%;
    padding: 2%;
    text-align: center;
}
.step2-container2 div:nth-child(odd) {
    border-right: 1px solid #b3b3b3;
}
.step2-container2 div:nth-child(n+3) {
    border-top: 1px solid #b3b3b3;
    padding-top: 2%;
}

.step2-container2 h2 {
    background-color: #f25333;
    margin-bottom: 3%;
    padding: 0.25%;
}
.step2-container2 h3 {
    margin: 3% 0;
}
.step2-container2 p {
    text-align: left;
    padding: 3%;
    margin-bottom: 0;
}

.step2-left {
    padding-right: 3%;
    margin: auto;
}
.step2-left h4 {
    background-color: #f25333;
    font-weight: 800;
    padding: 5%;
    text-align: center;
}

.step2-right ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none; 
    font-size: 1.45vmin;
    margin: 0 auto;
    padding-top: 3%;
}
.step2-right li {
    width: 33%;
}

.step2-container3 {
    background-color: #ffe4df;
    padding: 2%;
}

.step2-container3 div {
    width: 50%;
    padding: 2%;
}

.step2-container3 h2 {
    font-weight: 800;
    text-align: center;
    margin: 0 0 2%;
}

.step2-container3 h3 {
    background-color: #881b05;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4%;
    padding: 0.5% 0;
}

.step2-container3 ul {
    width: 80%;
    list-style-type: none!important;
    font-size: 1.7vmin;
    margin: 0 auto;
}

.step2-container3 ul li:before {
    font-family: "FontAwesome";
    content: "\f138";
    margin-right: 1.8%;
}

.step2-check {
    background-color: #f25333;
    font-weight: 800;
    width: fit-content;
    border-radius: 1.5em;
    margin: 0;
    padding: 0.5% 2%;
}




/********** STEP3 **********/
/*共通設定*/
.bl-contract3 h2,.step3-heading h2,.step3-container h3 {
    color: #1aa351;
}
.bl-contract2 h2,.bl-contract3 h2,.step3-heading h2,.bl-contract4 span,.step3-payment h3,.step3-container h2,.step3-container h3,.step3-container2 h2 {
    font-weight: 800;
}
.bl-contract3 p, .step3-heading p,.type-loan h4 {
    font-weight: 700;
}

/*各設定*/
.step3-point {
    margin-bottom: 2.25rem;
}
.step3-payment p,.step3-point p {
    padding: 0 1%;
}
.bl-contract2 h2,.bl-contract3 h2,.step3-heading h2,.step3-container2 h2 {
    font-size: min(4.5vw,22px);
}
.step3-container {
    display: flex;
    flex-wrap: wrap;
}
.step3-container h2 {
    font-size: min(4vw,18px);
    line-height: 1.25;
    margin-bottom: 0;
}
.step3-container h3 {
    margin: 0.15rem 0 0.75rem;
    font-size: min(3.65vw,16px);
}
.step3-container p {
    margin-bottom: 0;
    line-height: 1.15rem;
}
.step3-container dl {
    display: flex;
    flex-wrap: wrap;
    margin: 2% 0;
}
.step3-container dl dt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%;
    font-size: min(4.65vw,19px);
    padding: 2%;
    margin: 0 2.5% 5% 0;
    letter-spacing: 0.25rem;
    text-align: center;
    border-right: 1px solid #333;
}
.step3-container dl dd {
    width: 75%;
    padding-bottom: 2%;
    margin-bottom: 3%;
}
.step3-container dl dd > section {
    padding: 2%;
    border-bottom: 1px dashed #aba9a9;
}
.step3-container dl dd > div {
    padding: 2%;
}
.step3-container dl dd > section:last-child {
    border-bottom: 0;
}
.step3-subheading:last-of-type > .step3-container > dl > dt {
    font-size: min(4.65vw,18px);
    letter-spacing: 0;
}
.step3-subheading:last-of-type > h2:first-of-type {
    background: #f6eae5;
    color: #c44a42;
}
.btn-link {
    width: 50%;
    background-color: #dbede6;
    border-radius: 7px;
    font-weight: 800;
    margin: 4% 0 0;
    padding: 2% 7%;
    text-align: center !important;
}
.btn-link::before{
    opacity: 0.7;
}
.btn-link:before {
    font-family: "FontAwesome";
    content: "\f0a9";
    font-weight: normal;
    margin-right: 1%;
    color: #1976d1;
}

/*追加*/
.bl-contract2 p,.bl-contract3 p,.step3-heading p {
    margin-bottom: 0;
 }
.bl-contract2 {
    margin-left: 2%;
}
.step3-order {
    display: grid;
    grid-template-rows: min(11vw,63px) 1fr;
    grid-template-columns: min(34vw,300px) 1fr;
    padding: 0 1%;
    margin-bottom: 4%;
}
.order-1 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.order-2 {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
.order-3 {    
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.bl-contract2 section {
    background: #dff5e8;
    padding: 2% 2.5%;
    margin-top: 2%;
    border-radius: 17px;
    text-align: center;
}
.bl-contract2 h2 {
    color: #0e4823;
    margin-bottom: 2%;
}
.step3-heading {
    border-top: 5px solid #1aa351;
    border-bottom: 5px solid #1aa351;
    padding: 0.5% 2%;
}
.step3-heading h2 {
    width: 35%;
    text-align: center;
    margin: auto;
}
section.wrap-flex.step3-heading p {
    width: 100%;
    font-size: min(3.5vw,15px);
    line-height: 1.35;
}
.bl-contract4 div {
    width: 50%;
    padding: 0 3%;
    margin: 0 auto;
}
.bl-contract4 .annotation{
    font-size: min(3.15vw,13px);
    padding-left: 4%;
}
.bl-contract4 ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 3%;
}
.bl-contract4 li {
    width: 50%;
    border-bottom: 2px solid #dbdada;
    padding: 1% 0 1% 4%;
}
.step3-payment {
    margin-bottom: 5%;
}
.step3-payment h3 {
    width: fit-content;
    color: #FFF;
    background: #26a351;
    font-size: min(5vw,17px);
    border-radius: 19px;
    padding: 0.25rem 1rem;
    margin-top: 3%;
}
.type-loan section {
    width: 30%;
    background: #dff5e8;
    padding: 1.5%;
    margin: 0 2%;
    border-radius: 7px;
}
.type-loan h4 {
    width: fit-content;
    color: #0e4823;
    font-size: min(4.5vw,18px);
    margin: 0 auto 13px;
}

.step3-subheading > h2:first-of-type {
    background: #dff5e8;
    color: #0e4822;
    font-size: min(4.75vw,21px);
    font-weight: 700;
    padding: 0.55rem 1%;
    text-align: center;
    border-radius: 5px;
}
.step3-caution {
    display: flex;
    background: #f0f0f0;
    padding: 2%;
    border-radius: 10px;
}
.step3-caution h2 {
    color: #c44a42;
    font-size: min(3.65vw,24px);
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
}
.step3-caution h2:before {
    font-family: "FontAwesome";
    content: "\f071";
    font-weight: normal;
    margin-right: 0.5%;
}
.step3-caution figcaption {
    width: 25%;
    margin-left: 2%;
    float: right;
}
.btn-link.custom {
    width: 50%;
    padding: 2%;
    margin: 5% auto 0 0;
}



.bl-figure-cost {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bl-figure-cost fieldset {
    display: flex;
    justify-content: center;
    color: #333;
    font-weight: 700;
    border-radius: 10px;
    text-align: center;
}
.bl-figure-cost fieldset:first-of-type {
    width: 50%;
    border: 6px solid #71bac6;
}
.bl-figure-cost fieldset:last-of-type {
    width: 40%;
    padding: 0.25rem 0.5rem 0.75rem 0.5rem;
    border: 6px solid #c3bc80;
}
.bl-figure-cost legend {
    font-size: min(4vw,21px);
    font-weight: 800;
    padding: 0 10px !important;
    letter-spacing: 0.25rem;
}
.circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dbede6;
    padding: 19%;
    border-radius: 50%;
    margin: 0 3% 4%;
  }
  .circle-inner {
    position: absolute;
  }

.circle-inner div {
    width: 10vw;
    max-width: 100px;
    margin: 10% auto 0;
}
.circle-inner ul {
    margin: 5% auto;
    width: fit-content;
}
.circle-inner ul > li {
    font-size: min(1.35vw,16px);
}
.circle-inner > p {
    font-size: min(2.2vw,21px);
    font-weight: 700;
    padding: 0 1rem !important;
    margin-bottom: 3px;
    text-align: center;
    border-bottom: 5px solid #95c1a5;
}

.wrap-plus {
    font-size: min(6vw,34px);
    margin: 0 2%;
}
.bl-figure-cost fieldset:last-of-type > div > p {
    font-size: min(1.85vw,16px);
    line-height: 1.25;
    margin-bottom: 12%;
}
.bl-figure-cost fieldset:last-of-type > div > ul::before {
    position: absolute;
    top: -26px;
    left: -32px;
    content: "例えば";
    background: #dbede6;
    padding: 0.5% 3%;
    border-radius: 10px;
}
.bl-figure-cost fieldset:last-of-type > div > ul {
    position: relative;
    width: fit-content;
    margin: 2rem auto 0;
}
.bl-figure-cost fieldset:last-of-type > div > ul li {
    font-size: min(2vw, 16px);
    margin: 0 auto;
    padding: 1% 0;
}





/********** STEP4 **********/
/*共通設定*/
.step4-left,.step4-right {
    width: 49%;
    margin: 0 auto;
}

.step4-container1 h2,.step4-container1 h3,.step4-left h4,.step4-right h5,.step4-right2 h4,.step4-box h3 {
    font-weight: 800;
}
.list-insurance h5,.list-insurance li:nth-child(odd),.step4-box li:nth-child(odd),.step4-box li:nth-child(even),
.step4-box p {
    font-weight: 700;
}
.step4-left h4,.list-insurance h5,.step4-box h3,.step4-box p,.step4-box li:nth-child(even) {
    color:#FFF;
}
.step4-box,.list-insurance h5,.step4-box li:nth-child(odd),.step4-right .carshop-list li {
    border-radius: 1.25em;
}

/*各設定*/
.step4-container1 {
    width: 100%;
    display: inline-flex;
    margin: 0 0 2.5%;
}
.step4-container1 h2 {
    width: 100%;
    color: #d83298;
    font-size: min(5vw, 26px);
    border-bottom: 7px solid #d83298;
    padding: 0 1%;
}
.step4-left {
    padding-right: 1%;
    margin: 0 auto;
}
.step4-left h3 {
    font-size: min(4vw,21px);
    font-weight: 700;
    margin-bottom: 4%;
    text-align: center;
}
.step4-left h4 {
    background-color: #d83298;
    text-align: center;
    padding: 1%;
    margin: 8% 0 4% 0;
}
.list-insurance h5 {
    width: 45%;
    background-color: #d83298;
    text-align: center;
    padding: 0.5%;
}
.list-insurance ul {
    width: 95%;
    margin: 0 auto;
    list-style: none;
}
.list-insurance li:nth-child(odd) {
    color:#d83298;
    font-size: min(3.8vw,18px);
    margin-top: 3.5%;
}
.list-insurance li:nth-child(even) {
    line-height: 1.25em;
    margin: 0;
}
.step4-box {
    background-color: #a51c68;
    text-align: center;
    padding: 4% 2%;
    margin-top: 2%;
}
.step4-box h3 {
    font-size: min(4.5vw,28px);
}
.step4-box p {
    border-bottom: 1px solid #fff6;
    padding-bottom: 4%;
    text-align: center !important;
}
.step4-box ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.step4-box li:nth-child(odd) {
    width: 35%;
    background-color: #FFF;
    text-align: center;
    margin: 4% 2% 4% 0;
    padding: 0.5% 1.5%;
}
.step4-box li:nth-child(even) {
    width: 60%;
    font-size: min(1.75vw,13px);
    line-height: 1.25em;
    text-align: left;
    margin: auto 0;
}
.bl-space {
    margin-top: 5%;
}
.deli-list {
    width: 90%;
}
.deli-list li:first-child{
    font-weight: 700;
    list-style-type: none;
    margin-left: 0;
}

.deli-list li {
    margin-left: 5%;
}

.carshop-list {
    display: flex;
    flex-wrap: wrap;
}
.carshop-list li {
    background: #FFF;
    width: 46%;
    list-style-type: none;
    border: 2px #c4c4c4 solid;
    padding: 3% 2% 3% 4%;
    margin-bottom: 4%;
    text-align: center;
}
.carshop-list li:nth-child(odd) {
    margin-right: 5%;
}
.carshop-list li a{
    display: block;
    height: 100%;
    width: 100%;
    color: #3f3f3f;
    font-weight: 700;
}
.carshop-list li img {
    width: 30%;
    margin-right: 6%;
}
.carshop-list li:hover {
    filter: drop-shadow(1px 1px 3px #cfcfcf);
    background: #fdfdfd;
}
.img-accident {
    padding: 5%;
}
.step4-point {
    display: flex;
    background: #fcd2eb;
    border-radius: 9px;
    padding: 2%;
}
.step4-point p {
    color: #3a3839;
    font-weight: 700;
    margin: auto 0 !important;
}
.step4-point p:first-child {
    margin-right: 1%;
}


/************* レスポンシブ *************/

@media screen and (max-width: 900px) {
    /***共通 stepパーツ***/
    .contner-steptitle div:nth-child(3) {
        width: 39%;
    }
}

@media screen and (max-width: 771px) {
    /*step1*/
    .step1-container5,.list-insure {
        flex-direction: column;
    }
    .step1-container5 div {
        width: 97%;
        padding: 2.5%;
        margin: 1% auto;
    }
    .step1-container5 h3 {
        font-size: min(5vw,23px);
    }
    .step1-container5 p:nth-child(4) {
        margin: 2% 0 1% 0;
    }
    .topic-choicepoint {
        width: 99%;
        padding: 2% 3%;
        margin: 5% 0 3% 0;
    }
    .topic-choicepoint:before {
        text-shadow: none;
    }
    .list-insure li {
        width: 85%;
        margin: 2% auto 3% auto;
    }
    
    /*step3*/
    .order-3 {
        margin-top: 2%;
    }
    .type-loan {
        flex-wrap: wrap;
        margin-top: 4%;
    }
    .type-loan section {
        width: 46%;
        margin: 0 auto 2.8% auto;
    }
    .type-loan h4 {
        margin: 0 auto;
    }
    .type-loan>section:last-child {
        width: 96%;
    }
    .step3-payment section {
        padding: 3% 1% 0;
    }

    /*step4*/
    .step4-box li:nth-child(odd) {
        width: 60%;
        margin: 5% 2% 2% 0;
    }
    .step4-box li:nth-child(1) {
        margin-top: 1%;
    }

    .step4-box li:nth-child(even) {
        width: 98%;
    }
}



@media screen and (max-width:648px) {

    /*** 共通 ***/
    .HtoB p {
        margin-bottom: 0 !important;
    }

    .step1-right,.step1-container3 p,.wrap-merit p,.step2-left,.step2-left p,.step3-payment p,.step3-point p {
        padding: 3%;
    }
    .HtoB-title,.step-container1,.step1-container2,.step1-container4,.step2-container2,.step2-container3,.for-sp,.wrap-flex { 
        display: block;
    }
    .HtoB-title {
        margin-bottom: 3%;
    }
    .HtoB-title p {
        margin: 0 1%;
    }
    .HtoB-title h1 {
        font-size: 10.5vmin;
        text-align: center;
        margin: 0;
    }
    .w-50 div,.HtoB-title div:nth-child(1),.HtoB-title div:nth-child(2),.step1-container2 div {
        width: 100%;
    }
    .contner-steptitle {
        margin: 0;
    }
    .contner-steptitle div:nth-child(2) {
        width: 70%;
        padding-top: 3.5%;
    }
    .contner-steptitle div:nth-child(3) {
        width: 45%;
    }
    .step-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 5% 0;
    }
    .step-list li,.step-list li:first-child,.step-list li :last-child,.step-here {
        font-size: min(3vw,12px);
        border-radius: 0;
        width: 24% !important;
        margin: 0.5% !important;
        padding: 0 0 0 1% !important;
    }
    .HtoB-step {
        width: 15vmin;
        height: 15vmin;
    }
    .step-number {
        font-size: 6vmin !important;
        padding-top: 19%;
    }
    .for-pc {
        display: none;
    }

    /*** ページ送り ***/
    .page-numbers {
        width: 90%;
    }
    .page-numbers p {
        padding: 1.5% 2% 1.25%;
    }
    .page-numbers ul {
        margin: 3% auto;
    }
    .page-numbers li {
        background-color: #939393;
        padding: 1% 2%;
    }


    /*** STEP1 ***/
    .step1-right h2 {
        font-size: min(4.2vw,21px);
        margin: 5% 3%;
    }
    .step1-container3 h2,.step1-container2 h4,.wrap-comparison h3  {
        font-size: 4vmin;
        text-align: center;
        margin-top: 4%;
        padding: 0;
    }
    .wrap-merit h2 {
        font-size: 5vmin;
        margin: 4% 0 0%;
    }
    .step1-right section {
        padding-left: 0;
    }
    .step1-container2 h3,.topic-service {
        font-size: min(5vw,23px);
        padding: 1% 0;
    }
    .step1-container2 div {
        margin: 0 auto 3%;
        width: 97%;
    }
    .step1-container2 img {
        width: 50% !important;
    }
    .box-comparison p {
        padding-bottom: 3%;
    }
    .list-insure p {
        padding: 3.5% 5%;
    }

    /*** STEP2 ***/
    .step2-container2 div,.step2-container3 div {
        width: 100%;
        border-style: none !important;
    }
    .step2-container2 figure {
        width: fit-content;
        margin: 1% auto;
    }
    .step2-container2 h3 {
        margin: 2% 0 0;
    }
    .step2-left h2 {
        font-size: min(4.5vw,28px);
    }
    .step2-left h3 {
        font-size: min(3.5vw,18px);
        margin-bottom: 0;
    }

    /*** STEP3 ***/
    .step3-order {
        display: flex;
        flex-direction: column;
        margin-bottom: 8%;
        text-align: center;
    }
    .step3-order img {
        width: 65%;
    }
    .order-1 {
        order: 1;
    }
    .order-2 {
        order: 2;
    }
    .order-3 {
        order: 3;
    }
    .step3-container div {
        width: 100%;
        border-top: 1px solid #b3b3b3;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        padding: 5% 2%;
    }
    .type-loan section {
        width: 96%;
    }
    .bl-contract4 div {
        width: 96%;
    }
    .step3-heading {
        margin-top: 8%;
    }
    .step3-heading h2 {
        width: auto;
        margin: 1% auto 1.5%;
    }
    .step3-caution figcaption {
        width: 50%;
    }
    .btn-link.custom {
        width: 100%;
    }
    .step3-subheading > h2:first-of-type {
        border-radius: 0;
    }
    .bl-figure-cost fieldset:first-of-type, .bl-figure-cost fieldset:last-of-type {
        width: 90%;
    }
    .bl-figure-cost {
        flex-direction: column;
    }
    .circle-inner div {
        width: 15vw;
    }
    .circle-inner > p {
        font-size: min(3.9vw,18px);
    }
    .circle-inner ul > li {
        font-size: min(2.75vw,18px);
    }
    .bl-figure-cost fieldset:last-of-type > div > p,
    .bl-figure-cost fieldset:last-of-type > div > ul li  {
        font-size: min(3.5vw,18px);
    }
    .bl-figure-cost fieldset:last-of-type > div > p {
        padding: 0;
    }
    .step3-container dl {
        flex-direction: column;
    }
    .step3-container dl dt {
        width: 92%;
        margin: 0 auto;
        border-right: 0;
        border-bottom: 3px solid #d2d2d2;
        padding-bottom: 0;
    }
    .step3-container dl dd {
        width: 90%;
        margin: 0 auto 1%;
    }
    .step3-container dl dd > section {
        padding: 6% 3%;
    }
    .step3-subheading:last-of-type > p:first-of-type {
        margin: 1% 3% 1.5% !important;
    }
    .btn-link {
        width: 100%;
    }
    .step3-caution {
        width: 98%;
        margin: 0 auto;
    }


    
    /*** STEP4 ***/
    .step4-container1 h2 {
        text-align: center;
        white-space: nowrap;
        padding: 1.15% 4% 1%;
    }
    .step4-left,.step4-right {
        width: 100%;
        padding: 2%;
    }
    .step4-left h4{
        margin: 4% 0;
    }
    .step4-left img {
        margin: 2% 0;
    }
    .step4-arrow {
        display: none;
    }
    .step4-box {
        width: 100%;
        margin: 0;
    }
    .step4-box li:nth-child(even) {
        font-size: min(3.2vw,15px);
    }
    .step4-box li:nth-child(1) {
        margin-top:5%;
    }
    .step4-box ul {
        margin-left: 3%;
    }
    .list-insurance h5 {
        width: 100%;
    }
}