@charset "utf-8";

.main-head {
    background: #fcf2e1;
    height: 400px;
}

.main-head .img-head {
    height: 400px;
}

main {
    background: #bee2e0;
}

.box-news {
    padding: 120px 0;
    background: url("../img/what/bg_body.svg") no-repeat center -10px;
    background-size: auto 686px;
}

.box-news .box-wrap {
    width: 600px;
    min-height: 410px;
    margin: 0 auto;
    position: relative;
    padding: 100px 0 100px;
    background: #FFF;
}

.box-news .img {
    width: 162px;
    position: absolute;
    left: -85px;
    top:-95px;
}

.box-news h1 {
    color: #eb6100;
    font-size: 46px;
    line-height: 180%;
    text-align: center;
    margin-bottom: 10px;
}

.box-single {
    border: solid 2px #FFCC00;
    width: 480px;
    margin: 0 auto;
}

.box-single h2.tit {
    color: #FFF;
    border-bottom: solid 2px #FFCC00;
    background: #FF9900;
    padding: 6px 10px 5px;
}

.box-single .txt-box {
    padding: 20px 20px;
    text-align: left;
}

.box-single .txt-box a {
    color: #6ec3b4;
}


/******************************************************/

@media screen and (max-width: 900px) {
    
    .main-head,
    .main-head .img-head {
        height: auto;
        aspect-ratio: 16 / 5;
    }
    
    .box-news {
        padding: 8% 5%;
        background: url("../img/what/bg_body.svg") no-repeat -200% -2%;
        background-size: 98% auto;
    }

    .box-news .box-wrap {
        width: 100%;
        padding: 5vw 0;
        min-height: auto;
    }

    .box-news h1 {
        font-size: 4.3vw;
        margin-bottom: 6%;
    }
    
    .box-single {
        width: 90%;
    }
    
    .box-single img {
        max-width: 90%;
        height: auto;
    }
    
}