/* STEP CARD */
.step-content{flex:1}
.rental-step-card .step-label{display:inline-block;font-weight:700;padding:4px 16px;color:#FFF;border-radius:999px}
.rental-step-card h3{font-size:1.6rem;margin:20px 0 30px;text-decoration:underline}

/* Key Points / Note */
.rental-step-card .note{font-size:.95rem;margin:0 0 5px;padding:15px 15px 0;background:#FFF}
.rental-step-card p{line-height:1.9}
.rental-step-card ul{margin:20px 0 30px;padding:0}
.rental-step-card ul li{display:block;position:relative;margin:0 0 10px;padding-left:1.2em;line-height:1.8}
.rental-step-card ul li:before{content:"";width:7px;height:7px;position:absolute;left:0;top:.6em;border-radius:50%}
.rental-step-card ul.asterisk-mark li:before{content:"";width:0;height:0}
.rental-step-card .key-points{width:100%;margin-top:55px;box-sizing:border-box}
.rental-step-card .key-points .circle{margin:20px 0 15px;padding:0}
.rental-step-card .key-points .circle li:before{width:6px;height:6px;top:9px}
.rental-step-card .key-points .asterisk-mark,.note .asterisk-mark{margin-top:0;margin-bottom:15px}
.rental-step-card .key-points .asterisk-mark li::before,.note .asterisk-mark li::before{content:'\0203B'!important;position:absolute;top:14px;left:0}

/* Circle */
.step-content .medium{font-size:100%;margin-top:25px;margin-bottom:40px}
.step-content .medium li:before{top:.75em}

/* STEP CARD (Common) */
.rental-step-card{margin:75px 0 0;padding:50px 25px 30px;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;flex-wrap:wrap;align-items:center;gap:25px}
.rental-step-card p{margin:0 0 20px;line-height:2}
.step-icon img{width:90px;flex-shrink:0;border-radius:50%;transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.step-icon img:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* STEP1 */
.step01{background:#F5FAFF;border:1px solid #CDEBF5}
.step01 .step-icon img{border:2px solid #4F8FD8}
.step01 .step-label,.step01 ul li:before{background:#4F8FD8}
.step01 h3{color:#336BAA}
.step01 .key-points{border-color:#4F8FD8}
.step01 .key-points .subtitle{background:#4F8FD8}
.certificate-images{width:220px;display:flex;flex-direction:column;flex-shrink:0;gap:20px}
.certificate-images img{border-radius:8px;border:1px solid #DDD}
.step01 .step-icon img:hover{box-shadow:0 0 20px #4F8FD8}

.certificate-images img{transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.certificate-images img:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 8px gray}

/* STEP2 */
.step02{background:#F7FCF7;border:1px solid #D7EEDF}
.step02 .step-icon img{border:2px solid #5FA765}
.step02 h3{color:#3D7F42}
.step02 .step-label,.step02 ul li:before{background:#5FA765}
.step02 .key-points{border-color:#5FA765}
.step02 .key-points .subtitle{background:#5FA765}
.step-illustration img{border:2px solid #5FA765;border-radius:50%}
.step02 .step-icon img:hover{box-shadow:0 0 20px #5FA765}

.circle-icon{transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.circle-icon:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 20px #5FA765}

/* STEP2 (LINE Button) */
.key-points .guide-button{margin:50px 0}
.line-color a{background:#06C755}
.line-color a:hover{color:#06C755;background:#FFF}
.line-color a:hover::after{border-left-color:#06C755}

/* STEP2 (icon) */
.step-illustration{width:220px;display:grid;grid-template-columns:repeat(2,90px);justify-content:center;gap:15px;flex-shrink:0}
.circle-icon{width:90px;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden}

/* STEP3 */
.step03{background:#FFFDF2;border:1px solid #FCE9A9}
.step03 .step-icon img{border:2px solid #D9A600}
.step03 .step-label,.step03 ul li:before{background:#D9A600}
.step03 h3{color:#8A6B00}
.step03 .key-points{border-color:#D9A600}

.step03 .key-points .subtitle{background:#D9A600}
.step03 .step-icon img:hover{box-shadow:0 0 20px #D9A600}

.payment-icon{transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.payment-icon:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 20px #D9A600}

/* STEP4 */
.step04{background:#FFF8F2;border:1px solid #F5DEC2}
.step04 .step-icon img{border:2px solid #E78B2F}
.step04 .step-label,.step04 ul li:before{background:#E78B2F}
.step04 h3{color:#A85E15}
.step04 .key-points{border-color:#E78B2F}

.step04 .key-points .subtitle{background:#E78B2F}
.step04 .step-icon img:hover{box-shadow:0 0 20px #E78B2F}

.receive-icon{transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.receive-icon:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 20px #E78B2F}

/* STEP3 / STEP4 (Common) */
.payment-icons,.receive-icons{width:180px;display:flex;flex-direction:column;gap:20px;flex-shrink:0}
.payment-icon,.receive-icon{text-align:center;padding:15px;background:#FFF;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.payment-icon img,.receive-icon img{width:85px;height:auto;display:block;margin:0 auto 10px}
.payment-icon p,.receive-icon p{font-size:90%;margin:0;line-height:1.5}

/* Process Arrow */
.guide-button.process-UP a:hover::after{border-bottom-color:#FFF}
.guide-button.process-UP a::after{border-bottom:15px solid #5A4402;transform:translateY(-60%)}
.guide-button.process-DOWN a:hover::after{border-top-color:#FFF}
.guide-button.process-DOWN a::after{border-top:15px solid #5A4402;transform:translateY(-30%)}
.guide-button.process-UP a::after,.guide-button.process-DOWN a::after{border-left:9px solid transparent;border-right:9px solid transparent}
.process-UP a,.process-DOWN a{color:#5A4402;background:#F6F2E8}
.process-UP a:hover,.process-DOWN a:hover{color:#FFF;background:#5A4402}

/* Rental Request */
.RentalRequest .TOC{margin-top:25px}
.rental-request a{color:#5A4402;background:#F6F2E8}
.rental-request a::after{border-left-color:#5A4402}
.rental-request a:hover{color:#FFF;background:#5A4402}
.rental-request a:hover::after{border-left-color:#FFF}

/*     WSXGA (1680-1050)
----------------------------------------*/
@media (max-width:1680px){

/* STEP CARD (Common) */
.rental-step-card{flex-direction:column;align-items:flex-start}
.rental-step-card h3{font-size:1.6rem;margin:20px 0 35px;padding:0 0 30px 0;text-decoration:none}
.step-icon{width:120px;margin:0 auto}
.step-icon img{width:100%}

.rental-step-card .step-content,.certificate-images,.step-illustration{width:100%}
.certificate-images{margin-top:20px;flex-direction:row}
.certificate-images img{width:50%}
.step01 h3{border-bottom:5px solid #4F8FD8}
.step02 h3{border-bottom:5px solid #5FA765}
.step03 h3{border-bottom:5px solid #D9A600}
.step04 h3{border-bottom:5px solid #E78B2F}

/* STEP2 */
.step02 .step-illustration{width:320px;margin:15px auto 0;grid-template-columns:repeat(3,90px)}

/* STEP3 / STEP4 */
.payment-icons,.receive-icons{width:100%;margin-top:15px;flex-direction:row;justify-content:center}
.receive-icon{width:180px}

}

/*     PC Laptop (1024-1439)
----------------------------------------*/
@media (max-width:1439px){

.RentalRequest  .four-rows li{width:48%}
.RentalRequest  .four-rows .line01,.RentalRequest  .four-rows .line02{margin-bottom:20px}

/* STEP4 */
.receive-icons .first{display:block}

}

/*     1280px (SONY 85inch 1280x720)
----------------------------------------*/
@media screen and (max-width:1280px){

/* STEP4 */
.receive-icons .second{display:block}

}

/*     Tablet (768-1023) *1024px or less
----------------------------------------*/
@media (max-width:1023px){

/* STEP CARD (Common) */
.rental-step-card{flex-direction:row;align-items:center}
.rental-step-card h3{margin:20px 0 0;text-decoration:underline;border-bottom:none}
.step-icon{width:90px}

/* STEP1 */
.certificate-images{width:180px;flex-direction:column}
.certificate-images img{width:100%}

/* STEP2 */
.step02 .step-illustration{width:180px;grid-template-columns:repeat(2,80px);justify-content:center;gap:15px}
.circle-icon{width:80px}

/* STEP3 */
.payment-icons{width:160px;flex-direction:column}

/* STEP4 */
.receive-icons{width:160px;flex-direction:column}
.receive-icon{width:auto}

}

/*     Tablet (Breakpoint)
----------------------------------------*/
@media (max-width:780px){

/* STEP CARD (Common) */
.rental-step-card{padding:30px 20px 25px;flex-direction:column;align-items:flex-start;gap:20px}
.rental-step-card .step-icon{margin:0 auto}
.rental-step-card h3{font-size:1.6rem;margin:20px 0 35px;text-decoration:none}
.step-icon{width:120px}
.step01 h3{border-bottom:5px solid #4F8FD8}
.step02 h3{border-bottom:5px solid #5FA765}
.step03 h3{border-bottom:5px solid #D9A600}
.step04 h3{border-bottom:5px solid #E78B2F}

/* STEP1 */
.certificate-images{width:100%;flex-direction:row;gap:20px}

/* STEP2 */
.step02 .step-illustration{width:100%;grid-template-columns:repeat(3,70px);justify-content:center;gap:20px 30px}

/* STEP3 / STEP4 (Common) */
.payment-icons,.receive-icons{width:100%;flex-direction:row;justify-content:center;gap:20px}
.payment-icon,.receive-icon{width:50%;padding:15px 5px}

.step-icon img{width:200px}

}

/*     640px (Breakpoint)
----------------------------------------*/
@media screen and (max-width:640px){

.rental-step-card{position:relative;margin:75px 0 0;padding:40px;border:none;border-radius:0;box-shadow:none;background:none}
.rental-step-card:before{content:"";width:100vw;height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:-1}
.step01:before{background:#F5FAFF}
.step02:before{background:#F7FCF7}
.step03:before{background:#FFFDF2}
.step04:before{background:#FFF8F2}
.rental-step-card .step-label{width:auto;display:block;text-align:center;margin:10px auto 40px}

.step01,.step02,.step03,.step04{width:100vw;left:50%;transform:translateX(-50%);align-items:center;justify-content:center}

.step01{box-shadow:0 -5px 10px 0 rgba(79,143,216,.45),0 5px 10px 0 rgba(79,143,216,.45)}
.step02{box-shadow:0 -5px 10px 0 rgba(95,167,101,.45),0 5px 10px 0 rgba(95,167,101,.45)}
.step03{box-shadow:0 -5px 10px 0 rgba(217,166,0,.45),0 5px 10px 0 rgba(217,166,0,.45)}
.step04{box-shadow:0 -5px 10px 0 rgba(231,139,47,.45),0 5px 10px 0 rgba(231,139,47,.45)}

/* STEP1 */
.certificate-images{gap:15px}

}

/*     Smartphone Portrait (Bootstrap 5)
----------------------------------------*/
@media (max-width:575.98px){

.rental-step-card{padding:40px 25px 30px}

}

/*     440px (iPhone17 Pro Max 440x956)
----------------------------------------*/
@media screen and (max-width:440px){

.rental-step-card{padding:40px 20px 25px}
.rental-step-card h3{font-size:1.4rem;text-align:center}

/* STEP1 */
.certificate-images{flex-direction:column;gap:20px}
.certificate-images img{width:100%}

}

/*     390px (iPhone13 Pro 390x844)
----------------------------------------*/
@media screen and (max-width:390px){

.rental-step-card{padding:40px 15px 20px}

}

/*     360px (Xperia 10 360x840)
----------------------------------------*/
@media screen and (max-width:360px){

.rental-step-card h3{font-size:1.3rem}

}