@charset "UTF-8";

/*================================================
 *  一般・共通設定
 ================================================*/
body {
     background-color:#ffff00;
     margin:0px;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
    }

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

#main {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:center;     /* 中身を左側表示に戻す */
     width:780px;         /* 幅を決定する */
    }

h1 {
font-size:90%;
    }
	
.google-map {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
	left: 0;
    right: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {

	img {
	width:100%;
	max-width:100%;
	height:auto;
	}
	
	#main {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:center;     /* 中身を左側表示に戻す */
     width:100%;         /* 幅を決定する */
    }
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

	img {
	width:90%;
	max-width:90%;
	height:auto;
	}
	
	#main {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:center;     /* 中身を左側表示に戻す */
     width:100%;         /* 幅を決定する */
    }
}