@charset "UTF-8";


.area {width: 1200px;margin: 0 auto 100px;}
.area h3 {
font-size: 54px;
line-height: 1;
margin: 0 0 50px;
}

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

}
@media screen and (max-width: 767px) {
.area {width: 100%;margin: 0 auto 10%;}
.area h3 {
font-size: 5vw;
line-height: 1;
margin: 0 0 5%;
}
}






.price {}
.price h4 {
width: 100%;
font-size: 38px;
font-weight: 700;
text-align: left; line-height: 1;
position: relative;
padding-left: 55px;
margin: 0 0 50px;
display: block;
background: linear-gradient(135deg, #29c0ff 0%, #0081e3 100%);
background: -webkit-linear-gradient(-45deg, #29c0ff 0%, #0081e3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.price h4:before {
position: absolute;
content: '';
top: calc(50% - 1px);
width: 40px;
left: 0;
height: 2px;
border-top: solid 2px #27acd9;
}

.price ul {display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.price ul li {width: 48%;margin: 0 4% 0 0;}
.price ul li:nth-child(2n) {margin: 0;}
.price ul li.wide {width: 100%;margin: 0;}

.price ul li h5 {font-size: 24px;line-height: 1.6;font-weight: 700; color: #0080E2;text-align: left;margin: 0 0 10px;}
.price ul li h5 span {font-size: 18px;margin: 0 0 0 10px;transform: rotate(0.05deg);}
.price ul li p.caption {font-size: 12px;line-height: 1.6;text-align: left;margin: 10px 0 0;transform: rotate(0.05deg);}

.price ul li table {width: 100%; text-align: center;border-left: 1px solid #0081e3;border-top: 1px solid #0081e3;padding: 0;border-spacing:0;collapse:collapse;}
.price ul li table th {font-size: 13px;line-height: 1.6;font-weight: 700; background: #ebfaff;border-right: 1px solid #0081e3;border-bottom: 1px solid #0081e3;padding: 10px 0;transform: rotate(0.05deg);}
.price ul li table td {font-size: 18px;line-height: 1.6;border-right: 1px solid #0081e3;border-bottom: 1px solid #0081e3;padding: 10px;}
.price ul li table td span {font-size: 24px;font-weight: 700;}
.price ul li table td.type {font-weight: 700;}
.price ul li table td.price_a {background: #faedf4;}
.price ul li table td.price_b {background: #ecf5ea;}
.price ul li table td.price_c {background: #eef5fb;}
.price ul li table td.area { text-align: left;transform: rotate(0.05deg);}
.price ul li dl {font-size: 18px;line-height: 1.6; text-align: left;padding: 20px 0 0;transform: rotate(0.05deg);}
.price ul li dl dt {font-weight: 700;margin: 0 0 10px;}
.price ul li dl dd {}
.price p.annotation {font-size: 18px;transform: rotate(0.05deg);text-align: left;}

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

}
@media screen and (max-width: 767px) {
.price {}

.price h4 {
width: 100%;
font-size: 4.8vw;
text-align: left; line-height: 1;
position: relative;
padding-left: 45px;
margin: 0 0 5%;
display: block;
}
.price h4:before {
position: absolute;
content: '';
top: calc(50% - 1px);
width: 30px;
left: 0;
height: 2px;
border-top: solid 2px #27acd9;
}

.price ul {
width: 90%;margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.price ul li {width: 100%;margin: 0 0 5%;}
.price ul li:nth-child(2n) {margin: 0;}
.price ul li.wide {width: 100%;margin: 0;}

.price ul li h5 {font-size: 4vw;line-height: 1.6;font-weight: 700; color: #0080E2;text-align: left;margin: 0 0 10px;}
.price ul li h5 span {font-size: 3vw;margin: 0;display: block;}
.price ul li p.caption {font-size: 3vw;line-height: 1.6;text-align: left;margin: 10px 0 0;}

.price ul li table {width: 100%; text-align: center;border-left: 1px solid #0081e3;border-top: 1px solid #0081e3;padding: 0;border-spacing:0;collapse:collapse;}
.price ul li table th {font-size: 3vw;line-height: 1.6;font-weight: 700; background: #ebfaff;border-right: 1px solid #0081e3;border-bottom: 1px solid #0081e3;padding: 10px;text-align: left;}
.price ul li table td {font-size: 3vw;line-height: 1.6;border-right: 1px solid #0081e3;border-bottom: 1px solid #0081e3;padding: 10px;}
.price ul li table td span {font-size: 4vw;font-weight: 700;}
.price ul li table td.type {}
.price ul li table td.price_a {background: #faedf4;}
.price ul li table td.price_b {background: #ecf5ea;}
.price ul li table td.price_c {background: #eef5fb;}
.price ul li table td.area { text-align: left;}
.price ul li dl {font-size: 3vw;line-height: 1.6; text-align: left;padding: 10px 0 0;}
.price ul li dl dt {font-weight: 700;margin: 0 0 5px;}
.price ul li dl dd {}
 
.price p.annotation {font-size: 3vw;transform: rotate(0.05deg);width: 90%; margin: auto;}

}





.map {text-align: right;position: relative;width: 100%;}
.map img {}

.map ul.btn {
width: 44%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.map ul.btn li {width: 100%;height: 80px; margin: 0 0 5%;position: relative;}
.map ul.btn li:last-child {margin: 0;}

a.area_btn {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
text-decoration: none;
height: 80px;
margin: auto;
font-weight: bold;
background: linear-gradient(135deg, #29c0ff 0%, #0081e3 100%);background: -webkit-linear-gradient(-45deg, #29c0ff 0%, #0081e3 100%);
color: #fff;
position: relative;
transition: 0.5s;
}
a.area_btn::before {
content: '';position: absolute;top: calc(50% - 3px);right: 1.8em;transform: translateY(calc(-50% - 2px)) rotate(45deg);width: 14px;height: 1px;background: #fff;
}
a.area_btn::after {
content: '';
position: absolute;
top: 50%;
right: 2em;
transform: translateY(-50%);
width: 50px;
height: 1px;
background-color: #fff;
}
a.area_btn:hover {
background: linear-gradient(135deg, #0081e3 0%, #29c0ff 100%);background: -webkit-linear-gradient(-45deg, #0081e3 0%, #29c0ff 100%);
color: #fff;
}
.map ul.btn li p {
font-size: 22px;line-height: 1.2;
text-align: left;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}

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

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

.map {text-align: right;position: relative;width: 100%;margin: 0 0 5%;}
.map img {width: 100%;height: auto;}

.map ul.btn {
width:90%;margin:0 auto 5%;
position: inherit;
top: inherit;
left:inherit;
transform: inherit;
-webkit- transform: inherit;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.map ul.btn li {width: 100%;height: 60px; margin: 0 0 5%;position: relative;}
.map ul.btn li:last-child {margin: 0;}

a.area_btn {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
text-decoration: none;
height: 60px;
margin: auto;
font-weight: bold;
background: linear-gradient(135deg, #29c0ff 0%, #0081e3 100%);background: -webkit-linear-gradient(-45deg, #29c0ff 0%, #0081e3 100%);
color: #fff;
position: relative;
transition: 0.5s;
}
a.area_btn::before {
content: '';position: absolute;top: calc(50% - 1px);right: 0.8em;transform: translateY(calc(-50% - 2px)) rotate(45deg);width: 8px;height: 1px;background: #fff;
}
a.area_btn::after {
content: '';
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%);
width: 20px;
height: 1px;
background-color: #fff;
}
a.area_btn:hover {
background: linear-gradient(135deg, #0081e3 0%, #29c0ff 100%);background: -webkit-linear-gradient(-45deg, #0081e3 0%, #29c0ff 100%);
color: #fff;
}
.map ul.btn li p {
font-size: 4vw;line-height: 1.4;
text-align: left;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}


}