@charset "utf-8";
/* CSS Document */

body {
    background: #FFF url(../images/ocean.png) no-repeat top left;
    background-attachment: fixed;
    background-size: 100% auto;
}

#right-contents { 
    background: #FFF;
	width: 100%;
    min-height: 800px;
}

#main {
	padding: 15px;
    line-height: 1.7em;
}

/*#main img {
    width: 100%;
}
*/
#main_in {
	padding: 0;
}

[class^="img-flex-"] {
	margin-bottom: 20px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.img-flex-2 img { width: 49%; height: 49%; }
.img-flex-3 img { width: 32%; height: 32%; }
.img-flex-4 img { width: 24%; height: 24%; }


/* GoogleMap レスポンシブ対応 */ 
.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    page-break-before: always;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 700px;
}

.gree01 {
    margin-top: 90px;
    line-height: 200%;
}
/* ------------------------------------------------------------------
 表示領域が991px以下の場合に適用するスタイル
------------------------------------------------------------------ */
@media screen and (max-width: 991px) {    
    #left-contents { 
		width: 100%;
	}
	#right-contents { 
        padding-top: 0;
        position: relative;
    }
    #main {
        padding: 10px;
    }
}

/* ------------------------------------------------------------------
 表示領域が641px以下の場合に適用するスタイル
------------------------------------------------------------------ */
@media screen and (max-width: 641px) {
    #main {
        padding: 5px;
    }
    
    [class^="img-flex-"] {
        margin-bottom: 20px;
        display: block;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .gree01 {
        margin-top: 10px;
    }
}

/* ------------------------------------------------------------------
 表示領域が992px以上の場合に適用するスタイル
------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
	#left-contents {
		float: left;
		width: 220px;
		position: relative;
        margin-right: 20px;
	}
    #right-contents {
		float: right;
		margin-right: -240px;
/*		padding: 10px 250px 10px 10px;
*/
        padding: 10px 250px 10px 10px;
box-sizing: border-box;
    }
}