@media screen {
  body {
    width           : 900px;
    margin          : 0 auto 1em;
    border          : 3px #6a6 ridge;
    border-radius   : 0 0 10px 10px;
    background      : #f8fff8 url(http://saijou.ne.jp/page/img/uzo_519.jpg);
    box-shadow      : 6px 6px 6px rgba(0,0,0,.4);
  }

  h1 {
    text-align      : center;
    font            : bold 28px serif;
    margin          : 1ex;
    color           : #060;
  }

  header p {
    background      : #474;
    color           : #efb;
    margin          : 0;
    padding         : 0 1ex;
    font            : normal small/160% sans-serif;
    background      : #474;
    background      : -moz-linear-gradient(rgba(60,110,60,0.5), rgba(60,110,60,1));
    background      : -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(30,120,35,0.5)), to(rgba(30,120,35,1)));
  }

  header img {
    vertical-align  : bottom;
  }

  .fc {
    position: relative;
    height          : 285px;
    background: white;
    list-style: none;
    box-sizing: border-box;
    margin: 0; padding: 0;
    list-style-type: none;
  }


.fc li img {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  vertical-align  : bottom;
  width: 100%;
  opacity: 0;
  animation: image-fade 40s infinite;
}

.fc li:nth-of-type(1) img { animation-delay: 0s;}
.fc li:nth-of-type(2) img { animation-delay: 8s;}
.fc li:nth-of-type(3) img { animation-delay: 16s;}
.fc li:nth-of-type(4) img { animation-delay: 24s;}
.fc li:nth-of-type(5) img { animation-delay: 32s;}

@keyframes image-fade {
  0% { opacity: 0;}
  15% {opacity: 1;}
  50% {opacity: 1;}
  85% {opacity: 0;}
  100% {opacity: 0;}
}




  #SAIJOU_IMAGES {
    height          : 285px;
    background: white;
  }

  nav.menu {
    height: 36px;
    border-top: 1px #080 solid;
    overflow: hidden;
  }

  nav.menu ol li {
    float : left;
  }

  nav.menu a, nav.menu li strong {
    background          : -moz-linear-gradient(rgba(60,110,60,0.5), rgba(60,110,60,1));
    background          : -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(30,120,35,0.5)), to(rgba(30,120,35,1)));
    text-align      : center;
    display: inline-block;
    border-right    : 1px #484 solid;
    width           : 149px;
    color           : #ff3;
    text-decoration : none;
    font: normal 16px/36px sans-serif;
    border-bottom: 3px #585 solid;
  }
  nav.menu a:hover {
    background      : #cf8;
    color           : #000;
  }
  nav.menu li strong {
    background      : #7c7;
    color           : #fff;
    text-shadow : 2px 2px 2px #000;
    box-shadow: -4px -4px 4px rgba(255,255,255,.6) inset, 4px 4px 4px rgba(0,0,0,.3) inset;
  }

  section {
    padding         : 2ex;
    background: white;
  }

  h2 {
    color           : #090;
    margin          : 3ex 0 .5ex 0;
    text-shadow     : 3px 3px 5px rgba(0,0,0,.6);
    font            : normal 20px/180% sans-serif;
  }
  h2:before {
    content         : "■";
  }

  h3 {
    color           : #339;
    margin          : 1.5ex 0 .5ex 2ex;
    text-shadow     : 3px 3px 5px rgba(0,0,0,.6);
    font            : normal 18px/180% sans-serif;
  }
  h3:before {
    clear: both;
    content: "●";
    margin-right: .5ex;
    vertical-align: top;
  }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul.underline li {
    border-bottom:1px #080 dotted;
    margin-right:2em;
  }

  section ul li, section ol li {
    text-indent: -2em;
    margin: 0 2em 1ex 2em;
    font: normal 16px/155% sans-serif;
  }

  ol.underline li, ul.underline li {
    border-bottom: 1px gray dotted;
    clear: both;
  }
  ul li:before {
    content: "*";
    text-shadow: 2px 2px 2px rgba(0,0,0,.4);
    color: #060;
    margin: 0.1ex .2ex 0 1em;
  }
  section h3+ul li, section h3+ol li {
    color: #224;
    text-indent: -2em;
    margin: 0 2em .8ex 3em;
    line-height: 150%;
  }

  hr {
    margin: 3em;
    border: 1px dashed #8c8b8b;
  }


  iframe {
    border: 3px silver ridge;
    border-radius: 16px;
    width: 100%;
  }
  
  p {
    text-indent: 1em;
    margin: 1ex 1em;
  }
  
  dl {
    margin-bottom: 1em;
    line-height: 140%;
  }

  ruby {
    ruby-position:above;
  }
  rb:after {
    content: " ";
  }
  rt,rp {
    font-size:50%;
    color: #373;
  }
  
  form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), form textarea {
    width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  form textarea:focus, form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus {
    background: rgba(255,255,0,.1);
  } 


  table {
    box-sizing          : border-box;
    margin              : 1em 0;
    width               : 100%;
  }
  caption {
    caption-side        : bottom;
    text-align          : right;
    font-size           : small;
  }
  th, td {
    padding: 0 .5ex;
  }
  th {
    font: normal small/200% sans-serif;
    white-space: nowrap;
  }



  dt {
    margin          : 1ex 0 1ex 2em;
    color           : #060;
  }
  dd {
    padding-left: 3em;
  }
  label {
    font-weight: bold;
    font-size:95%;
    padding-right: 1ex;
    display: inline-block;
    width:8em;
  }

  label.yakushoku {
    display: inline;
  }

  strong {
    font-weight: bold;
  }

  em {
    font-style      : normal;
    color           : #800;
    padding: 0 .5ex;
  }


  footer {
    background      : #ded;
    text-align      : center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0fce8+0,b4d6ab+100 */
    background: #f0fce8; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0fce8 0%, #b4d6ab 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f0fce8 0%,#b4d6ab 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f0fce8 0%,#b4d6ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0fce8', endColorstr='#b4d6ab',GradientType=0 ); /* IE6-9 */
  }
  footer ul {
    padding: 1ex;
    list-style: none;
  }
  footer li {
    display         : inline;
    line-height     : 270%;
    padding         : 0 1ex;
    font-size: small;
    list-style: none;
    text-indent: 0;
  }
  footer li:nth-of-type(n+2) {
    border-left     : 1px #383 solid;
  }
  footer li:before {
    content: "";
    margin: 0;
  }
  footer a {
    color: #272;
    font: normal 14px/20px sans-serif;
    text-decoration-line: none;
  }
  footer p {
    margin          : 0;
    color           : #efd;
    font            : normal small/160% sans-serif;
    background      : #474;
    background      : -moz-linear-gradient(rgba(60,110,60,0.5), rgba(60,110,60,1));
    background      : -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(30,120,35,0.5)), to(rgba(30,120,35,1)));
  }
  footer, footer p {
    border-radius: 0 0 8px 8px;
    border-style: none;
  }


  .num { text-align: right; padding-right: 1ex; }
  .photo { padding: 2px;  box-shadow: 3px 3px 3px rgba(0,0,0,.3); margin: 0 1ex;}
  .sun, .Sun { color: #c33;}
  .sat, .Sat { color: #33c;}
  .right { float: right; }
  .left { float: left;}
  .center {text-align: center;}

  .list {
    margin: 0 1em 1em 1em;
    padding: 1ex;
    overflow: auto;
    background: rgba(0,0,0,.02);
    box-shadow: 4px 4px 4px rgba(0,0,0,.1) inset;
    border: 1px rgba(0,128,0,.5) solid;
    border-left: 6px rgba(0,128,0,.5) solid;
    border-right: 6px rgba(0,128,0,.5) solid;
  }
  .list td, .list th {
    border-style: none;
    border-bottom: 1px gray dotted;
    font: normal 12px/20px sans-serif;
  }
  .dot th, .dot td {
    border-style: none;
    border-bottom: 1px gray dotted;
    background: transparent;
    font: normal 15px/30px sans-serif;
  }


.hyou thead th {
  white-space: pre;
}
  .hyou td {
    height: 3em;
    text-align: center;
  }
  .hyou td:not(:empty) {
    box-shadow: 4px 4px 4px rgba(0,0,0,.2) inset, -4px -4px 4px rgba(255,255,255,.7) inset; 
  }
  .hyou th {
    text-align: center;
    height: 3em;
    background: rgba(0,0,0,.1);
    border-style: outset;
  }
  .hyou th:first-line {
    color: #040;
  }
  .hyou td.book {
    text-align: center;
    background: rgba(0,0,0,.05);
    box-shadow: 4px 4px 4px rgba(0,0,0,.2) inset, -4px -4px 4px rgba(255,255,255,.7) inset; 
  }
  .hyou td:not(:empty) {
    background: rgba(0,0,0,.15);
  }


  .waku {
    background: rgba(0,255,0,.03);
    border: 3px #4a4 ridge;
    border-radius: 8px;
    margin: 1em 1em 2em 1em;
    padding: 0 1em 2em 1ex;
    box-shadow: 6px 6px 8px rgba(0,100,0,.1) inset, -6px -6px 8px rgba(0,100,0,.1) inset;
  }
  .Sunday, .Sun {
    background: rgba(255,0,0,.1);
  }
  .Saturday, .Sat {
    background: rgba(0,0,255,.1);
  }
}

/*--------------------------------------*/

@media print {
  * {
    line-height           : 180%;
    font-size: 10.5pt;
    color                 : black;
  }

  body {
    background-color      : white;
    font-family           : "ヒラギノ明朝 Pro W3", "細明朝体", "ＭＳ Ｐ明朝", serif;
    border : none;
  }

  header, footer, nav.menu, ruby rt, ruby rp, .noprint {
    display : none;
  }

  ol { list-style: none;}

  table {
    width                 : 100%;
    border-collapse       : collapse;
    border                : 1px black solid;
  }

  caption {
    caption-side: bottom;
    text-align: right;
    font-size: small;
  }

  th, td {
    border-collapse       : collapse;
    border-spacing        : 0;
    text-align            : left;
    padding               : 0.5ex;
    overflow              : auto;
    border                : 1px black solid;
    white-space      : nowrap;
  }
  th {
    font: normal 100% "ＭＳ Ｐゴシック",sans-serif;
  }

  .underline li {
    clear: both;
    border-bottom: 1px black dotted;
    margin: 1ex 1em;
  }
  p { text-indent: -1em; margin-left: 1em;}

  a, a:link, a:visited { text-decoration: none; color: black; }
  input, select, textarea { display: none; }
  img {
    border                : 0 none;
  }
  label { padding: 0 .5ex; }

  rt { font-size: x-small; }
}