@charset "UTF-8";

header { background-color: rgba(255, 255, 255, 1);}

.lower_ttl {
position: relative;
width: 100%;
background: url(../img/map/main_img.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding-top: 30%;
}

.lower_ttl h2 {
position: absolute;
text-align: center;
font-size: 30px;
/* top: 50%; */
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
/* color: #fff; */
letter-spacing: 5px;
}

.map_Area {
width: 90%;
max-width: 1000px;
margin: 100px auto;
}

.map_Area h3 {
position: relative;
font-size: 24px;
text-align: center;
margin: 0 0 50px;
}

.map_Area h3::after {
position: absolute;
content: "";
width: 30px;
height: 3px;
background: #000;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}

.map_Area .btn_List {
margin: 50px auto;
width: 90%;
max-width: 620px;
justify-content: space-between;
}

.map_Area .btn_List li {
width: 100%;
max-width: 300px;
}

.map_Area .btn_List li a {
display: block;
text-align: center;
font-size: 16px;
color: #fff;
padding: 15px 0;
transition: 0.3s;
}

.map_Area .btn_List li .btn_map {
background: #799aa2;
border: #799aa2 1px solid;
}

.map_Area .btn_List li .btn_print {
background: #7b7b7b;
border: #7b7b7b 1px solid;
}

.map_Area .btn_List li .btn_map:hover {
background: #d8e1e3;
color: #000;
}

.map_Area .btn_List li .btn_print:hover {
background: #d3d3d3;
color: #000;
}

/* マンションギャラリー */
.mg_map_Area {
width: 90%;
max-width: 800px;
margin: 100px auto;
}

/*===================
iPad横以下
===================*/
@media only screen and (max-width:1180px) {

.map_Area .btn_List li:last-child {
display: none;
}

.map_Area .btn_List {
flex-wrap: wrap;
}

.map_Area .btn_List li {
margin: 0 auto;
}
}

/*===================
iPad縦以下
===================*/
@media only screen and (max-width:1180px) {
.lower_ttl { padding-top: 40%;}
}
@media only screen and (max-width:880px) {
.lower_ttl h2 { top: 70%;}
}

/*===================
sp
===================*/
@media only screen and (max-width: 859px) {
.lower_ttl h2 {
top: 60%;
font-size: 20px;
}
}
@media only screen and (max-width: 599px) {
.lower_ttl { padding-top: 60%;}

.map_Area {
margin: 50px auto;
}

.map_Area h3 {
font-size: 20px;
margin: 0 0 30px;
}
}

/*===================
print
===================*/
@media print {

header,
footer,
.btn_List,
.lower_ttl {
display: none;
}
}