/*
 * home.css
 * トップページ用
 * ==|==  ==========================================================
 */


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* topinfo */
#topinfo { padding-top: 10px; }
#topinfo h2 { font-size: 128%; letter-spacing: 0.1em; line-height: 2; border-bottom-style: none; padding-left: 0; }
#topinfo h2 img { vertical-align: bottom; margin-right: 2px; }

#topinfo .datafrm {
	margin-bottom: 10px;
}

#topinfo table th { padding-right: 1.5em; }
#topinfo h3 { font-size: 114%; font-weight: bold; text-align: center; margin-top: 0.3em; }
#article #topinfo h3 { border-bottom-style: none; }

#topinfo span.subinfo {
	font-size: 75%;
	line-height: 1.6;
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
}
#topinfo table span.subinfo { letter-spacing: 0; }


/* off_tbl */
.off_tbl .item { background-color: #DFEBF3; }
.off_tbl .name { }
.off_tbl .data { }
.off_tbl caption { font-weight: bold; font-size: 86%; text-align: center; padding-bottom: 4px; }
.off_tbl tbody tr td:last-child { margin-bottom: 0.5em; }
.off_tbl td:first-child { display: inline-block; }




/* ==|== Mobile Landscape and Portrait ======================*/
@media only screen and (min-width: 480px) {
	#topinfo h2 { font-size: 140%; letter-spacing: 0.2em; }
	#topinfo h3 { font-size: 128%; letter-spacing: 0.1em; }
}


/* ==|== Mobile and iPad Portrait ========================== */
@media only screen and (min-width: 768px) {
	#topinfo { padding-top: 20px; }
	#topinfo h2 { font-size: 150%; letter-spacing: 0.4em; }
	#topinfo h3 { font-size: 137%;letter-spacing: 0.2em; }
	
	#topinfo table { font-size: 114%; letter-spacing: 0.1em; }
	#topinfo table th { width: 6em; }
	
	
	.off_tbl { width: 90%; margin-right: auto; margin-left: auto; }
	.off_tbl th,.off_tbl td { padding: 3px 12px; border: 1px solid #B3B3B3; }
	.off_tbl .item { width: 5em; }
	.off_tbl .name { width: 8em; }
	.off_tbl tbody tr td:last-child { margin-bottom: 0; }
	.off_tbl td:first-child { display: table-cell; }
}


/* ==|== Desktop PC ======================================= */
@media only screen and (min-width: 960px) {
	.off_tbl td { background-color: #FFFFFF; }
}

/* ==|== IE ================= */
<!-- min-width: 768px -->
.oldie #topinfo { padding-top: 20px; }
.oldie #topinfo h2 { font-size: 150%; letter-spacing: 0.4em; }
.oldie #topinfo h3 { font-size: 137%;letter-spacing: 0.2em; }

.oldie #topinfo table { font-size: 114%; letter-spacing: 0.1em; }
.oldie #topinfo table th { width: 6em; }

.oldie .off_tbl { width: 90%; margin-right: auto; margin-left: auto; }
.oldie .off_tbl th,.oldie .off_tbl td { padding: 3px 12px; border: 1px solid #B3B3B3; }
.oldie .off_tbl .item { width: 5em; }
.oldie .off_tbl .name { width: 8em; }
.oldie .off_tbl tbody tr td:last-child { margin-bottom: 0; }
.oldie .off_tbl td:first-child { display: table-cell; }

<!-- min-width: 960px -->
.oldie .off_tbl td { background-color: #FFFFFF; }




/* ==|== for Print ======================================*/
@media print {
	.off_tbl .item { background-color: #DFEBF3; }
	
	#topinfo table { font-size: 114%; letter-spacing: 0.1em; }
	#topinfo table th { width: 6em; }
	
	
	.off_tbl { width: 90%; margin-right: auto; margin-left: auto; }
	.off_tbl th,.off_tbl td { padding: 3px 12px; border: 1px solid #B3B3B3; }
	.off_tbl .item { width: 5em; }
	.off_tbl .name { width: 8em; }
	.off_tbl tbody tr td:last-child { margin-bottom: 0; }
	.off_tbl td:first-child { display: table-cell; }
	
}