@charset "utf-8";

*{margin:0px; padding:0px;}

html {width: 100%; margin:0px; background-color: #fff;}
 
body {width: 750px; max-height: 100%; margin: auto; background-color: #555;}

#header {width: 100%; min-height: 3%; background-color: #58a; line-height: 40px}
#navi {width: 25%; background-color: #555; float: left; overflow: auto;} /*#666*/
#content {width: 75%; height: auto; background-image: url(bkcross.gif); float: right; overflow: auto; height: 60vh;}
#footer {width: 100%; height: 3%; background-color: #CCC; clear: both;} /*回り込みの解除*/

body {box-shadow: 0px 0px 18px 3px #999;}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, 
	"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#header {color: #fff; font-size: 12px; text-align: center;}
#navi {color: #eee; font-size: 12px; text-align: left;}
#content {color: #222; font-size: 12px; text-align: left; overflow: auto;}
#footer {color: #000; font-size: 12px; text-align: center;}

#navi p {color: #eee; margin:15px;}

#navi a:link {color: #eee; text-decoration: none; display: block;}
#navi a:hover {color: #000; background-color: #bd7; background-repeat: no-repeat;} /*黄緑*/
#navi a:visited {color: #bbb;}

#navi img {width: 85%; display:block; margin:auto; border:0;}

#content img {border:0; margin:15px; overflow: auto;}

#content p {margin: 15px;}

#content iframe {margin: 15px;}

#content table {margin: 10px; border:0px #FFFFFF solid; }

#content td {padding: 0px; border:1px #FFFFFF solid;}

#content ul {
 padding: 0px 15px 15px 15px; margin-left:20px; list-style-type: none; 
 list-style-image:url("../img/bullet.gif");
}


audio { width: 270px; height: 40px;}

#content ol { padding: 0px 15px 15px 15px; margin-left:20px;}
#content li { padding: 3px 0px 3px 0px;}

#div1c { padding: 15px 15px 15px 15px;}


#content a:link {color:navy; text-decoration: none; left no-repeat;}
#content a:hover {color: #000; background-color #bd7;}
#content a:visited {color:#777;}
#content a.lk {padding-left:20px; margin-left:10px; background:url("b4.gif") left no-repeat;}

H1 {font-size: 140%;} 
H2 {line-height: 200%; font-size:110%;	color: #fff; background-color: #888; margin:10px; padding-left: 10px;}
H3 {line-height: 200%; font-size:110%;	color: #000; background-color: #eee; margin:10px; padding-left: 10px;}
H4 {line-height: 200%; font-size:100%;	color: #5e8eab; margin:10px;}
H5 {line-height: 100%; font-size: 80%;	color: navy; margin:10px;}

HR {margin: 10px;}

#footer {line-height: 25px;}


.ac-container{ width: 520px; margin: 10px auto 30px auto;}
.ac-container label{
	font-family: 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px; position: relative; z-index: 20;
	display: block; height: 60px; cursor: pointer;
	color: #668; font-weight: bold; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px; font-size: 19px; background-color: #e9e9e9;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover { background: #dde; }
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
		background: #c6e1ec; color: #3d7489;
		text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
		box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
		content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px;
}
.ac-container input{ display: none;}
.ac-container article{
		background: rgba(255, 255, 255, 0.5); margin-top: -1px;
		overflow: hidden; height: 0px; position: relative;
		z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
		transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
		box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article { height: auto; }