.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

body  {
	font-size: 1em;
	color: black;
}
h1  {
	font-size : 1.8em;
	color : #3f3fff;
	text-align : center;
}
h1.info {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	color: #cccccc;
}
h2  {
	font-size : 1.4em;
	color : #3f3fff;
}
h2.info {
	font-size: 1.1em;
	font-weight: bold;
	color: #cccccc;
}
h3.info {
	font-size: 1em;
	font-weight: bold;
	color: #cccccc;
}
h3.question { background-color: #FFFFCC; padding: 4; }
h3.answer { background-color: #CCFFFF; padding: 4; }
h3.cute { background-color: #FFFF80; padding: 4; }

.readable {
	line-height: 150%;
}
.easy {
	line-height: 125%;
}
.comment  {
	font-size: 0.9em;
	color: #000080;
}
.remarks  {
	font-size: 0.9em;
	color: #530000;
}
.footer {
	font-size: 0.9em;
	color: teal;
}
.jtext {
	font-size: 1em;
	color: #530000;
	line-height: 150%;
}
.eleven {
	font-size: 1.1em;
}
.jeleven  {
	font-size: 1.1em;
	color: #530000;
}
.grayout {
	color: gray;
}
.juen {
	color: #530000;
}
.kokugo  {
	color: #3f3fff;
}
.index {
	font-size: 1.1em;
	color: #530000;
	font-weight: bold;
}
.furigana {
	font-size: xx-small;
	font-weight: lighter;

}
td {
	line-height: 135%;
}
td.name {
	font-size: 1.1em;
	font-weight: bold;
}
.infonote {
	font-size: 0.9em;
	background-color: #dcdcdc;
	color: #cccccc;
}
.infotitle {
	background-color: #333333;
	color: #cccccc;
}
.menutitle {
	background-color: #530000;
	color: #cccccc;
}
.menu {
	color: #cccccc;
}
.th_title {
	background-color: #530000;
	color: #cccccc;
	font-size: large;
	font-weight: bold;
	text-indent: 1em;
	letter-spacing: 0.5em;
}
dl { line-height: 135%; }

a { text-decoration: none; }
a:link { color: blue; }
a:visited { color: olive; }
a:hover {color: green; }

a.menu { text-decoration: none; }
a.menu:link { color: #cccccc; }
a.menu:visited { color: #99ffff; }
a.menu:hover {color: yellow; }