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

/* 基準値 1200px */
#main { width: 1100px; 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-l { width: 1100px; margin: 0 auto; }
.container-m { width: 800px; margin: 0 auto; }
.container-s { width: 650px; margin: 0 auto; }
.header_logo { width: 180px; }

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

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