*{
          padding : 0px ;
          margin : 0px ;
          font-family : 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif' ;
}
/* 0 to 199px */
body{
  background: #D3D3D3;
}
header {
  min-width: 200px;
  height:110px;
  border-bottom: 2px solid #ff9900;
  margin: 0 auto;
  background: #eeeeee;
  width:100%;
}
  header #TitleBox {
    width: 200px;
    margin: 0 auto;
    white-space: nowrap;
  }
  header #MainTitle {
    font-size: 35px;
    width: 180px;
    padding: 10px 10px 0 10px;
    margin-left:0;
    top: 0;
    position:relative;
  }
  header #Breadcrumb {
    font-size: 15px;
    width: 180px;
    padding-left: 10px;
    margin-left:0;
    top: 0;
    position:relative;
  }
  header #IndexLink{
    text-align:right;
    font-size:18px;
    line-height: 0%;
    width: 120px;
    padding-right: 10px;
    margin:0 0 0 auto;
    top: 15px;
    position:relative;
  }
#contents {
  width: 200px;
  margin: 0 auto;
  overflow: hidden;
}
  .grid {
    float: left;
    width: 192px;
    height: 192px;
    background: #ffffff;
    margin: 2px;
    padding: 2px;
    display:table;
    text-align: center;
  }
  .grid > *{
    display:table-cell;
    vertical-align: middle;
  }
  .gDescription {
    width: 180px;
    background: #9fb7d4;
    margin: 0px;
    padding:10px;
    text-align: left;
  }
  .gDescription > *:not(ul):not(ol){
    display:block;
    width:180px;
  }
  .gDescription > a{
    display:inline;
  }

#contents h1{
  color: #222222;
  line-height: 180%;
  font-size: 1.8em;
}
#contents h2{
  color: #222288;
  line-height: 120%;
  font-size: 1.6em;
}
#contents h3{
  color: #3333DD;
  line-height: 120%;
  font-size: 1.4em;
}

table#LinkTable {
    width: 180px;
    border: 1px #FFBB66 solid;
    border-collapse: collapse;
    border-spacing: 0;
    color: #FFFFFF;
    text-align:center;
    background: #BDD2FF;
    font-size:12px;
    margin:0 auto;
    margin-bottom:20px;
}
table#LinkTable td:hover {
    background: #CFDEFF;
    color: #FFFFFF;
}
table#LinkTable td {
    padding: 5px;
    border: #FFBB66 solid;
    border-width: 0 1px 0 1px;
    vertical-align:middle;
    width: 90px;
}
table#LinkTable td img{
    width:12px;
    vertical-align:middle;
}
table#LinkTable td a:link{
    text-decoration:none;
}
table#LinkTable td a:visited{
    text-decoration:none;
}

  .gMovie {
    width: 200px;
    height: 200px;
    background: #999999;
    margin: 0px;
    padding: 0px;
  }
  #player_a {
    width: 200px;
    height: 200px;
  }
#ChapterTable{
  border-top:2px solid #5050AB;
  border-left:2px solid #5050AB;
  border-right:2px solid #00008B;
  border-bottom:2px solid #00008B;
  border-collapse:collapse;
  border-spacing:0;
  background-color:#ffffff;
  empty-cells:show;
  width:200px;
  margin:0 auto;
}

#ChapterTable tbody{
  padding-bottom: 50px;
}

#ChapterTable th{
    border-right:1px solid #00008B;
    border-bottom:1px solid #00008B;
    color:#330000;
    background-color:#8EFF8E;
    background-position:left top;
    padding:5px 10px;
    text-align:center;
}
#ChapterTable td{
    border-right:1px solid #00008B;
    border-bottom:1px solid #00008B;
    padding:5px 10px;
    width:260px;
}

footer {
  border-top: 2px solid #ff9900;
  height: 40px;
  background: #eeeeee;
  width:100%;
  margin-top: 50px;
}
  footer #copyright {
    width: 400px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
  }
/* ** */

@media only screen and (min-width: 400px) {
header {
  min-width: 400px;
}
  header #TitleBox {
    width: 400px;
  }
  header #MainTitle {
    width: 380px;
  }
  header #Breadcrumb {
    width: 380px;
  }
#chapters {
  width: 400px;
}
#contents {
  width: 400px;
  overflow: hidden;
}
  .gDescription {
    width: 380px;
  }
  .gDescription > *:not(ul):not(ol){
    width:380px;
  }
  .gDescription > table.data{
    display:table;
    width:10px;
  }
table#LinkTable {
    width: 370px;
}
table#LinkTable td {
    width: 190px;
}
  #player_a {
    width: 400px;
    height: 400px;
  }
#ChapterTable{
  width:400px;
}
/* ** */}

@media only screen and (min-width: 600px) {
header {
  min-width: 600px;
}
  header #TitleBox {
    width: 600px;
  }
  header #MainTitle {
    width: 580px;
  }
  header #Breadcrumb {
    width: 580px;
  }
#chapters {
  width: 600px;
}
#contents {
  width: 600px;
  overflow: hidden;
}
  .gDescription {
    width:380px;
  }
  .gDescription > *:not(ul):not(ol){
    display:block;
    width:380px;
  }
  .gDescription > table.data{
    display:table;
    width:10px;
  }
  #player_a {
    width: 400px;
    height: 400px;
  }
#ChapterTable{
  width:600px;
}
/* ** */}

@media only screen and (min-width: 800px) {
header {
  min-width: 800px;
  height:90px;
}
  header #TitleBox {
    width: 800px;
  }
  header #MainTitle {
    width: 780px;
  }
  header #Breadcrumb {
    width: 660px;
    float: left;
  }
#chapters {
  width: 800px;
}
#contents {
  width: 800px;
  overflow: hidden;
}
  .gDescription {
    width: 380px;
  }
  .gDescription > *:not(ul):not(ol){
    display:block;
    width:380px;
  }
  .gDescription > table.data{
    display:table;
    width:10px;
  }
  #player_a {
    width: 400px;
    height: 400px;
  }
#ChapterTable{
  width:800px;
}
/* ** */}

@media only screen and (min-width: 1000px) {
header {
/*  min-width: 1000px;*/
}
  header #TitleBox {
    width: 1000px;
  }
  header #MainTitle {
    width: 980px;
  }
  header #Breadcrumb {
    width: 860px;
  }
#chapters {
  width: 1000px;
}
#contents {
  min-width: 1000px;
  overflow: hidden;
}
  .gDescription {
    width: 480px;
  }
  .gDescription > *:not(ul):not(ol){
    display:block;
    width:480px;
  }
  .gDescription > table.data{
    display:table;
    width:10px;
  }
  #player_a {
    width: 500px;
    height: 500px;
  }
#ChapterTable{
  width:1000px;
}
/* ** */}

#MovieBox {
          float: left;
/*          width: 500px;*/
          text-align: center ;
}

#IndexBox {
          float: left;
          width: 900px;
          text-align: left;
}

p{
  margin: 0.8em 0em;
}

strong.red{
  color: red;
}
strong.blue{
  color: blue;
}
strong.green{
  color: green;
}
strong.large{
  font-size: x-large;
}
strong.small{
  font-size: x-small;
  font-weight: lighter;
}
a{
  color: #13a;
}
a:visited{
  color: #E85700;
}

.gDescription ol{
    padding:0 0 0 3em;
    display: table;
    counter-reset: li;
}

.gDescription ul{
    padding:0 0 0 3em;
    display: table;
}

.gDescription li {
	position: relative;
}

.gDescription ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .4em;
	left: -1.4em;
	width: 10px;
	height: 5px;
	border-left: 2px solid #ce1c34;
	border-bottom: 2px solid #ce1c34;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.gDescription ul ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .4em;
	left: -1.4em;
	width: 10px;
	height: 5px;
	border-left: 2px solid #3498db;
	border-bottom: 2px solid #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.gDescription ol li::after {
 content: counter(li) "";
 counter-increment: li;
 position: absolute;
 top: .2em;
 left: -1.7em;
 width: 1.1em;
 height: 1.1em;
 background: #3498db;
 border-radius: 50px;
 color: #ddd;
 line-height: 1.2;
 text-align: center;
}

table.data{
    background:LightSilver;
    border: 2px DimGray solid;
    margin-left: auto;
    margin-right: auto;
    display: table;
    width: 10px;
    white-space: nowrap;
}

table.data th{
    background:NavajoWhite;
    border: 1px DimGray solid;
    text-align:center;
}

table.data td{
    background:LavenderBlush;
    border: 1px DimGray solid;
    text-align:center;
}

table.list{
    background:LightSilver;
    border: 2px DimGray solid;
    margin-left: auto;
    margin-right: auto;
}

table.list th{
    background:NavajoWhite;
    border: 1px DimGray solid;
    text-align:center;
}

table.list td{
    background:LavenderBlush;
    border: 1px DimGray solid;
    text-align:center;
}

*{
	margin:0;
	padding:0;
	list-style-type:none;
}
#container{
	margin:100px auto;
	width:250px;
}
ul.menu li{
	float:none;
	width:250px;
	height:40px;
	background:url("../images/button1.png");
	position:relative;
}
* html ul.menu li{
	display:inline;
	zoom:1;
}
*+html ul.menu li{
	display:inline;
	zoom:1;
}
ul.menu li a{
	display:block;
	width:100%;
	height:100%;
	line-height:40px;
	text-indent:25px;
	font-weight:bold;
	color:#DFDFC5;
	text-decoration:none;
	position:relative;
}
ul.menu li a:hover{
	background:url("../images/button1_over.png");
}
ul.menu li ul{
	display:none;
	position:absolute;
	left:250px;
	top:0;
	z-index:100;
}
ul.menu li ul li{
	float:none;
	width:250px;
	height:40px;
	background:url("../images/button2.png");
	position:relative;
	z-index:100;
}
ul.menu li ul li a:hover{
	background:url("../images/button2_over.png");
}
ul.menu li ul li a{
	display:block;
	width:100%;
	height:100%;
	line-height:40px;
	text-indent:25px;
	font-size:0.85em;
	font-weight:normal;
	color:#454545;
	text-decoration:none;
	position:relative;
}
ul.menu{
	zoom:1;
}
ul.menu:after {
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}