/*-------------------------------------------------------- TEMPLATE --------------------------------------------------------*/
    
body {
    background-color: #eaf3fa;
}
.none { display: none;}
.left { float: left;}
.right { float: right;}

/*-- FONT --*/
.readText {
    font-family: "ƒ�ƒCƒŠƒI", "‚l‚r ‚oƒSƒVƒbƒN", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", Osaka, sans-serif;
    font-size: 14px;
    line-height: 20px;
}
.readText b { border-bottom: 2px #2EA0FA dotted; }

/*-- TEMPLATE HEADER --*/
.tplHeader {
    height: 100px;
    background-image: url("../images/navback.jpg");
    background-repeat: repeat-x;
    background-position: bottom;
    background-color: #ffffff;
}
.tplLogo {
width: 18%;
margin: 15px 0 0;
float: left;
}

ul.globalNav li { height: 50px;}
ul.globalNav {
width: 70%;
float: right;
margin: 15px 0 0;
box-shadow: none;
background-image: none;
}

.topImgContainer {
width: 1024px;
margin: 0 auto;
display: block;
}

.ContentBox {
width: 1024px;
min-height: 300px;
margin: 0 auto 30px;
padding: 25px 40px 40px;
display: block;
background-color: #ffffff;
box-shadow: 1px 1px 2px #ccc;
overflow: hidden;
}
.fullscreen .ContentBox { display: none;}

footer {
background-color: #ffffff;
margin: 50px 0 0;
padding: 25px 0 10px;
}

footer.contactfoot {
position: absolute;
bottom: 0;
width: 100%;
}

/*-- FONT --*/
.textFont {
text-align: left;
font-size: 14px;
line-height: 20px;
clear: both;
margin: 10px 0;
display: inline-block;
}


/*-------------------------------------------------------- MANSION TEMPLATE --------------------------------------------------------*/

.imgMax { max-width: 100%;}
.imgMax50 {
  width: 50%;
  height: auto;
  float: left;
  padding: 2%;
}
.mansionTitleImage {
height: 55px;
left: -40px;
position: relative;
display: block;
margin: 0 0 20px;
}
iframe {
width: 100%;
height: 500px;
margin: 10px auto 0;
}
.infoTitleImage {
height: 25px;
position: relative;
left: -40px;
display: block;
margin-bottom: 30px;
}
.mansionInfoMemo {
background-color: #f0f0f0;
padding: 25px;
font-size: 14px;
line-height: 29px;
}
.mansionInfoMemo b {
border-bottom: 2px #2EA0FA dotted;
}

/*-- OUTLINE --*/
.outlineDL {
width: 44%;
margin: 3%;
}
.outlineDL dt {
padding: 5px;
width: 110px;
float: left;
color: #67b2c2;
font-weight: bold;
font-size: 14px;
}
.outlineDL dt.memoDT {
width: 100%;
float: none;
}
.outlineDL dd {
font-size: 14px;
border-bottom: 2px #67b2c2 dotted;
padding: 5px;
text-align: right;
line-height: 20px;
margin-bottom: 15px;
}
.outlineDL dd.memoDD {
text-align: left;
font-size: 12px;
}

/*-- ACCESS --*/
iframe.accessMap { width: 49%; height: 350px; margin: 0;}

/*-- VACANCY SITUATION --*/
table.VStable {
    width: 100%;
}
table.VStable thead tr th.header {
background-color: #67b2c2;
padding: 10px 0;
text-align: center;
color: #ffffff;
font-weight: bold;
border: 4px #ffffff solid;
}

table.VStable tbody tr td {
padding: 15px 0;
text-align: center;
font-size: 15px;
border-bottom: 1px #67b2c2 solid;
border-right: 4px #ffffff solid;
border-left: 4px #ffffff solid;
}

.CSV table {
    width: 100%;
}
.CSV th {
background-color: #67b2c2;
padding: 10px 0;
text-align: center;
color: #ffffff;
font-weight: bold;
border: 4px #ffffff solid;
}

.CSV td {
padding: 15px 0;
text-align: center;
font-size: 15px;
border-bottom: 1px #67b2c2 solid;
border-right: 4px #ffffff solid;
border-left: 4px #ffffff solid;
}


a.contactBtn {
background-color: #006699;
background: -moz-linear-gradient(top,#0099CC 0%,#006699);
background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
color: #FFF;
width: 270px;
text-align: center;
border: 0;
font-family: Meiryo, "HGŠÛºÞ¼¯¸M-PRO", sans-serif;
font-size: 18px;
display: block;
padding: 20px;
margin: 20px auto 0;
font-weight: bold;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
}
a:hover.contactBtn {
    color: #FFF;
    text-decoration: none;
    background: -moz-linear-gradient(top,#006699 0%,#0099CC);
    background: -webkit-gradient(linear, left top, left bottom, from(#006699), to(#0099CC));
}

/*-------------------------------------------------------- SECURITY --------------------------------------------------------*/

.modelImage {
    width: 33%;
    float: left;
    margin: 15px 30px 25px 0;
}
ul.securityList li {
    width: 28%;
    float: left;
    margin: 2.5%;
    min-height: 200px;
}
ul.securityList li img.securityImage {
    max-width: 100%;
    margin-bottom: 10px;
}
/*-------------------------------------------------------- FLOW --------------------------------------------------------*/

.readtext {
    text-align: center;
}

#preleaseflow p {
    font-size: 14px;
    line-height: 1.5;
    color: #6f6f6f;
    margin: 25px 10%;
    clear: both;
}

#preleaseflow p.step {
    margin: 20px auto 5%;
    text-align: center;
    line-height: 32px;
}

#preleaseflow #flowlink a {
    padding: 5px 8px;
    border: 1px solid #5574b9;
}
#preleaseflow #flowlink a:hover {
    color: #ffffff;
    background-color: #5574b9;
    text-decoration: none;
}
#preleaseflow h2 {
    font-size: 90%;
    font-weight: bold;
    color: #5574b9;
    margin: 30px 4% 5px;
    letter-spacing: 7px;
    padding: 5px 10px;
    background-color: #f0f0f0;
}
#preleaseflow .box1,
#preleaseflow .box2,
#preleaseflow .box3 {
    float: none;
    width: 50%;
    margin: 15px auto;
    text-align: center;
    padding: 1%;
    border: 2px #67b2c2 dotted;
}
#preleaseflow .box2,
#preleaseflow .box3 { width: 75%;}

#preleaseflow .box1 p,
#preleaseflow .box2 p,
#preleaseflow .box3 p {
    font-weight: bold;
    color: #67b2c2;
    margin: 0;
    text-align: center;
    padding: 5px;
}
#preleaseflow .box1 ul li,
#preleaseflow .box2 ul li,
#preleaseflow .box3 ul li {
    width: 44%;
    float: left;
    text-align: center;
    margin: 3%;
    padding: 2%;
    background-color: rgb(255, 242, 190);
    border-radius: 8px;
    font-family: "ƒ�ƒCƒŠƒI", "‚l‚r ‚oƒSƒVƒbƒN", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", Osaka, sans-serif;
    font-size: 13px;
}
#preleaseflow .box2 ul li,
#preleaseflow .box3 ul li { width: 29%; margin: 1% 2%; padding: 1%;}

/*-------------------------------------------------------- FAQ --------------------------------------------------------*/
.faqBox {
width: 90%;
margin: 20px auto 50px;
}
img.Qicon {
    width: 20px;
    vertical-align: middle;
}
img.Aicon {
width: 20px;
}
.questions {
    font-size: 20px;
    font-weight: bold;
}
.answer {
background-color: #f0f0f0;
padding: 3%;
display: inline-block;
margin-left: 1%;
width: 95%;
}

/*-------------------------------------------------------- max-height 1024px �« --------------------------------------------------------*/
@media screen and (max-width: 1024px) {
.tplLogo {
width: 22%;
margin: 15px 0 0;
}
ul.globalNav {
    width: 77%;
    margin: 15px 0 0;
}
ul.puldownNav {
	width: 17%!important;
}
.topImgContainer {
    width: 90%;
}
.ContentBox {
    width: 90%;
}

#FootContainer {
    width: 85%;
}

/*-- FLOW --*/
#preleaseflow p.step { font-size: 12px;}

footer.contactfoot { position: static;}
}


/*-------------------------------------------------------- SMART PHONE 640px �« --------------------------------------------------------*/
@media screen and (max-width: 640px) {
.tplLogo {
width: 50%;
margin: 0 auto;
float: none;
display: block;
padding-top: 15px;
}
.tplHeader { height: 210px;}
ul.globalNav {
width: 100%;
margin: 10px 0 0;
}
ul.globalNav li img { margin-top: -5px;}

ul.puldownNav { width: 48%!important;}
.ContentBox { width: 100%; padding: 5%;}
.mansionTitleImage {
height: auto;
left: -17px;
width: 210%;
}
.infoTitleImage {
height: auto;
width: 100%;
left: -17px;
}

.imgMax50 {
  width: 100%;
  float: none;
  padding: 2%;
}

#preleaseflow p.step { display: none;}
#preleaseflow p { margin: 0;}
#preleaseflow h2 { margin: 10px 0; letter-spacing: 3px;}
#preleaseflow .box1, #preleaseflow .box2, #preleaseflow .box3 { width: 100%;}

.modelImage {
width: 100%;
float: left;
margin: 0 auto 20px;
}
ul.securityList li {
width: 46%;
margin: 2%;
min-height: 150px;
}
a.contactBtn { margin: 0 auto;}

.faqBox {
width: 100%;
margin: 0px auto 30px;
}

iframe { height: 185px;}
.outlineDL {
width: 100%;
margin: 0;
}
iframe.accessMap {
width: 100%;
height: 290px;
margin: 5px auto;
}
footer { margin: 0;}
footer.contactfoot { position: static;}
}