body { background: #fff; padding:0; margin:0; height: 100%; -webkit-text-size-adjust: 100%;}

img { width: 100%; height: auto;}
ul { margin: 0; padding-left: 0;}
li { list-style: none; margin-bottom: 1em;}
nav { margin-bottom: 100px; }
li ul li { font-size: 90%; margin: 0 0 0.3em 1em; padding: 0;}
a { text-decoration: none; color: #333;}

#bt { position:fixed; top:20px; left:20px; z-index: 4;}
#logo { position:fixed; bottom:15px; right:15px; z-index: 5;}
#menu { position: fixed; top: 0; right: -300px; overflow: scroll; width: 260px; height: 100%; padding: 20px; transition: left .7s, right .7s; background-color: #f7f7f7; opacity: 0.95; z-index: 4; }
.toggle { cursor: pointer; }
#open { display: none; }
#open:checked + #menu { right: 0;}

.seiko { background-color:#564aba;}
.toyoeiwa { background-color:#6e132f;}
.yamawaki { background-color:#063465;}
.hachioji { background-color:#000000;}
.jishukan { background-color:#006aba;}
.kaichi { background-color:#000000;}

@media screen and (min-width: 1280px) {

#header { position: relative; z-index: 1; margin:0; width:100%; background: #fafafa;}
#headbox { position: relative; margin:0 auto; padding: 10px 0 5px 0; width:1240px; height:120px;
background-image: url(img/titlelogo.png); background-attachment: fixed;
background-position: 50% 10px; background-repeat: no-repeat;}
#header h1 { line-height: 100%; font-size: 75%; text-align:right;}
#header p { line-height: 100%; font-size: 90%; margin: 2em 0; text-align:right; color: #666; }
#container { position: relative; margin:0 auto; width:1260px; padding: 20px 0 20px 20px;}

.picture { position: relative; float:left; padding:0; margin-right:20px; margin-bottom:20px; z-index: 2; width:400px; height: 310px; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);}
.pictureimg { position: relative; margin:0; padding: 0; width: 400px;}
.picture a { position: absolute; top:0; left:0; height:100%; width:100%; display: block; }
.pictureover { position: absolute;  top:0; left:0; padding:0; width:400px; height: 310px; z-index: 2;}

.picture h3 { position: absolute; margin: 0; top: 237px; left: 14px; font-size: 14px; color:#333; z-index: 3;}
.picture h4 { position: absolute; margin: 0; top: 0; left: 0; padding:4px 8px; font-size: 12px; color:#fff; z-index: 3;}
.picture p { position: absolute; margin: 0; top: 265px; left: 18px; right: 18px; font-size: 12px; font-weight: normal; color:#666; z-index: 3;}
.file { position: absolute;  margin: 0; top: 0; right: 0; padding:4px 8px; font-size: 12px; font-weight: normal; color:#333; z-index: 3; background-color:#fff;}

#footer { clear: both; position: relative; margin:0; width:100%; height:400px; color: #333; background-color: #fcfcfc;}
#footbox { position: relative;  margin:0 auto; width:1220px; padding: 10px 0 5px 0;}
#footer a { color:#333;}
#footer p { font-size: 14px;}
}


@media screen and (min-width:840px) and (max-width:1279px) {
#header { position: relative; z-index: 1; margin:0; width:100%; background: #fafafa;}
#headbox { position: relative; margin:0 auto; padding: 10px 0 5px 0; width:820px; height:120px;
background-image: url(img/titlelogo.png); background-attachment: fixed;
background-position: 50% 10px; background-repeat: no-repeat;}
#header h1 { line-height: 100%; font-size: 75%; text-align:right;}
#header p { line-height: 100%; font-size: 90%; margin: 2em 0; text-align:right; color: #666; }
#container { position: relative; margin:0 auto; width:840px; padding: 20px 0 20px 20px;}

.picture { position: relative; float:left; padding:0; margin-right:20px; margin-bottom:20px; z-index: 2; width:400px; height: 310px; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);}
.pictureimg { position: relative; margin:0; padding: 0; width: 400px;}
.picture a { position: absolute; top:0; left:0; height:100%; width:100%; display: block; }
.pictureover { position: absolute;  top:0; left:0; padding:0; width:400px; height: 310px; z-index: 2;}

.picture h3 { position: absolute; margin: 0; top: 237px; left: 14px; font-size: 14px; color:#333; z-index: 3;}
.picture h4 { position: absolute; margin: 0; top: 0; left: 0; padding:4px 8px; font-size: 12px; color:#fff; z-index: 3;}
.picture p { position: absolute; margin: 0; top: 265px; left: 18px; right: 18px; font-size: 12px; font-weight: normal; color:#666; z-index: 3;}
.file { position: absolute;  margin: 0; top: 0; right: 0; padding:4px 8px; font-size: 12px; font-weight: normal; color:#333; z-index: 3; background-color:#fff;}

#footer { clear: both; position: relative; margin:0; width:100%; height:400px; color: #333; background-color: #fcfcfc;}
#footbox { position: relative;  margin:0 auto; width:820px; padding: 10px 0;}
#footer a { color:#333;}
#footer p { font-size: 14px;}
}


@media screen and (min-width:640px) and (max-width: 839px) {
#header { position: relative; z-index: 1; margin:0; width:100%; background: #fafafa;}
#headbox { position: relative; margin:0 auto; padding: 10px 0 5px 0; width:620px; height:120px;
background-image: url(img/titlelogo.png); background-attachment: fixed;
background-position: 50% 10px; background-repeat: no-repeat;}
#header h1 { display:none;}
#header p { display:none;}
#container { position: relative; margin:0 auto; width:640px; padding: 20px 0 20px 20px;}

.picture { position: relative; float:left; padding:0; margin-right:20px; margin-bottom:20px; z-index: 2; width:300px; height: 278px; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);}
.pictureimg { position: relative; margin:0; padding: 0; width: 300px;}
.picture a { position: absolute; top:0; left:0; height:100%; width:100%; display: block; }
.pictureover { position: absolute;  top:0; left:0; padding:0; width: 300px; height: 210px; z-index: 2;}

.picture h3 { position: absolute; margin: 0; top: 182px; left: 12px; font-size: 12px; color:#333; z-index: 3;}
.picture h4 { position: absolute; margin: 0; top: 0; left: 0; padding:4px 8px; font-size: 12px; color:#fff; z-index: 3;}
.picture p { position: absolute; margin: 0; top: 207px; left: 12px; right: 12px; font-size: 12px; font-weight: normal; color:#666; z-index: 3;}
.file { position: absolute;  margin: 0; top: 0; right: 0; padding:4px 8px; font-size: 12px; font-weight: normal; color:#333; z-index: 3; background-color:#fff;}

#footer { clear: both; position: relative; margin:0; width:100%; height:400px; color: #333; background-color: #fcfcfc;}
#footbox { position: relative;  margin:0 auto; width:620px; padding: 10px 0;}
#footer a { color:#333;}
#footer p { font-size: 14px;}

}

@media screen and (min-width:460px) and (max-width: 639px) {
#header { position:relative;  padding:0; width:100%; z-index: 1; background: #fafafa;}
#headbox { height:130px;
background-image: url(img/titlelogo.png); background-attachment: fixed;
background-position: 50% 10px; background-repeat: no-repeat;}
#header h1 { display:none;}
#header p { display:none;}
#container { position:relative; margin:0 auto; width:94%; padding: 3%;}

.picture { position: relative; margin: 1em 0; padding:0; width:100%; height: auto; display:flex; z-index: 2; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);}
.pictureimg { position: relative; float:left; margin:0; padding: 0; width: 35%;}
.pictureover { position: relative; float:left; margin:0; padding: 0; width: 65%; }
.picture a { position: absolute; top:0; left:0; height:100%; width:100%; display: block; }

.picture h3 { position: absolute; margin: 0; top: 36px; left: 14px; font-size: 12px; color:#333; z-index: 3;}
.picture h4 { position: absolute; margin: 0; top: 0; left: 0; padding:4px 8px; font-size: 12px; color:#fff; z-index: 3;}
.picture p { position: absolute; margin: 0; top: 60px; bottom:12px; left: 14px; right: 14px; font-size: 12px; font-weight: normal; color:#666; z-index: 3; overflow: hidden; }
.file { position: absolute;  margin: 0; top: 0; right: 0; padding:4px 8px; font-size: 12px; font-weight: normal; color:#333; z-index: 3;}

#footer { clear: both;  position:relative; padding:3%; width:94%;}

}


@media screen and (max-width: 459px) {
#header { position: relative; z-index: 1; margin:0; width:100%; background: #fafafa;}
#headbox { position: relative; height:130px;
background-image: url(img/titlelogo.png); background-attachment: fixed;
background-position: 50% 10px; background-repeat: no-repeat;}
#header h1 { display:none;}
#header p { display:none;}
#container { position: relative; margin:0 auto; width:96%; padding: 2%;}

.picture { position: relative; padding:0; margin:1em 0; z-index: 2; width:100%;}
.pictureimg { position: relative; margin:0; padding: 0; width: 100%;box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);}
.picture a { position: absolute; top:0; left:0; height:100%; width:100%; display: block; }
.pictureover { position: absolute;  top:0; left:0; padding:0; width: 100%; height: 100%; z-index: 2;}

.picture h3 { position: absolute; margin: 0; bottom: 0.3em; right: 0.5em; font-size: 1em; color:#fff; z-index: 3; text-shadow: 0 0 2px #000; font-family: 'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN',serif;}
.picture h4 { position: absolute; margin: 0; top: 0; left: 0; padding:0.3em 0.5em; font-size: 1em; color:#fff; z-index: 3;}
.picture p {display:none;}
.file { position: absolute;  margin: 0; top: 0; right: 0; padding:0.2em 0.4em; font-size: 0.8em; color:#fff; z-index: 3; text-shadow: 0 0 2px #000; font-family: 'Times New Roman',serif;}

#footer { clear: both; position: relative; margin:0; width:100%; color: #333; background-color: #fcfcfc;}
#footbox { position: relative;  margin:0; padding: 3%; width:94%;}
#footer a { color:#333;}
#footer p { font-size: 14px;}

}