.construction{
    background:#f4f4f4;
    padding:0 0 80px;
	padding-top: 8em;
}

.construction-flow{
    background:#ececec;
    text-align:center;
    padding:40px 20px 30px;
}
.construction-navi {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
	color: #949494;
}
.construction-flow-title{
    font-size:60px;
    line-height:1;
    font-weight:700;
    color:#18396f;
    letter-spacing:3px;
    margin:0;
}

.construction-flow-subtitle{
    margin-top:10px;
    font-size:16px;
    color:#18396f;
    font-weight:700;
}

.construction-inner{
    max-width:1200px;
    margin:0 auto;
    padding:50px 30px 0;
}

.construction-main-title{
    text-align:left;
    color:#18396f;
    font-size:3.5rem;
    font-weight:700;
    margin-bottom:50px;
    line-height:1.5;
}
.construction-btn-wrap img {
    text-align: center;
    margin: 0 auto;
}

.construction-step{
    display:flex;
    gap:18px;
    margin-bottom:24px;
    align-items:flex-start;
	border: 2px solid #18396f;
    border-radius: 10px;
}

.construction-step-number{
    width:78px;
    height:78px;
    border-radius:50%;
    background:#18396f;
    color:#fff;
    flex-shrink:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
	margin-top: 10px;
    margin-left: 10px;
}

.construction-step-number span{
    font-size:12px;
    line-height:1;
}

.construction-step-number strong{
    font-size:28px;
    line-height:1;
    margin-top:5px;
}

.construction-step-body{
    flex:1;
    border-radius:12px;
    padding:18px 28px 28px;
}

.construction-step-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.construction-step-head h4{
    font-size:32px;
    color:#18396f;
    font-weight:700;
    margin:0;
}

.construction-free{
    background:#d53145;
    color:#fff;
    padding:8px 22px;
    border-radius:4px;
    font-size:20px;
    font-weight:bold;
    line-height:1;
}

.construction-step-content{
    display:flex;
    gap:30px;
}

.construction-step-image{
    width:240px;
    flex-shrink:0;
}

.construction-step-image img{
    width:100%;
    display:block;
}

.construction-step-text{
    flex:1;
    font-size:16px;
    line-height:2;
    color:#333;
}

.construction-btn-wrap{
    text-align:center;
    margin-top:60px;
}

.construction-btn{
    display:inline-block;
}

.construction-btn img{
    max-width:540px;
    width:100%;
    display:block;
}

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

    .construction{
        padding-bottom:50px;
    }

    .construction-flow{
        padding:25px 15px;
    }

    .construction-flow-title{
        font-size:36px;
    }

    .construction-flow-subtitle{
        font-size:12px;
    }

    .construction-inner{
        padding:30px 15px 0;
    }

    .construction-main-title{
        font-size:26px;
        text-align:left;
        margin-bottom:30px;
    }

    .construction-step{
        display:block;
        position:relative;
        margin-bottom:18px;
    }

    .construction-step-number{
        position:absolute;
        left:10px;
        top:10px;
        width:62px;
        height:62px;
        z-index:2;
    }

    .construction-step-number span{
        font-size:10px;
    }

    .construction-step-number strong{
        font-size:20px;
    }

    .construction-step-body{
        padding:14px;
    }

    .construction-step-head{
        margin-left: 100px;
        margin-bottom: 12px;
        margin-top: 20px;
    }

    .construction-step-head h4{
        font-size:22px;
    }

    .construction-free{
        font-size:18px;
        padding:5px 10px;
    }

    .construction-step-content{
        display:block;
    }

    .construction-step-image{
        width:240px;
        margin:40px auto 18px;
    }

    .construction-step-text{
 		font-size: 14px;
        line-height: 1.8;
        font-weight: 600;
    }

    .construction-btn-wrap{
        margin-top:35px;
    }

	.construction-navi {
		margin: 20px;
		font-size: 14px;
	}
	#header2021 a, #nav2021 a{
		width: 100%;
	}
}