@charset "utf-8";
@import url("ress.css");
@import url("bootstrap-grid.css");
@import url("module.css");
@import url("module_sub.css");
@import url("common.css");

/* 基準値 1200px */
#main { width: 1200px; max-width: 100%; margin: 0 auto; }
.header_inn { width: 1100px; margin: 0 auto; }
.footer_inn { width: 1100px; margin: 0 auto; }
.container { width: 1000px; margin: 0 auto; }
.container-mini { width: 800px; margin: 0 auto; }
.container-large { width: 1200px; margin: 0 auto; }
.header_logo { width: 200px; }

/* インナー幅（1000px）より小さくなったら*/
/* 固定値px / 基準幅px * 100vw */
@media (min-width:576px) and ( max-width:1199px) {
html{ font-size: calc(100vw / 100); }
.header_inn { width: calc( (1100 / 1200) * 100vw ); }
.footer_inn { width: calc( (1100 / 1200) * 100vw ); }
.container { width: calc( (1000 / 1200) * 100vw ); }
.container-mini { width: calc( (800 / 1200) * 100vw ); }
.container-large { width: calc( (1200 / 1200) * 100vw ); }
.header_logo { width: calc( (200 / 1200) * 100vw ); }
}

/*画面サイズが575px以下のとき*/
@media (max-width: 575px) { 
html { font-size: 10px; }
#main { width: 90%; }
.header_inn,
.footer_inn { width: 90%; }
.container{ width: 90%; }
.container-mini,
.container-large { width: 100%; }
}