@charset "utf-8";

/* 基本要素 */

html,
body {
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

a {
    color: #ffffff;
    text-decoration: none;
}

a:visited {
    color: #777777;
}

a:hover {
    color: #4E7A05;
    font-weight: bold;
    text-decoration: none;
}

a img {
    transition: opacity 0.2s linear;
}

a:hover img {
    opacity: 0.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h2 {
    padding: 2px 5px;
}

p {
    margin-top: 0;
    line-height: 1.6;
    padding: 0 5px;
    font-size: 0.93em;
}

img {
    vertical-align: bottom;
}

/* レイアウト */

#container {
    width: 980px;
    margin: 0 auto;
}

#contents {
    width: 980px;
    margin: 0 auto;
}

#header {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
    float: left;
    background-image: url(../images/header_grad_bg.jpg);
    background-repeat: repeat-x;
    color: #ffffff;
}

#info {
    width: 980px;
    height: auto;
    background-color: #d9f9a3;
}

#propertypic {
    clear: both;
    float: left;
    max-width: 600px;
    max-height: 510px;
    text-align: center;
    overflow: hidden;
}

#googlemap {
    float: right;
    width: 370px;
    height: 500px;
    overflow: hidden;
    padding: 0px;
    text-align: center;
    border: double #4E7A05 5px
}

#footer {
    clear: both;
}


/* ---------------------------------
ヘッダー
--------------------------------- */

#header h1 {
    float: left;
    font-size: 2.3em;
    padding: 10px;
    margin: 0;
}

#header address {
    float: right;
    font: 1em normal;
}

#header p {
    clear: both;
    margin: 0;
}

#header div {
    text-align: right;
    margin: 0;
    font: 0.7em normal;
}

/* ---------------------------------
物件情報
--------------------------------- */
#info h2,
#info h4 {
    background-color: #d9f9a3;
    margin: 0;
    padding: 5px;
}

#infoleft {
    float: left;
    width: 330px;
}

#inforitght {
    float: right;
    background-color: #d9f9a3;
}

#info table {
    padding: 1px;
    border: #ffffff solid 3px;
    width: 650px;
}

#info th {
    background-color: #4E7A05;
    color: #ffffff;
    font-size: 1.2em;
    height: 2em;
    margin: auto;
}

#info tr:nth-child(even) {
    margin: 0px;
    padding: 1px;
    font-size: 0.9em;
    background-color: white;
}

#info tr:nth-child(odd) {
    margin: 0px;
    padding: 1px;
    font-size: 0.9em;
}

#info td {
    text-align: center;
    padding: 2px 0px;
    margin: auto;
}


/* ---------------------------------
slick表示部
--------------------------------- */
#propertypic ul {
    padding: 0;
    background-color: #d9f9a3;
}

#propertypic_l {
    margin-top: 0px;
    margin-bottom: 3px;
    padding: 0;
}

#propertypic_s {
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

#propertypic_l img {
    height: 390px;
    max-width: 520px;
    margin: 0 auto;
}

#propertypic_s img {
    border: dashed 2px #4E7A05;
    margin: 5px;
    height: 100px;
    max-width: 150px;
    cursor: pointer;
    margin: 0 auto;
}


/* ---------------------------------
googleMAP
--------------------------------- */
#googlemap iframe {
    border-style: double;
    border-width: 5px;
}

/* ---------------------------------
footer
--------------------------------- */

footer {
    clear: both;
    background-color: #4E7A05;
    text-align: center;
}

footer #footer_nav ul {
    background-color: #efefef;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer #footer_nav li {
    display: inline;
    border-left: solid 1px #aaa;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}

footer #footer_nav li:last-child {
    border-right: solid 1px #aaa;
    padding: 0 8px;
}

footer small {
    display: block;
    padding: 4px 0;
    color: #fff;
}



/* ---------------------------------
メディアクエリー
--------------------------------- */

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

    /* 基本要素 */
    img {
        max-width: 100%;
    }

    /* レイアウト */
    #container,
    #contents,
    #header,
    #info,
    #infoleft,
    #inforight,
    #propertypic,
    #footer {
        width: 100%;
        height: auto;
    }

    #info table {
        width: 100%;
    }

    #info table th,
    #info table td {
        display: block;
    }

    #info table tr:first-child th {
        border-top: 1px solid;
    }

    #info table td:first-child {
        font-weight: bold;
    }

    #header p {
        display: none;
    }

    #header div {
        display: none;
    }

    #googlemap {
        text-align: center;
        width: 100%;
        height: 250px;
        padding 0;
        border: 0;
    }

    #googlemap iframe {
        width: 100%;
        height: 250px;
    }

    #propertypic_l img {
        height: auto;
    }

}