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

.cont { margin: 0 auto; width: 960px; }
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { margin: 0px 10px 40px 10px; float: left }
.grid-1 { width: 60px }
.grid-2 { width: 140px }
.grid-3 { width: 220px}
.grid-4 { width: 300px }
.grid-5 { width: 380px }
.grid-6 { width: 460px }
.grid-7 { width: 540px }
.grid-8 { width: 620px }
.grid-9 { width: 700px; }
.grid-10 { width: 780px }
.grid-11 { width: 860px }
.grid-12 { width: 940px }

.grid-l { float: left;}
.grid-r { float: right;}
.grid-r-9 { float: right; width: 720px}

.hide-pc { display: none}

/*
@media only screen and (min-width: 768px) and (max-width: 959px) {
.cont { width: 768px }
.grid-1 { width: 44px }
.grid-2 { width: 108px }
.grid-3 { width: 172px }
.grid-4 { width: 236px }
.grid-5 { width: 300px }
.grid-6 { width: 364px }
.grid-7 { width: 428px }
.grid-8 { width: 492px }
.grid-9 { width: 556px }
.grid-10 { width: 620px }
.grid-11 { width: 684px }
.grid-12 { width: 748px }
.hide-tablet { display: none}

.grid-r-9 { width: 576px }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.cont { width: 480px }
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-r-9 { width: 460px }
.hide-phone { display: none}
.grid-r-9 { float: none;}
}

@media only screen and (max-width: 479px) {
.cont { width: 320px }
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-r-9 { width: 300px }
.hide-phone { display: none}
.grid-r-9 { float: none;}
}