*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Noto Sans JP',sans-serif;

    background:
        linear-gradient(
            to bottom,
            #f5f8fc,
            #edf3f9
        );

    color:#333;

    line-height:2;
}

.hero-header img{

    width:100%;

    display:block;
}

.main-wrapper{

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;
}

.content-card{

    background:white;

    border-radius:28px;

    padding:60px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.08);
}

.welcome{

    color:#567;

    font-weight:700;

    margin-bottom:15px;
}

.title-row{

    display:flex;

    align-items:center;

    gap:25px;
}

.title-row h1{

    font-size:3rem;

    color:#0d2f63;
}

.pc-image{

    width:220px;

    flex-shrink:0;
}

.pc-image img{

    width:100%;

    border-radius:20px;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.2);
}

.lead{

    margin-top:30px;

    border-left:5px solid #0d2f63;

    padding-left:20px;
}

.lead p{

    font-size:1.3rem;

    font-weight:700;

    color:#173e78;
}

.body-text{

    margin-top:45px;
}

.body-text h2{

    margin:40px 0 20px;

    color:#0d2f63;
}

.body-text p{

    margin-bottom:25px;
}

.banner-section{

    max-width:1200px;

    margin:0 auto 60px;

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    padding:0 20px;
}

.banner-link{

    width:420px;
}

.banner-link img{

    width:100%;

    border-radius:16px;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.18);
}

.footer-image img{

    width:100%;

    display:block;
}