body      { color:#006; font-family: Arial, sans-serif; background-color: #ccc;
              margin: 0; max-width: 800px; padding: 0; font-size: 1rem; }
  header    { position: fixed; padding: 0.1em 0 0.1em; top: 0; left: 0; right: 0;
              background-color: #ccf; border-bottom: 2px solid #006; max-width: 800px; z-index: 10; }
  footer    { position: fixed; padding: 0.1em 0 0.1em; bottom: 0; left: 0; right: 0;
              background-color: #ccf; border-top: 2px solid #006; max-width: 800px; z-index: 10; }
  main      { padding: 2em 0 5em; display: block; max-width: 800px; z-index: 0; }
  .ytlist   { position: absolute; margin-left: 810px; max-width: 380px; }
  #nav-path { display: block; position: sticky; position: -webkit-sticky; top: 2em; z-index: 5; }
  #nav-path li { display: inline; list-style-type: none; }
  #nav-path li:not(:first-child)::before { content: " : "; }
  a:link    { color:#900; text-decoration:underline; }
  a:visited { color:#603; text-decoration:underline; }
  a:active  { color:#900; text-decoration:underline; }
  a:hover   { color:#900; background-color: #9cc; text-decoration:underline; }
  a:focus   { color:#900; background-color: #9cc; text-decoration:underline; }
  div
            { margin: 0; padding: 0; }
  table
            { margin: 0.5em 1em; padding: 0; width: 95%;
              border-collapse: collapse; text-align: left; }
  tr
            { padding: 0; border: 1px; }
  th, td
            { vertical-align: center; padding: 0.2em 0.2rem; }
  ul
            { margin: 0.1em 1em; padding: 0.2em 1rem; }
  ol
            { margin: 0.1em 1em; padding: 0.2em 1rem; }
  p, address 
            { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; }
  li, blockquote
            { vertical-align: top; }
  h1        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 1em; }
  h2        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 1.2em; }
  h3        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 1em; }
  h4        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 1em; }
  h5        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 0.8em; }
  h6        { margin-top: 0.1em; margin-bottom: 0.1em; padding: 0.2em 1rem; font-size: 0.8em; }
  .small    { font-size: 0.8em; }
  .big      { font-size: 1.2em; }
  .grey     { color:#333; }
  .red      { color:#900; }
  img		{ margin: 0.5em 1em; border: solid 1px #006; max-width: 480px; }
td img		{ margin: 0; border: solid 1px #006; max-width: 480px; }
  audio     { display: block; z-index: 1; }
  button	{ background-color: #006; color: #ccf; text-decoration: none; 
  			  margin: 0.2em 1em; padding: 0.2em 0.3rem; border: 1px solid #006;
  			  font-size: 1em; font-weight: bold; }
#menuButton { padding: 0em 0.3em; }
  a.img:hover	{ color:#c00; background-color: #ccc; text-decoration:none; }
  iframe    { margin: 0.5em 1em; border: solid 1px #006; }
  video    { margin: 0.5em 1em; border: solid 1px #006; max-width: 480px; }
  .box	    { margin: 0.5em 1em; padding: 0; border: solid 1px #006; }
.menu	    { background-color: #fff; margin: 0; padding: 0.5em 1rem; }
.menu ul	{ text-indent: 0; margin: 0; padding: 0; list-style-type: none; }
.menu li	{ text-indent: 0; margin: 0 ; padding: 0; list-style-type: none; font-size: 1em; }
.menu a		{ text-decoration: none; }
.tour	    { margin: 0.2em 1em; padding: 0; }
.tour ul	{ text-indent: 0; margin: 0em 1em; padding: 0; list-style-type: none; }
.tour li	{ text-indent: 0; margin: 0 ; padding: 0; list-style-type: none; display: inline; font-size: 1em; font-weight: bold; }
.tour a		{ background-color: #006; color: #ccf; text-decoration: none; margin: 0; padding: 0.2em 0.3em; border: 1px solid #006; }
.path	    { border-bottom: 1px solid #006; margin: 0; margin-bottom: 1em; padding: 0.4em 1rem; background-color: #cc9; }
.path ul	{ text-indent: 0; margin: 0; padding: 0; list-style-type: none; }
.path li	{ text-indent: 0; margin: 0 ; padding: 0; list-style-type: none; font-size: 0.8em; }
.path a		{ text-decoration: underline; }
.inf	    { margin: 0; }
.inf ul		{ text-indent: 0; margin: 0; padding: 0; list-style-type: none; }
.inf li		{ text-indent: 0; margin: 0 ; padding: 0; list-style-type: none; display: inline; font-size: 0.8em; }
.inf a		{ text-decoration: underline; margin: 0; padding: 0.2em 0.3rem; border: 0; }
.button	    { margin: 0; overflow: auto }
.button ul	{ text-indent: 0; margin: 0; padding: 0; list-style-type: none; }
.button li	{ text-indent: 0; margin: 0 ; padding: 0; list-style-type: none; display: block; font-size: 1em; }
.button a	{ background-color: #9cc; text-decoration: none; margin: 0; padding: 0.2em 0.3rem; border: 1px solid #006; display: block; }
.anchor		{ padding-top: 6.0em; }

@media screen and (max-width: 1400px) {
  .ytlist   { position: absolute; margin-left: 810px; max-width: 380px; }
}
@media screen and (max-width: 1200px) {
  .ytlist   { position: absolute; margin-left: 0px; max-width: 800px; }
}
@media screen and (max-width: 24em) {
  #nav-path li { display: block; }
  #nav-path li::before { content: "» "; }
  #nav-path li:not(:first-child)::before { content: "» "; }
    table, tbody {
		width: 95%;
		display: block; border-collapse: collapse; 
		padding: 0; 
		border: 0;
       }
	thead {
		padding: 0; 
		display: none;
		border: 0;
	}
	tr {
		padding: 0; 
		border: 0px solid red; margin-bottom: 0.5em;
	}
	tbody {
		padding: 0; 
		display: block;
	}
	td {
		width: 100%;
		display: inline-block;
		padding: 0.2em 0.2rem;
		text-align: left;
		border: 0px solid black;
	}
}