/* デフォルト */
body {background: white;}
p {margin: 0.5ex; padding: 0.4ex;}
p#info {
    padding: 1em; margin: 0;
    /* border: 3px groove black; */
    background: ivory;
    font-size: 250%;
    height: 2em;
}
p#info:before {
    font-size: 50%; content: attr(pre-caution);
}
/* p#myinfo {border: 1px solid black; background: #def;} */
p#myinfo:before {content: "Local Info: ";}
button#push {width: 80vw; height: 10em;}
button:disabled {background: black; color: #888;}
*.c {text-align: center;}
div.hide {visibility: hidden;}


/* 押すボタンの間隔設定 */

#prev, #next, #play, #stop, #climax{
    margin-left: 20px;
}

#reset{
    margin-top: 5px;
    margin-left: 30px;
}


/* 前へボタン*/
/* 円 */
#prev:hover{border: 0.1em solid #FFCCFF;}
#prev:hover::before{border-top: 0.4em solid transparent;
	border-right: 0.4em solid #FFCCFF;
	border-bottom: 0.4em solid transparent;}
#prev:hover::after{border-top: 0.4em solid transparent;
	border-right: 0.4em solid #FFCCFF;
	border-bottom: 0.4em solid transparent;}


#prev {
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #95ccff;
	border-radius: 100%;
}
/* マーク左 */
#prev::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-right: 0.4em solid #95ccff;
	border-bottom: 0.4em solid transparent;
}
/* マーク右 */
#prev::after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.5em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-right: 0.4em solid #95ccff;
	border-bottom: 0.4em solid transparent;
}


/* 次へボタン*/
/* 円 */

#next:hover{border: 0.1em solid #99FFCC;}
#next:hover::before{	border-top: 0.4em solid transparent;
	border-left: 0.4em solid #99FFCC;
	border-bottom: 0.4em solid transparent;}
#next:hover::after{border-top: 0.4em solid transparent;
	border-left: 0.4em solid #99FFCC;
	border-bottom: 0.4em solid transparent;}


#next {
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #95ccff;
	border-radius: 100%;
}

/* マーク左 */
#next::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.3em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-left: 0.4em solid #95ccff;
	border-bottom: 0.4em solid transparent;
}
/* マーク右 */
#next::after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.6em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-left: 0.4em solid #95ccff;
	border-bottom: 0.4em solid transparent;
}



/* 再生ボタン */
/* 円 */
#play:hover{border:0.1em solid #33FF66;}
#play:hover::before{
    border-top: 0.4em solid transparent;
	border-left: 0.6em solid #33ff66;
	border-bottom: 0.4em solid transparent;
}

#play {
    	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #95ccff;
	border-radius: 100%;
}

/* マーク */
#play::before {
	content: "";
	position: absolute;
	top: 0.20em;
	left: 0.38em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-left: 0.6em solid #95ccff;
	border-bottom: 0.4em solid transparent;
}





/* 停止ボタン */
/* 円 */
#stop:hover {border: 0.1em solid #FF3333	;}
#stop:hover::before {background-color:  #FF3333	;}
    
    
#stop {
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #95ccff;
	border-radius: 100%;
}
/* マーク */
#stop::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 0.7em;
	height: 0.7em;
	background-color: #95ccff;
}


/* リセットボタン */
/* 円 */
#reset:hover{
    	border-top: 0.09em solid #FF9966;
	border-left: 0.09em solid transparent;
	border-right: 0.09em solid #FF9966;
	border-bottom: 0.09em solid #FF9966;
}
#reset:hover::before{
    	border-top: 0.25em solid transparent;
	border-right: 0.5em solid #FF9966;
	border-bottom: 0.25em solid transparent;
}
    

#reset{
font-size: 76px;
	position: relative;
	/* margin: 0.2em auto 0; */
	width: 1.2em;
	height: 1.2em;
	border-top: 0.09em solid #95ccff;
	border-left: 0.09em solid transparent;
	border-right: 0.09em solid #95ccff;
	border-bottom: 0.09em solid #95ccff;
	border-radius: 100% 100% 100% 100%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);   
}


/* 三角部分 */
#reset:before{
content: "";
	position: absolute;
	top: 0.06em;
	left: -0.25em;
	width: 0;
	height: 0;
	border-top: 0.25em solid transparent;
	border-right: 0.5em solid #95ccff;
	border-bottom: 0.25em solid transparent;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);

}



/* サビボタン */
/* 円 */
#climax:hover{border: 0.1em solid #FFFF00;}
#climax:hover::before{    color: #ffff00;}

#climax{
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #95ccff;
	border-radius: 100%;
}

#climax::before{
    content: "♪";
    color: #95ccff;
    position: absolute;
    top: -0.2em;
	left: 0.1em;
	width: 0.7em;
    height: 0.7em;
}


/* pushボタン */

#push {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 5px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

#push:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/* infoデザイン */

.info-box{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.info-box .box-title {
    
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 27px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}


/* 何かボタンっぽいもの */

#hayaosi{
    font-size: 15px;
    position: absolute;
    top: 2em;
    left: 23em;
    width: 1.5em;
    heigth: 1.3em;
    border: solid 1.5em #6699ff;
    
}

#hayaosi::after{
    content:"";
    position: absolute;
    width: 3.0em;
    top : 0.5em;
    left: -1.5em;
    border: solid 0.5em  #339999;
    
}

#hayaosi:hover::before{    border:outset 1.5em #FFFF33;}

#hayaosi::before{
    content:"";
    position: absolute;
    width: -3em;
    top : -3em;
    left: -15px;
    border:outset 1.5em #FF6666;
    border-top-left-radius:10px;
    border-top-right-radius:10px;

}

span.push{
    font-size: 50px;
}