@charset "UTF-8";
/* =====================================
	news-detail
===================================== */

#wrapper{
    background-image: url("../img/common/bg02.png");
    background-repeat: no-repeat;
    background-position: top 23px left;
}

main{
    width: 100%;
    padding: 162px 50px 206px;
    position: relative;
}

main .news{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

main .news::before{
    content: "";
    background: url("../img/news/illust01.png") no-repeat center;
    background-size: contain;
    width: 370px;
    height: 368px;
    position: absolute;
    top: -26px;
    right: -200px;
}

main .news h1{
    font-size: 6.1rem;
    font-weight: 300;
    text-align: center;
    line-height: 1;
    color: #5ac0c9;
    display: table;
    width: 100%;
    max-width: 797px;
    margin: 0 auto 51px;
    padding-bottom: 38px;
    background: url("../img/news/huki01.svg") no-repeat center bottom;
    position: relative;
    z-index: 3;
}

main .news h1 small{
    font-size: 2.5rem;
    font-weight: normal;
    display: block;
    color: #232323;
    margin-top: 1px;
}

main .news .wrap{
    width: 100%;
    padding: 50px 65px 60px;
    background: #fff;
    margin-bottom: 32px;
    position: relative;
    z-index: 3;
}

main .news .wrap .ttlArea{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

main .news .wrap .ttlArea span{
    font-size: 2.1rem;
    font-weight: 300;
    color: #5ac0c9;
    width: 158px;
}

main .news .wrap .ttlArea h2{
    font-size: 2.5rem;
}

main .news .wrap .newsCnt{
    padding: 0 0 0 163px;
}

main .news .wrap .newsCnt img,
main .news .wrap .newsCnt img + p,
main .news .wrap .newsCnt p + p{
    margin-top: 40px;
}

main .news > a{
    width: 100%;
    max-width: 300px;
    height: 60px;
    margin: 0 auto;
    position: relative;
    display: table;
}

main .news > a span{
    font-size: 2.0rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 60px;
    margin: 0 auto;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #232323;
    position: relative;
    z-index: 3;
}

main .news > a::before{
    content: "";
    width: 100%;
    height: 60px;
    position: absolute;
    top: 7px;
    left: 7px;
    background: #abd7dc;
    border-radius: 10px;
}



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

#wrapper{
    background-image: url("../img/common/bg02.png");
    background-repeat: no-repeat;
    background-position: top 3.067vw left;
}

main{
    padding: 21.6vw 0 27.467vw;
}

main .news{
    width: 86.979167vw;
}

main .news::before{
    width: 49.33vw;
    height: 49.067vw;
    top: -3.467vw;
    right: -26.67vw;
}

main .news h1{
    font-size: 12.2vw;
    line-height: 0.6;
    max-width: 86.979167vw;
    margin: 0 auto 6.8vw;
    padding-bottom: 8vw;
    background: url("../img/news/huki01.svg") no-repeat center bottom;
    background-size: auto 2.4vw;
}

main .news h1 small{
    font-size: 5vw;
    line-height: 1;
    margin-top: 3vw;
}

main .news .wrap{
    width: 86.979167vw;
    padding: 6.67vw 8.67vw 8vw;
    margin-bottom: 4.267vw;
}

main .news .wrap .ttlArea{
    margin-bottom: 2.67vw;
    display: block;
}

main .news .wrap .ttlArea span{
    font-size: 4.2vw;
    width: 21.067vw;
}

main .news .wrap .ttlArea h2{
    font-size: 5vw;
}

main .news .wrap .newsCnt{
    padding: 0;
}
main .news .wrap .newsCnt img,
main .news .wrap .newsCnt img + p,
main .news .wrap .newsCnt p + p{
    margin-top: 5.33vw;
}

main .news > a{
    max-width: 54.6875vw;
    height: 10.9375vw;
}

main .news > a span{
    font-size: 4vw;
    height: 10.9375vw;
    border-radius: 1.8229167vw;
}

main .news > a::before{
    height: 10.9375vw;
    top: 0.91145833vw;
    left: 0.91145833vw;
    border-radius: 1.8229167vw;
}

}

.newsCnt h2{
    font-size: 1.5em;
    font-weight: bold;
}
.newsCnt h3{
    font-size: 1.17em;
    font-weight: bold;
}
.newsCnt h4{
    font-size: 0.83em;
    font-weight: bold;
}
.newsCnt h5{
    font-size: 0.83em;
    font-weight: bold;
}
.newsCnt h6{
    font-size: 0.67em;
    font-weight: bold;
}