@charset "UTF-8";
/* CSS Document */

/* ----------cont_rec–---------- */
.cont_rec{
    background-image: linear-gradient(320deg, #f9f6ee 80%, #d6c695 20%);
    padding:7%;
    box-sizing:border-box;
}
.image{
    width:50%;
    max-width:600px;
    overflow:hidden;
    float: left;
    margin-right: 50px; 
    margin-bottom:20px;
    position:relative;
        box-shadow: 10px 10px 40px rgb(166 158 138 / 50%);
}
.image img{
    object-fit:cover;
    height:100%;
    width:100%;
    vertical-align:bottom
}
.image .name{
    width:fit-content;
    margin:0 auto;
    position:absolute;
    bottom:10px;
    right:10px;
    box-sizing:border-box;
    border-radius:5px;
    color:#fff;
}
.image .name p{
    line-height:1.5em;
    font-size:90%;
}
.image .name img{
    width:100%;
    max-width:150px;
    margin-top:5px;
}
.detail{
}
.detail h2{
    font-size:1.5rem;
    margin:2em 0;
}
.detail p{
    margin:0 0 2em 0;
}

/* ----------959px–---------- */
@media screen and (max-width: 959px) {
    .detail h2{
        font-size:2.7vw;
    }
}

/* ----------768px–---------- */
@media screen and (max-width: 768px) {
    .image{
        width:100%;
        float: unset;
        margin-right: unset; 
        margin:0 auto 50px;
    }
    .detail h2{
        font-size:3.5vw;
        width:fit-content;
        margin:0 0 1.5em;
    }
}
/* ----------519px–---------- */
@media screen and (max-width: 519px) {
    .detail h2{
        font-size:4.0vw;
    }
    .image .name p{       
        font-size:80%;
    }
}