*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
a {text-decoration: none;color:#006699}
ul {list-style-type: none;}

#wrapper {max-width: 960px;margin:0 auto;line-height: 1.6;}


h1 {text-align: center;color:#006699;margin-top:3em;padding:0.5em;border-bottom:1px #cccccc solid;font-size: 2.5em;
  text-shadow: 1px 1px 0 #80ff80,
               1px -1px 0 #80ff80,
               -1px 1px 0 #80ff80,
               -1px -1px 0 #80ff80
               }
.text {width:600px;margin:2em auto}
.topnavi {width:300px;margin:2em auto}

.topnavi a {width:10em;margin-right: 1em;}
.topnavi div {display: flex;border-bottom: 1px #666666 dotted;justify-content: space-between;}
.topnavi p {margin:0;padding:0}

#contents caption {text-align: left;font-weight: bold;padding-bottom: 0.2em;}
#contents caption::before {content:"\25B6\2002"}

#contents table {
    width: 100%;
    border: 1px solid #B0C4DE;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
}
#contents th {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
    background: #4682B4;
    white-space: nowrap;
}
#contents td {
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
	vertical-align: top;
}
#contents tr:nth-child(2n+1) {
    background: #F0FFFF;
}

#contents tr td:nth-of-type(1) {width: 4em;text-align: center;}
#contents tr td:nth-of-type(2) {white-space: nowrap;width: 35%;}

#navi ul {text-align: right;}
#navi li {display: inline;margin-right:1em;min-width:7em}
#navi a::before {content:"\00bb\2002"}

.next {text-align: right;}
.pagenavi {display:flex;display: -webkit-flex;margin:0 0 1em 0;font-size:0.98em;height:4em}
.pagenavi p {text-align:center;background-color:#e7e7e7;border:1px #979797 solid;min-width:7.5em}
.pagenavi a {display:block;width:100%;height:100%;padding:3px;color:#006699;white-space:nowrap}
.pagenavi a:hover {background-color:#ffffff}
.now {background-color:#ffffff;font-weight:bold}
.now::before {content:"\25B6\2002"}

H3::before {content:"\25A0\2002"}

.ct {text-align: center;}

#footer {text-align: center;height: 3em;line-height: 3em;margin-top: 1em;}


#image_list {  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

#image_list p {width: 220px;text-align: center;border: 1px #cccccc solid;margin:2px;font-size:0.96em}
#image_list img {max-height: 140px;overflow: hidden;margin-top:5px}

/*ŒÂ•Ê*/
#photos {max-width:860px;margin: 1em auto;}
#photos img {max-width:860px;max-height:860px;overflow: hidden;border: 1px #cccccc solid;}
.image {text-align: center;}
#photos th {text-align: left;}
#photos tr td:nth-of-type(1) {width: 5%;text-align: left;}


.pagetop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 20px;
    text-decoration: none;
    padding: 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    border-radius:10px ;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    padding:10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}