*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#ffffff;
    color:#666666;
    font-family:
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
    line-height:1.8;
}

.umbrella-guide{
    max-width:900px;
    margin:0 auto;
    padding:20px;
}

.hero-image,
.step img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
}

h1{
    color:#000;
    font-size:clamp(28px,4vw,40px);
    line-height:1.4;
    margin:32px 0 20px;
    font-weight:700;
}

.lead{
    font-size:clamp(16px,2vw,19px);
    margin-bottom:40px;
}

.step{
    margin-bottom:48px;
}

.step p{
    font-size:clamp(16px,2vw,19px);
    margin:16px 0 0;
}

.advice{
    background:#f8f8f8;
    border-left:5px solid #999;
    padding:20px;
    margin-top:40px;
    border-radius:4px;
}

.advice h2{
    margin:0 0 15px;
    color:#333;
    font-size:clamp(20px,3vw,28px);
    line-height:1.4;
}

.advice p{
    margin:0 0 15px;
    font-size:clamp(15px,2vw,18px);
}

.advice p:last-child{
    margin-bottom:0;
}

/* タブレット */
@media (max-width:768px){

    .umbrella-guide{
        padding:15px;
    }

    .step{
        margin-bottom:35px;
    }

}

/* スマホ */
@media (max-width:480px){

    .umbrella-guide{
        padding:12px;
    }

    h1{
        margin:25px 0 15px;
    }

    .lead{
        margin-bottom:30px;
    }

    .step{
        margin-bottom:30px;
    }

    .step p{
        margin-top:10px;
    }

}