@charset "UTF-8";

#contents{
    margin: 200px auto 0;
}
#mv{
    margin: 0 auto 5%;
    padding: 0;
    max-width: 1080px;
    width: 100%;
}
#mv h2{
    border-bottom: #ffc200 solid 6px;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto;
}
#asentamiento{
    max-width: 1080px;
    margin: 0 auto 5%;
    padding: 0;
    width: 95%;
}
#asentamiento h3{
    border-bottom:2px solid #333;
    margin: 0 auto 5%;
    width: 100%;
}
#asentamiento .part{
    display: flex;
    flex-wrap: wrap;
}
#asentamiento .part a{
    border-radius:20px;
    display: block;
    margin: 0 1% 5%;
    padding: 10px 0;
    width: 48%;
    position: relative;
    overflow: hidden;
}
#asentamiento .part01 a,
#asentamiento .part02 a,
#asentamiento .part03 a,
#asentamiento .part04 a{
    border:2px solid #005c96;
    background:url(../images/kessai_bg02.png);
    background-repeat: no-repeat;
    background-size:100%;
    background-position: bottom;
    transition: all ease 0.8s;
}
#asentamiento .part01 a:hover,
#asentamiento .part02 a:hover,
#asentamiento .part03 a:hover,
#asentamiento .part04 a:hover{
    background:#ecf2f6 url(../images/kessai_bg02.png);
    background-repeat: no-repeat;
    background-size:110%;
    background-position: bottom;
}
#asentamiento .part05 a,
#asentamiento .part06 a{
    border:2px solid #968400;
    background:url(../images/kessai_bg01.png);
    background-repeat: no-repeat;
    background-size:100%;
    background-position: bottom;
    transition: all ease 0.8s;
}
#asentamiento .part05 a:hover,
#asentamiento .part06 a:hover{
    background:#f5f1d8 url(../images/kessai_bg01.png);
    background-repeat: no-repeat;
    background-size:110%;
    background-position: bottom;
}
#asentamiento .part a p{
    text-align: center;
    margin: 0 auto 10px;
}
#asentamiento .part a p.type{
    border-radius:20px;
    width: fit-content;
    padding: 0 15px;
    color: #fff;
}
#asentamiento .part a p.type.online{
    background: #ffc200;
}
#asentamiento .part a p.type.goto{
    background: #e87988;
}
#asentamiento .part a p.name{
    font-weight:bold;
    padding: 0 0 10px;
    border-bottom:1px solid #333;
}
#asentamiento .part a p.name span{
    display: block;
}
#asentamiento .part a p.price{
    font-weight:bold;
    font-size:1.2em;
}
#asentamiento .part a p.price span{
    font-size: 0.8em;
}

@media print, screen and  (max-width: 640px) {
#contents{
    margin: 180px auto 0;
}
#asentamiento .part01 a,
#asentamiento .part02 a,
#asentamiento .part03 a,
#asentamiento .part04 a,
#asentamiento .part05 a,
#asentamiento .part06 a{
    background-size:cover;
}
#asentamiento .part01 a:hover,
#asentamiento .part02 a:hover,
#asentamiento .part03 a:hover,
#asentamiento .part04 a:hover,
#asentamiento .part05 a:hover,
#asentamiento .part06 a:hover{
    background-size:cover;
}
#asentamiento .part a p.name span{
    font-size: 0.8em;
}
#asentamiento .part a p.price span{
    display: block;
}
}