body , html {
    height: 100%;
    font-family: sans-serif;

}

#wrapper {

}

#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-align: left;
}

#header {
	padding-top:2px;
	position: fixed;
	top: 0px;
  left: 0px;
	width:100%;
	
  text-align:center;
  background-color:#fff;
	border-bottom:solid 1px #000;
}


#contents {
  padding-left: 5px;
	padding-top: 32px;
  padding-bottom: 61px;
}

#contents ol {
  background: #f3fbff;
  border: 2px skyblue dashed;
  }


#footer {
	padding-top:1px;
  padding-bottom: 5px;
	position: fixed;
	bottom: 0;
  left: 0px;
	
  width: 100%;
  background-color: #e88102;
  text-align: center;
}


.square_btn{
    display: inline-block;
    text-decoration: none;
    border-radius: 16px;
    height: 36px;
    
    padding-right: 8px;
    padding-left: 2px;
}
.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(-4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    height: 36px;
    
}
.img {
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: center;
  
  height: 36px;

}
.right {
	padding-right: 200px;
}


.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #eee;
  height: 8px;
  width: 200px;
  border-radius: 4px;
}

.input-range[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  border: none;
  max-width: 20px;
  height: 20px;
  	background: url("/images/playb.png");
    background-size: 20px;
}

.pregs{
  padding-bottom: 14px;
}
#footer > div{padding-top:10px;}

h1{font-size:20px;}
.chapter{background:#e88102;color:#fff;font-size:18px;padding:8px;}
.part{color:#e88102;font-size:18px;font-weight:bold;}
audio{width:100%;}
video{width:100%;}
.harf{display:inline-block;width:46%;margin:10px 1%;}
.list .chapter{text-align:left;margin:20px 0;}
.list > p {text-align:left;}
.list .harf a{
	background:#e2e2e2;
	width:100%;
	display:block;
	padding:15px;
	border-radius:6px;
	box-shadow: 2px 2px 4px gray;
	color:#525151;
	text-decoration: none;
	font-size:20px;
	font-weight:bold;
}
.list{margin:30px 0;}

.full{display:block;width:100%;}
.list > p.full {text-align:left;}
.list .full a{
	background:#f9c1c1;
	display:block;
	padding:15px;
	border-radius:6px;
	box-shadow: 2px 2px 4px gray;
	color:#525151;
	text-decoration: none;
	font-size:14px;
	font-weight:bold;
}
small{font-size:10px;}