@charset "utf-8";
/* CSS Document */

.extension { margin-bottom:30px; }

.field { padding: 20px; background-color:white; }
.field .word { display: none; }
.field .image { text-align:center; }
.field .image img { width:400px; }
.field .alphabet { margin-top:50px; }
.field .word > div { margin: 50px 0 0 50px; }
.field .word .image { display:inline-block; vertical-align: middle; }
.field .word .text  { display: inline-block;
	vertical-align: middle;
	text-align: center; 
	margin-left: 50px;
	font-size: 36pt;
	width: 300px; }
.field .word .text > div { padding:20px 0; }
.field .to_word           { background:url(../ab_image/to_word.png); }
.field .to_word:hover     { background:url(../ab_image/to_word_hover.png); }
.field .to_alphabet       { background:url(../ab_image/to_alphabet.png); }
.field .to_alphabet:hover { background:url(../ab_image/to_alphabet_hover.png); }
.field .switcher          { width: 143px; height: 38px; display: block; top: 0; right: 0; position: absolute; }

.controls              { text-align: center; background-color:white; padding: 50px 0; }
.controls > *          { display: inline-block; width:50px; height:50px; margin:0 20px; }
.controls .prev        { background:url(../ab_image/prev.png) no-repeat;  }
.controls .prev:hover  { background:url(../ab_image/prev_hover.png) no-repeat;}
.controls .next        { background:url(../ab_image/next.png) no-repeat; }
.controls .next:hover  { background:url(../ab_image/next_hover.png) no-repeat; }
.controls .audio       { background:url(../ab_image/play.png) no-repeat; }
.controls .audio:hover { background:url(../ab_image/play_hover.png) no-repeat; }

/*------------------------------| RWD |-------------------------*/
@media screen and (min-width: 1000px) {
.extension.alphabet .tabs a { width:166px; height:51px; display:inline-block; margin-right: 5px; }
.extension.alphabet .panel { 
	width: 970px;
	padding: 15px;
}
.panel select { 
	padding: 5px;
	font-size: 14pt;
	    margin-right: 20px; }
}
@media only screen and (min-width: 680px) and (max-width: 1000px) {
.extension.alphabet .tabs a {  width: 23%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left; }
.extension.alphabet .practice:hover, .extension.alphabet .practice.selected {  width: 23%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left; }
.extension .tabs a {
    display: inline-block;
    margin-right: 10px;
	height:50px;
}
.extension.alphabet .tabs {
    height: 50px;
}
.extension.alphabet .panel {
    width: 90%;
    padding: 5%;
    border-radius: 5px;
}
.panel select { 
	padding: 5px;
	font-size: 14pt;
	margin-right: 20px;
	}
}
@media screen and (max-width: 680px){
.extension .tabs {
    height: 30px;
}
.extension.alphabet .tabs a {
	width: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
	height:30px; }
.extension.alphabet .practice:hover, .extension.alphabet .practice.selected {
    background-size: contain; }
.extension .tabs a {
    display: inline-block;
    margin-right: 5px;
	height:30px;
}
.extension.sp .tabs {
    height: 30px;
}
.extension.sp .panel {
    width: 90%;
    padding: 5%;
    border-radius: 5px;
}
.panel select {
    padding: 2%;
    font-size: 14pt;
    width: 100%;
    margin: 5% 0%;
}
.field .image {
	width:100%;
}
.field .image>img {
	width:100%;
	height:100%;
}
.field .switcher { top: -50px; }
.field .word > div {
    margin: 50px 0 0 0px;
}
.field .word .text {
    text-align: center;
    font-size: 2em;
    width: 100%;
	margin-left: 0px;
}
}