/*-------------------------------------
.------解説ページへの移動ボタン----
-------------------------------------*/

.kaisetsu_bt {
    display: inline-block;     /* インラインブロック化 */
    transition: transform 0.3s ease-in-out;
}

.kaisetsu_bt:hover{
  animation: shake 0.3s;
}
@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 0); }
  20% { transform: translate(5px, 0); }
  30% { transform: translate(-5px, 0); }
  40% { transform: translate(5px, 0); }
  50% { transform: translate(-5px, 0); }
  60% { transform: translate(5px, 0); }
  70% { transform: translate(-5px, 0); }
  80% { transform: translate(5px, 0); }
  90% { transform: translate(-5px, 0); }
}

.kaisetsu_bt:active {
  -webkit-transform: rotateX(540deg);
}
/*----------------------------------------------
.------解説ページへの移動ボタン：終わり----
------------------------------------------------*/




@charset="shift_jis"
body {
    text-align: center;  
}  
div#wrapper {  
    width: 90%;  
/*--------------------------
.--    width: 800px;  --
---------------------------*/
    margin: 0 auto;  
    text-align: left;  
} 
p.mainmenu{
	text-align: left;
	width: 250px;
	margin: 0 auto;  
}
p.exercise {
 	border-style: solid;
	border-width: 1px;
	padding: 5px;
	border-radius: 10px;
/*---------------------
.-- width: 600px;---
-----------------------*/
	width:100%;
	font-size: 1.2em;
	height: 140px;
	margin: 0 auto;  
}


p.target_wind {
	width: 450px;
	margin: 0 auto;  
}

p.alph_guide {
	width: 450px;
	margin: 0 auto;  
}

p.exer_guide {
	font-size: 0.8em;
 	border-style: solid;
	border-width: 1px;
	width: 600px;
	height: 100px;
	margin: 0 auto;  
}
p.key_input {
	font-size: 0.8em;
 	border-style: solid;
	border-width: 1px;
	width: 600px;
	height: 100px;
	margin: 0 auto;  
}

p.anime_wind{
	width: 410px;
	margin: 0 auto;  
	height: 190px;
}

p.result {
	word-wrap: break-word;
	margin: 0 auto;  
	width: 600px;
}