$font_family: RoKyoKashoStd-Md;
$font_color: #3b3311;
$font_red_color: #FB1638;

@font-face {
  font-family: $font_family;
  src: url(../font/RoKyoKashoStd-Md.otf);
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes frame_in {
  from {
    left: 599px * $rate;
  }
  to {
    left: 499px * $rate;
  }
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scaleX(0) scaleY(0.5);
  }
  to {
    -webkit-transform: scaleX(1) scaleY(1.0);
  }
}

.inactive {
  opacity: 0.5;
}

.faded {
  opacity: 0.5;
}

/* common */

.imgBack {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 110px * $rate;
  height: 107px * $rate;
  z-index: 1;
}

.imgHome {
  position: absolute;
  left: 1170px * $rate;
  top: 0px * $rate;
  width: 110px * $rate;
  height: 107px * $rate;
  z-index: 1;
}

.doYoko {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 720px * $rate;
  height: 1280px * $rate;
  z-index: 90000;
  display: none;
}

.doYoko3by4 {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 960px * $rate;
  height: 1280px * $rate;
  z-index: 90000;
  display: none;
}

.initBlock {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 1280px * $rate;
  height: 960px * $rate;
  background-color: #000;
  opacity: 0.5;
  z-index: 99999;
}

.popup_window {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 100%;
  height: 100%;
}

/* title */

.title_main {
  background-color: #ff5875;
}

.imgMainTopTitle {
  position: absolute;
  left: 231.5px * $rate;
  top: 100px * $rate;
  width: 857px * $rate;
  height: 307px * $rate;
}

.imgMainTopEnd {
  position: absolute;
  left: 1192.6666666666624px * $rate;
  top: 110.6666666666624px * $rate;
  width: 87.3333333333376px * $rate;;
  height: 501.3333333333376px * $rate;
}

.imgMainTopStart {
  position: absolute;
  left: 239px * $rate;
  top: 454px * $rate;
  width: 802px * $rate;
  height: 138px * $rate;
}

/* top */

.top_main {
  background-color: #ff5875;
}

.top_imgMainTitle {
  position: absolute;
  left: 110px * $rate;
  top: 38px * $rate;
  width: 817px * $rate;
  height: 151px * $rate;
}

.top_imgMainYubi {
  position: absolute;
  left: 895px * $rate;
  top: 0px * $rate;
  width: 385px * $rate;
  height: 463px * $rate;
}

.top_btnMenu {
  position: absolute;
  top: 225px * $rate;
  width: 87px * $rate;
  height: 404px * $rate;
}

.top_btnHiragana {
  @extend .top_btnMenu;
  left: 754px * $rate;
}

.top_btnKatakana {
  @extend .top_btnMenu;
  left: 654px * $rate;
}

.top_btnKanji1 {
  @extend .top_btnMenu;
  left: 554px * $rate;
}

.top_btnKanji2 {
  @extend .top_btnMenu;
  left: 454px * $rate;
}

.top_btnKanji3 {
  @extend .top_btnMenu;
  left: 354px * $rate;
}

.top_btnKotoba1 {
  @extend .top_btnMenu;
  left: 254px * $rate;
}

.top_btnKotoba2 {
  @extend .top_btnMenu;
  left: 154px * $rate;
}

.top_btnKotoba3 {
  @extend .top_btnMenu;
  left: 54px * $rate;
}

.top_imgTopNew {
  position: absolute;
  top: 185px * $rate;
  width: 87px * $rate;
  height: 83px * $rate;
}

.top_imgTopNewHira {
  @extend .top_imgTopNew;
  left: 754px * $rate;
}

.top_imgTopNewKata {
  @extend .top_imgTopNew;
  left: 654px * $rate;
}

.top_imgTopNewKanji1 {
  @extend .top_imgTopNew;
  left: 554px * $rate;
}

.top_imgTopNewKanji2 {
  @extend .top_imgTopNew;
  left: 454px * $rate;
}

.top_imgTopNewKanji3 {
  @extend .top_imgTopNew;
  left: 354px * $rate;
}

.top_imgTopNewKotoba1 {
  @extend .top_imgTopNew;
  left: 254px * $rate;
}

.top_imgTopNewKotoba2 {
  @extend .top_imgTopNew;
  left: 154px * $rate;
}

.top_imgTopNewKotoba3 {
  @extend .top_imgTopNew;
  left: 54px * $rate;
}

.top_btnDeleteMenu {
  position: absolute;
  top: 566px * $rate;
  width: 87px * $rate;
  height: 89px * $rate;
}

.top_btnDeleteHiragana {
  @extend .top_btnDeleteMenu;
  left: 754px * $rate;
}

.top_btnDeleteKatakana {
  @extend .top_btnDeleteMenu;
  left: 654px * $rate;
}

.top_btnDeleteKanji1 {
  @extend .top_btnDeleteMenu;
  left: 554px * $rate;
}

.top_btnDeleteKanji2 {
  @extend .top_btnDeleteMenu;
  left: 454px * $rate;
}

.top_btnDeleteKanji3 {
  @extend .top_btnDeleteMenu;
  left: 354px * $rate;
}

.top_btnDeleteKotoba1 {
  @extend .top_btnDeleteMenu;
  left: 254px * $rate;
}

.top_btnDeleteKotoba2 {
  @extend .top_btnDeleteMenu;
  left: 154px * $rate;
}

.top_btnDeleteKotoba3 {
  @extend .top_btnDeleteMenu;
  left: 54px * $rate;
}

.top_container {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 1136px * $rate;
  height:640px * $rate;
  opacity: 0;
}

.top_lblDeleteMsg {
  position: absolute;
  left: 100px * $rate;
  top: 50px * $rate;
  width: 1080px * $rate;
  height: 260px * $rate;
  borderRadius: 10px * $rate;
  background-color: #FFFFFF;
  display: table;
}

.top_lblDeleteMsg > span {
  line-height: 36px * $rate;
  color: $font_color;
  font-size: 36px * $rate;
  display: table-cell;
  vertical-align: middle;
}

.top_imgDialogBase {
  position: absolute;
  left: 220px * $rate;
  top: 88px * $rate;
  width: 840px * $rate;
  height: 540px * $rate;
}

.top_lblConfirmMsg {
  position: absolute;
  left: 270px * $rate;
  top: 150px * $rate;
  width: 740px * $rate;
  height: 260px * $rate;
  display: table;
}

.top_lblConfirmMsg > span {
  line-height: 1.2;
  color: $font_color;
  font-size: 48px * $rate;
  text-align: left;
  vertical-align: middle;
  display: table-cell;
}

.top_imgDialogYes {
  position: absolute;
  left: 291px * $rate;
  top: 494px * $rate;
  width: 340px * $rate;
  height: 85px * $rate;
}

.top_imgDialogNo {
  position: absolute;
  left: 654px * $rate;
  top: 494px * $rate;
  width: 340px * $rate;
  height: 85px * $rate;
}

.top_imgNeosNextbook {
  position: absolute;
  left: 504px * $rate;
  top: 675px * $rate;
  width: 272px * $rate;
  height: 25px * $rate;
}

.top_btnDelete {
  position: absolute;
  left: 952px * $rate;
  top: 628px * $rate;
  width: 207px * $rate;
  height: 72px * $rate;
  z-index: 1;
}

.top_btnInfo {
  position: absolute;
  left: 1180px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* drill_list */

.hiragana_reading_dl_main {
  background-color: #ffb1c5;
}

.hiragana_writing_dl_main {
  background-color: #eebbff;
}

.katakana_reading_dl_main {
  background-color: #7efafa;
}

.katakana_writing_dl_main {
  background-color: #17b9ff;
}

.kanji1_reading_dl_main {
  background-color: #c2ff0d;
}

.kanji1_writing_dl_main {
  background-color: #e5ff43;
}

.kanji2_reading_dl_main {
  background-color: #85e33f;
}

.kanji2_writing_dl_main {
  background-color: #afff99;
}

.kanji3_reading_dl_main {
  background-color: #66f1b1;
}

.kanji3_writing_dl_main {
  background-color: #99ffd7;
}

.kotoba1_odd_dl_main {
  background-color: #f7ff00;
}

.kotoba1_even_dl_main {
  background-color: #ffff77;
}

.kotoba2_odd_dl_main {
  background-color: #ffe500;
}

.kotoba2_even_dl_main {
  background-color: #ffee66;
}

.kotoba3_odd_dl_main {
  background-color: #ffae33;
}

.kotoba3_even_dl_main {
  background-color: #ffd161;
}

.dl_hiraganaPageTitle {
  position: absolute;
  left: 516px * $rate;
  top: 38px * $rate;
  width: 246px * $rate;
  height: 54px * $rate;
}

.dl_katakanaPageTitle {
  position: absolute;
  left: 516px * $rate;
  top: 38px * $rate;
  width: 246px * $rate;
  height: 54px * $rate;
}

.dl_kanjiPageTitle {
  position: absolute;
  left: 520px * $rate;
  top: 38px * $rate;
  width: 242px * $rate;
  height: 74px * $rate;
}
.dl_kanji1PageTitle {
  @extend .dl_kanjiPageTitle;
}
.dl_kanji2PageTitle {
  @extend .dl_kanjiPageTitle;
}
.dl_kanji3PageTitle {
  @extend .dl_kanjiPageTitle;
}

.dl_kotoba1PageTitle {
  position: absolute;
  left: 399px * $rate;
  top: 38px * $rate;
  width: 482px * $rate;
  height: 74px * $rate;
}
.dl_kotoba2PageTitle {
  position: absolute;
  left: 377px * $rate;
  top: 38px * $rate;
  width: 526px * $rate;
  height: 74px * $rate;
}
.dl_kotoba3PageTitle {
  position: absolute;
  left: 377px * $rate;
  top: 38px * $rate;
  width: 526px * $rate;
  height: 74px * $rate;
}

.dl_drillListScrollView {
  position: absolute;
  left : 150px * $rate;
  top: 126px * $rate;
  width: 880px * $rate;
  height: 590px * $rate;
  overflow-x: scroll;
  -webkit-overflow-scrolling : touch;
}

.dl_drillListScrollView ul {
  white-space:nowrap;
  display: inline;
}

.dl_drillListScrollView li {
  position: relative;
  margin: 0px 75px*$rate 0px 75px*$rate;
  width: 105px * $rate;
  height: 509px * $rate;
  display: inline;
}

.dl_btnDrill {
  position: absolute;
  width: 105px * $rate;
  height: 509px * $rate;
  margin: 0px 25px*$rate 0px 25px*$rate;
}

.dl_imgCoin {
  position: absolute;
  width: 83px * $rate;
  height: 83px * $rate;
  margin: 12px*$rate 0px 0px 37px*$rate;
}

.dl_lblPoint {
  position: absolute;
  width: 105px * $rate;
  height: 56px * $rate;
  line-height: 56px * $rate;
  margin: 94px*$rate 25px*$rate 0px 25px*$rate;
  color: $font_red_color;
  font-size: 36px*$rate;
  text-align: center;
  vertical-align: middle;
}

.dl_lblDrillNo {
  position: absolute;
  width: 105px * $rate;
  height: 60px * $rate;
  margin: 410px*$rate 25px*$rate 0px 25px*$rate;
  color: $font_color;
  font-size: 48px * $rate;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.dl_lblDoneAt {
  position: absolute;
  width: 105px * $rate;
  height: 56px * $rate;
  line-height: 28px * $rate;
  margin: 509px*$rate 25px*$rate 0px 25px*$rate;
  color: $font_color;
  font-size: 20px*$rate;
  text-align: center;
  vertical-align: middle;
}

.dl_imgNew {
  position: absolute;
  width: 69px * $rate;
  height: 76px * $rate;
  margin: 17px*$rate 0px 0px 43px*$rate;
}

.dl_imgBtnQ {
  position: absolute;
  left: 1180px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* paint_board */

.paintBackground {
  position: absolute;
  left: 178px * $rate;
  top: 130px * $rate;
  width: 446px * $rate;
  height: 447px * $rate;
}
.paintBackgroundFull {
  position: absolute;
  left: 406px * $rate;
  top: 234px * $rate;
  width: 466px * $rate;
  height: 466px * $rate;
}

.imgChar {
  position: absolute;
  left: 189px * $rate;
  top: 141px * $rate;
  width: 424px * $rate;
  height: 424px * $rate;
}
.imgCharFull {
  position: absolute;
  left: 418px * $rate;
  top: 246px * $rate;
  width: 442px * $rate;
  height: 442px * $rate;
}

.zoomChar {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
}

.imgChar.ng-hide-remove {
  @extend .zoomChar;
}
.imgCharFull.ng-hide-remove {
  @extend .zoomChar;
}

.imgCharAnimate {
  position: absolute;
  left: 189px * $rate;
  top: 141px * $rate;
  width: 424px * $rate;
  height: 424px * $rate;
}
.imgCharAnimateFull {
  position: absolute;
  left: 418px * $rate;
  top: 246px * $rate;
  width: 442px * $rate;
  height: 442px * $rate;
}

.imgStrokeOrder {
  position: absolute;
  left: 189px * $rate;
  top: 141px * $rate;
  width: 424px * $rate;
  height: 424px * $rate;
}
.imgStrokeOrderFull {
  position: absolute;
  left: 418px * $rate;
  top: 246px * $rate;
  width: 442px * $rate;
  height: 442px * $rate;
}

.lblPaintChar {
  position: absolute;
  left: 178px * $rate;
  top: 130px * $rate;
  width: 446px * $rate;
  height: 447px * $rate;
  line-height: 447px * $rate;
  font-size: 320px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
  color: $font_color;
}
.lblPaintCharFull {
  position: absolute;
  left: 406px * $rate;
  top: 234px * $rate;
  width: 466px * $rate;
  height: 466px * $rate;
  line-height: 466px * $rate;
  font-size: 144px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
  color: $font_color;
}

.canvasPaint {
  position: absolute;
  left: 178px * $rate;
  top: 130px * $rate;
  width: 446px * $rate;
  height: 447px * $rate;
}
.canvasPaintFull {
  position: absolute;
  left: 406px * $rate;
  top: 234px * $rate;
  width: 466px * $rate;
  height: 466px * $rate;
}

.paint {
  position: absolute;
  left: 178px * $rate;
  top: 130px * $rate;
  width: 446px * $rate;
  height: 447px * $rate;
}
.paintFull {
  position: absolute;
  left: 406px * $rate;
  top: 234px * $rate;
  width: 466px * $rate;
  height: 466px * $rate;
}

.imgBgPrevChar {
  position: absolute;
  left: 0px * $rate;
  top: 270px * $rate;
  width: 201px * $rate;
  height: 242px * $rate;
  z-index: -1;
}
.imgPrevChar {
  position: absolute;
  left: -32px * $rate;
  top: 270px * $rate;
  width: 229px * $rate;
  height: 229px * $rate;
  z-index: -1;
}
.imgBgNextChar {
  position: absolute;
  left: 1079px * $rate;
  top: 270px * $rate;
  width: 201px * $rate;
  height: 242px * $rate;
  z-index: -1;
}
.imgNextChar {
  position: absolute;
  left: 1079px * $rate;
  top: 270px * $rate;
  width: 229px * $rate;
  height: 229px * $rate;
  z-index: -1;
}

.btnPrev {
  position: absolute;
  left: 32px * $rate;
  top: 307px * $rate;
  width: 89px * $rate;
  height: 96px * $rate;
  z-index: 1;
}
.btnPrevFull {
  position: absolute;
  left: 180px * $rate;
  top: 338px * $rate;
  width: 200px * $rate;
  height: 96px * $rate;
  z-index: 1;
}

.btnNext {
  position: absolute;
  left: 711px * $rate;
  top: 307px * $rate;
  width: 89px * $rate;
  height: 96px * $rate;
  z-index: 1;
}
.btnNextFull {
  position: absolute;
  left: 902px * $rate;
  top: 338px * $rate;
  width: 200px * $rate;
  height: 96px * $rate;
  z-ndex: 1;
}

.btnEraser {
  position: absolute;
  left: 0px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -1;
}
.btnEraserFull {
  position: absolute;
  left: 0px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -1;
}

.btnOk {
  position: absolute;
  left: 599px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -1;
}
.btnOkFull {
  position: absolute;
  left: 1079px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -1;
}

.btnGuide {
  position: absolute;
  left: 216px * $rate;
  top: 592px * $rate;
  width: 71px * $rate;
  height: 71px * $rate;
}
.btnGuideFull {
  position: absolute;
  left: 342px * $rate;
  top: 512px * $rate;
  width: 64px * $rate;
  height: 66px * $rate;
}

.btnCrossLine {
  position: absolute;
  left: 316px * $rate;
  top: 592px * $rate;
  width: 71px * $rate;
  height: 71px * $rate;
}
.btnCrossLineFull {
  position: absolute;
  left: 342px * $rate;
  top: 579px * $rate;
  width: 64px * $rate;
  height: 66px * $rate;
}

.btnStrokeOrder {
  position: absolute;
  left: 416px * $rate;
  top: 592px * $rate;
  width: 71px * $rate;
  height: 71px * $rate;
}
.btnStrokeOrderFull {
  position: absolute;
  left: 872px * $rate;
  top: 512px * $rate;
  width: 63px * $rate;
  height: 66px * $rate;
}

.btnAutomate {
  position: absolute;
  left: 516px * $rate;
  top: 592px * $rate;
  width: 71px * $rate;
  height: 71px * $rate;
}
.btnAutomateFull {
  position: absolute;
  left: 872px * $rate;
  top: 579px * $rate;
  width: 63px * $rate;
  height: 66px * $rate;
}

.dataArea {
  display: none;
}

/* result_popup_window */

.imgPopupBg {
  position: absolute;
  left: 220px * $rate;
  top: 88px * $rate;
  width: 840px * $rate;
  height: 540px * $rate;
}

.lblTitle {
  position: absolute;
  left: 220px * $rate;
  top: 175px * $rate;
  width: 840px * $rate;
  height: 60px * $rate;
  color: $font_color;
  font-family: $font_family;
  font-size: 48px * $rate;
  text-align: center;
  vertical-align: middle;
}

.lblMainText {
  position: absolute;
  left: 220px * $rate;
  top: 300px * $rate;
  width: 840px * $rate;
  height: 70px * $rate;
  color: $font_color;
  font-family: $font_family;
  font-size: 60px * $rate;
  text-align: center;
  vertical-align: middle;
}

.lblSubText {
  position: absolute;
  left: 220px * $rate;
  top: 434px * $rate;
  width: 840px * $rate;
  height: 46px * $rate;
  color: $font_color;
  font-family: $font_family;
  font-size: 40px * $rate;
  text-align: center;
  vertical-align: middle;
}

.rpw_btnOkPass {
  position: absolute;
  left: 470px * $rate;
  top: 494px * $rate;
  width: 340px * $rate;
  height: 85px * $rate;
}

.rpw_btnOk {
  position: absolute;
  left: 291px * $rate;
  top: 494px * $rate;
  width: 340px * $rate;
  height: 85px * $rate;
}

.rpw_btnRetry {
  position: absolute;
  left: 654px * $rate;
  top: 494px * $rate;
  width: 340px * $rate;
  height: 85px * $rate;
}

.ngdialog-content .pane {
  background-color: initial;
}

/* toast */
.toa_imgBgToast {
  position:absolute;
  left: 365px * $rate;
  top: 85px * $rate;
  width: 550px * $rate;
  height: 550px * $rate;
}

.toa_imgMainMenuContainer {
  position:absolute;
  left: 423px * $rate;
  top: 230px * $rate;
  width: 185px * $rate;
  height: 248px * $rate;
}

.toa_imgDrill {
  width: 185px * $rate;
  height: 46px * $rate;
  margin-top: 16px * $rate;
}

.toa_imgIllust {
  position:absolute;
  left: 500px * $rate;
  top: 221px * $rate;
  width: 280px * $rate;
  height: 200px * $rate;
}

.toa_lblIllust {
  position:absolute;
  left: 500px * $rate;
  top: 450px * $rate;
  width: 280px * $rate;
  height: 34px * $rate;
  line-height: 34px * $rate;
  font-size: 28px * $rate;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
}

.toa_lblKanji {
  position:absolute;
  left: 641px * $rate;
  width: 60px * $rate;
  height: 50px * $rate;
  line-height: 50px * $rate;
  font-size: 40px * $rate;
  color: #000000;
  text-align: right;
  vertical-align: middle;
}
.toa_lblKanji1 {
  @extend .toa_lblKanji;
  top: 221px * $rate;
}
.toa_lblKanji2 {
  @extend .toa_lblKanji;
  top: 281px * $rate;
}
.toa_lblKanji3 {
  @extend .toa_lblKanji;
  top: 341px * $rate;
}

.toa_btnOk {
  position:absolute;
  left: 549px * $rate;
  top: 569px * $rate;
  width: 182px * $rate;
  height: 51px * $rate;
}

/* drill */
.resultContainer {
  position: absolute;
  left: 124px * $rate;
  top: 30px * $rate;
  font-size: 0;
}

.resultBox {
  position: absolute;
  top: 0px * $rate;
  width: 63px * $rate;
  height: 63px * $rate;
  line-height: 63px * $rate;
  color: $font_color;
  background-color: #FFFFFF;
  border-style: solid;
  border-color: $font_color;
  border-width: 2.5px * $rate;
  border-radius: 10px * $rate;
  text-align: center;
  vertical-align: middle;
  font-size: 36px * $rate;
  display: inline-block;
}

.resultBox1 {
  @extend .resultBox;
  left: 4px * $rate;
}

.resultBox2 {
  @extend .resultBox;
  left: 71px * $rate;
}

.resultBox3 {
  @extend .resultBox;
  left: 138px * $rate;
}

.resultBox4 {
  @extend .resultBox;
  left: 205px * $rate;
}

.resultBox5 {
  @extend .resultBox;
  left: 272px * $rate;
}

.imgResultBox {
  position: absolute;
  top: 0px;
  width: 63px * $rate;
  height: 63px * $rate;
  display: inline-block;
}

.imgResultBox1 {
  @extend .imgResultBox;
  left: 4px * $rate;
}

.imgResultBox2 {
  @extend .imgResultBox;
  left: 71px * $rate;
}

.imgResultBox3 {
  @extend .imgResultBox;
  left: 138px * $rate;
}

.imgResultBox4 {
  @extend .imgResultBox;
  left: 205px * $rate;
}

.imgResultBox5 {
  @extend .imgResultBox;
  left: 272px * $rate;
}

.imgKakunin {
  position: absolute;
  left: 475px * $rate;
  top: 36px * $rate;
  width: 215px * $rate;
  height: 54px * $rate;
}

.imgBgQuestionNo {
  position: absolute;
  left: 986px * $rate;
  top: 106px * $rate;
  width: 107px * $rate;
  height: 53px * $rate;
}

.questionNo {
  position: absolute;
  left: 1020px * $rate;
  top: 115px * $rate;
  width: 44px * $rate;
  height: 44px * $rate;
  line-height: 44px * $rate;
  color: $font_color;
  text-align: center;
  vertical-align: middle;
  font-size: 36px * $rate;
}

.imgDrillMaru {
  position: absolute;
  left: 191px * $rate;
  top: 143px * $rate;
  width: 420px * $rate;
  height: 420px * $rate;
}

.imgDrillBatsu {
  position: absolute;
  left: 191px * $rate;
  top: 143px * $rate;
  width: 420px * $rate;
  height: 420px * $rate;
}

.imgTatekei {
  position: absolute;
  top: 0px * $rate;
  left: 800px * $rate;
  width: 7px * $rate;
  height: 720px * $rate;
}

.imgKotobaRight {
  position: absolute;
  left: 599px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -2;
}

.questionBoard {
  position: absolute;
  left: 848px * $rate;
  top: 178px * $rate;
  width: 385px * $rate;
  height: 509px * $rate;
  border-radius: 20px * $rate;
  background-color: #ffffff;
  font-size: 0px * $rate;
}

.fillIn {
  width: 40px * $rate;
  height: 40px * $rate;
  line-height: 40px * $rate;
  color: $font_color;
  background-color: #FFFFFF;
  border-style: solid;
  border-color: $font_red_color;
  border-width: 2.5px * $rate;
  text-align: center;
  vertical-align: middle;
  font-size: 40px * 0.75 * $rate;
  margin: 0px 16px*$rate 0px 0px;
  display: inline-block;
}

/* char_board */

.btnCharContainer {
  position: absolute;
  width: 100px;
  height: 100px;
}

.btnChar {
  position: absolute;
  width: 67px * $rate;
  height: 67px * $rate;
  font-size: 40px * $rate;
  font-family: $font_family;
  border-radius: 10px * $rate;
  text-align: center;
  vertical-align: middle;
  line-height: 67px * $rate;
  color: $font_color;
  background-color: #FFFFFF;
}

.btnCharA {
  @extend .btnChar;
  left: 986px * $rate;
}
.btnCharK {
  @extend .btnChar;
  left: 898px * $rate;
}
.btnCharS {
  @extend .btnChar;
  left: 810px * $rate;
}
.btnCharT {
  @extend .btnChar;
  left: 722px * $rate;
}
.btnCharN {
  @extend .btnChar;
  left: 634px * $rate;
}
.btnCharH {
  @extend .btnChar;
  left: 546px * $rate;
}
.btnCharM {
  @extend .btnChar;
  left: 458px * $rate;
}
.btnCharY {
  @extend .btnChar;
  left: 370px * $rate;
}
.btnCharR {
  @extend .btnChar;
  left: 282px * $rate;
}
.btnCharW {
  @extend .btnChar;
  left: 194px * $rate;
}
.btnCharNN {
  @extend .btnChar;
  left: 106px * $rate;
}

.btnChar01 {
  @extend .btnCharA;
  top: 0px * $rate;
}
.btnChar02 {
  @extend .btnCharA;
  top: 72px * $rate;
}
.btnChar03 {
  @extend .btnCharA;
  top: 144px * $rate;
}
.btnChar04 {
  @extend .btnCharA;
  top: 216px * $rate;
}
.btnChar05 {
  @extend .btnCharA;
  top: 288px * $rate;
}

.btnChar06 {
  @extend .btnCharK;
  top: 0px * $rate;
}
.btnChar07 {
  @extend .btnCharK;
  top: 72px * $rate;
}
.btnChar08 {
  @extend .btnCharK;
  top: 144px * $rate;
}
.btnChar09 {
  @extend .btnCharK;
  top: 216px * $rate;
}
.btnChar10 {
  @extend .btnCharK;
  top: 288px * $rate;
}

.btnChar11 {
  @extend .btnCharS;
  top: 0px * $rate;
}
.btnChar12 {
  @extend .btnCharS;
  top: 72px * $rate;
}
.btnChar13 {
  @extend .btnCharS;
  top: 144px * $rate;
}
.btnChar14 {
  @extend .btnCharS;
  top: 216px * $rate;
}
.btnChar15 {
  @extend .btnCharS;
  top: 288px * $rate;
}

.btnChar16 {
  @extend .btnCharT;
  top: 0px * $rate;
}
.btnChar17 {
  @extend .btnCharT;
  top: 72px * $rate;
}
.btnChar18 {
  @extend .btnCharT;
  top: 144px * $rate;
}
.btnChar19 {
  @extend .btnCharT;
  top: 216px * $rate;
}
.btnChar20 {
  @extend .btnCharT;
  top: 288px * $rate;
}

.btnChar21 {
  @extend .btnCharN;
  top: 0px * $rate;
}
.btnChar22 {
  @extend .btnCharN;
  top: 72px * $rate;
}
.btnChar23 {
  @extend .btnCharN;
  top: 144px * $rate;
}
.btnChar24 {
  @extend .btnCharN;
  top: 216px * $rate;
}
.btnChar25 {
  @extend .btnCharN;
  top: 288px * $rate;
}

.btnChar26 {
  @extend .btnCharH;
  top: 0px * $rate;
}
.btnChar27 {
  @extend .btnCharH;
  top: 72px * $rate;
}
.btnChar28 {
  @extend .btnCharH;
  top: 144px * $rate;
}
.btnChar29 {
  @extend .btnCharH;
  top: 216px * $rate;
}
.btnChar30 {
  @extend .btnCharH;
  top: 288px * $rate;
}

.btnChar31 {
  @extend .btnCharM;
  top: 0px * $rate;
}
.btnChar32 {
  @extend .btnCharM;
  top: 72px * $rate;
}
.btnChar33 {
  @extend .btnCharM;
  top: 144px * $rate;
}
.btnChar34 {
  @extend .btnCharM;
  top: 216px * $rate;
}
.btnChar35 {
  @extend .btnCharM;
  top: 288px * $rate;
}

.btnChar36 {
  @extend .btnCharY;
  top: 0px * $rate;
}
.btnChar37 {
  @extend .btnCharY;
  top: 144px * $rate;
}
.btnChar38 {
  @extend .btnCharY;
  top: 288px * $rate;
}

.btnChar39 {
  @extend .btnCharR;
  top: 0px * $rate;
}
.btnChar40 {
  @extend .btnCharR;
  top: 72px * $rate;
}
.btnChar41 {
  @extend .btnCharR;
  top: 144px * $rate;
}
.btnChar42 {
  @extend .btnCharR;
  top: 216px * $rate;
}
.btnChar43 {
  @extend .btnCharR;
  top: 288px * $rate;
}

.btnChar44 {
  @extend .btnCharW;
  top: 0px * $rate;
  left: 194px * $rate;
}
.btnChar45 {
  @extend .btnCharW;
  top: 288px * $rate;
}

.btnChar46 {
  @extend .btnCharNN;
  top: 0px * $rate;
}

.btnDaku {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 84px * $rate;
  height: 85px * $rate;
}

.btnHandaku {
  position: absolute;
  left: 0px * $rate;
  top: 98px * $rate;
  width: 84px * $rate;
  height: 85px * $rate;
}

.btnYosoku {
  position: absolute;
  left: 0px * $rate;
  top: 196px * $rate;
  width: 84px * $rate;
  height: 85px * $rate;
}

/* hiragana_top */

.hiragana_top_main {
  background-color: #ff8ecc;
}

.ht_imgYubiKidsCTop {
  position: absolute;
  top: 18px * $rate;
  left: 526px * $rate;
  width: 209px * $rate;
  height: 77px * $rate;
}

.ht_imgTopYubi {
  position: absolute;
  left: 966px * $rate;
  top: 0px * $rate;
  width: 314px * $rate;
  height: 573px * $rate;
}

.ht_imgFlashCard {
  position: absolute;
  left: 259px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}

.ht_imgKakuDrill {
  position: absolute;
  left: 419px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}

.ht_imgYomuDrill {
  position: absolute;
  left: 579px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}

.ht_imgGojuon {
  position: absolute;
  left: 739px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}

.ht_imgTopVLine {
  position: absolute;
  width: 4px * $rate;
  height: 588px * $rate;
}

.ht_imgTopVLine1 {
  @extend .ht_imgTopVLine;
  left: 240px * $rate;
  top: 130px * $rate;
}

.ht_imgTopVLine2 {
  @extend .ht_imgTopVLine;
  left: 400px * $rate;
  top: 130px * $rate;
}

.ht_imgTopVLine3 {
  @extend .ht_imgTopVLine;
  left: 560px * $rate;
  top: 130px * $rate;
}

.ht_imgTopVLine4 {
  @extend .ht_imgTopVLine;
  left: 720px * $rate;
  top: 130px * $rate;
}

.ht_imgTopNew {
  position: absolute;
  top: 100px * $rate;
  width: 69px * $rate;
  height: 76px * $rate;
}

.ht_imgTopNewFlashCard {
  @extend .ht_imgTopNew;
  left: 326px * $rate;
}

.ht_imgTopNewKaku {
  @extend .ht_imgTopNew;
  left: 486px * $rate;
}

.ht_imgTopNewYomu {
  @extend .ht_imgTopNew;
  left: 646px * $rate;
}

.ht_imgTopNewGojuon {
  @extend .ht_imgTopNew;
  left: 806px * $rate;
}

/* hiragana_gojuon */

.hiragana_gojuon_main {
  background-color: #ff83cc;
}

.hg_pageTitle {
  position: absolute;
  left: 422px * $rate;
  top: 42px * $rate;
  width: 432px * $rate;
  height: 54px * $rate;
}

.hg_lblWord {
  position: absolute;
  left: 90px * $rate;
  top: 100px * $rate;
  width: 270px * $rate;
  height: 60px * $rate;
  color: $font_color;
  font-size: 36px * $rate;
  line-height: 40px * $rate;
  font-family: $font_family;
  text-align: right;
}

.hg_charIllust {
  position: absolute;
  left: 362px * $rate;
  top: 140px * $rate;
  width: 200px * $rate;
  height: 143px * $rate;
}

.hg_charIllustAnimate {
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: 6;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay: 0s;
}

.hg_imgNew {
  position: absolute;
  left: 526px * $rate;
  top: 126px * $rate;
  width: 69px * $rate;
  height: 76px * $rate;
}

.hg_imgCharSelected {
  position: absolute;
  left: 708px * $rate;
  top: 122px * $rate;
  width: 190px * $rate;
  height: 190px * $rate;
  font-size: 120px * $rate;
  font-family: $font_family;
}

.hg_charSelected {
  position: absolute;
  left: 708px * $rate;
  top: 122px * $rate;
  width: 190px * $rate;
  height: 190px * $rate;
  line-height: 190px * $rate;
  font-size: 120px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
  color: $font_color;
}

.hg_btnSound {
  position: absolute;
  left: 964px * $rate;
  top: 122px * $rate;
  width: 86px * $rate;
  height: 90px * $rate;
}

.hg_btnPractice {
  position: absolute;
  left: 964px * $rate;
  top: 224px * $rate;
  width: 86px * $rate;
  height: 90px * $rate;
}

.hg_imgBtnQ {
  position: absolute;
  left: 1180px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

.hg_charBoard {
  position: absolute;
  left: 112px * $rate;
  top: 330px * $rate;
}

/* hiragana_practice */

.hiragana_practice_main {
  background-color: #ff83cc;
}

.hp_pageTitle {
  position: absolute;
  left: 422px * $rate;
  top: 42px * $rate;
  width: 507px * $rate;
  height: 54px * $rate;
}

.savedChar {
  position: absolute;
  top: 116px * $rate;
  width: 94px * $rate;
  height: 94px * $rate;
  padding: 3px * $rate;
  border-radius: 20px * $rate;
  background-color: #FFFFFF;
}

.savedChar1 {
  @extend .savedChar;
  left: 126px * $rate;
}
.savedChar2 {
  @extend .savedChar;
  left: 230px * $rate;
}
.savedChar3 {
  @extend .savedChar;
  left: 334px * $rate;
}
.savedChar4 {
  @extend .savedChar;
  left: 438px * $rate;
}
.savedChar5 {
  @extend .savedChar;
  left: 542px * $rate;
}
.savedChar6 {
  @extend .savedChar;
  left: 646px * $rate;
}
.savedChar7 {
  @extend .savedChar;
  left: 750px * $rate;
}
.savedChar8 {
  @extend .savedChar;
  left: 854px * $rate;
}
.savedChar9 {
  @extend .savedChar;
  left: 958px * $rate;
}
.savedChar10 {
  @extend .savedChar;
  left: 1062px * $rate;
}

.imgSavedChar {
  width: 88px * $rate;
  height: 88px * $rate;
}

.hp_imgBtnQ {
  position: absolute;
  left: 980px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* hiragana_reading_drill */

.hiragana_reading_drill_main {
  background-color: #ffb1c5;
}

.hrd_pageTitle {
  position: absolute;
  left: 521px * $rate;
  top: 40px * $rate;
  width: 246px * $rate;
  height: 54px * $rate;
}

.pageSubTitle {
  position: absolute;
  left: 305px * $rate;
  top: 120px * $rate;
  width: 660px * $rate;
  height: 33px * $rate;
}

.hrd_imgKakunin {
  position: absolute;
  left: 117px * $rate;
  top: 36px * $rate;
  width: 215px * $rate;
  height: 54px * $rate;
}

.charIllust {
  position: absolute;
  top: 125px * $rate;
  left: 122px * $rate;
  width: 200px * $rate;
  height: 143px * $rate;
}

.hrd_answerContainer {
  position: absolute;
  left: 329px * $rate;
  top: 177px * $rate;
  width: 786px * $rate;
  height: 108px * $rate;
  background-color: #FFF;
  border-radius: 10px * $rate;
  text-align: center;
  vertical-align: middle;
}

.hrd_answerChar {
  width: 786px * $rate / 13;
  height: 108px * $rate;
  line-height: 108px * $rate;
  font-size: 48px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
  color: #2D270E;
  margin: 0px 10px*$rate 0px 10px*$rate;
}

.hrd_charBoard {
  position: absolute;
  left: 112px * $rate;
  top: 330px * $rate;
}

.hrd_btnSound {
  position: absolute;
  left: 1044px * $rate;
  top: 36px * $rate;
  width: 86px * $rate;
  height: 90px * $rate;
}

.hrd_imgCorrectMaru {
  position: absolute;
  left: 440px * $rate;
  top: 156px * $rate;
  width: 400px * $rate;
  height: 400px * $rate;
}

.hrd_imgIncorrect {
  position: absolute;
  left: 410px * $rate;
  top: 206px * $rate;
  width: 460px * $rate;
  height: 300px * $rate;
  z-index: 1;
}

.hrd_lblIncorrect {
  @extend .hrd_imgIncorrect;
  line-height: 300px * $rate;
  color: #000;
  font-size: 36px * $rate;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}

.hrd_imgBtnQ {
  position: absolute;
  left: 1180px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* hiragana_writing_drill */

.hiragana_writing_drill_main {
  background-color: #eebbff;
}

.hwd_pageTitle {
  position: absolute;
  left: 521px * $rate;
  top: 40px * $rate;
  width: 246px * $rate;
  height: 54px * $rate;
}

.hwd_imgKakunin {
  position: absolute;
  left: 117px * $rate;
  top: 36px * $rate;
  width: 215px * $rate;
  height: 54px * $rate;
}

.hwd_answerContainer {
  position: absolute;
  left: 242px * $rate;
  top: 110px * $rate;
  width: 788px * $rate;
  height: 101px * $rate;
  background-color: #FFF;
  border-radius: 10px * $rate;
  text-align: center;
}

.hwd_answerChar {
  width: 786px * $rate / 13;
  height: 108px * $rate;
  line-height: 108px * $rate;
  font-size: 48px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
  color: #2D270E;
  margin: 0px 10px*$rate 0px 10px*$rate;
}

.hwd_imgCorrectMaru {
  position: absolute;
  left: 440px * $rate;
  top: 206px * $rate;
  width: 400px * $rate;
  height: 400px * $rate;
}

.hwd_imgIncorrect {
  position: absolute;
  left: 410px * $rate;
  top: 206px * $rate;
  width: 460px * $rate;
  height: 300px * $rate;
  z-index: 1;
}

.hwd_lblIncorrect {
  @extend .hwd_imgIncorrect;
  line-height: 300px * $rate;
  color: $font_color;
  font-family: $font_family;
  font-size: 36px * $rate;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}

.hwd_imgBtnQ {
  position: absolute;
  left: 980px * $rate;
  top: 620px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* hiragana_flashcard */

.hiragana_fc_main {
  background-color: #ff83cc;
}

.hfc_pageTitle {
  position: absolute;
  left: 446px * $rate;
  top: 40px * $rate;
  width: 383px * $rate;
  height: 54px * $rate;
}

.hfc_numerator {
  position: absolute;
  left: 575px * $rate;
  top: 530px * $rate;
  width: 58px * $rate;
  height: 44px * $rate;
  text-align: right;
  /*font-family: $font_family;*/
  font-size: 36px * $rate;
  font-weight: bold;
  color: $font_color;
}

.hfc_bar {
  position: absolute;
  left: 633px * $rate;
  top: 530px * $rate;
  width: 44px * $rate;
  height: 44px * $rate;
  text-align: center;
  /*font-family: $font_family;*/
  font-size: 36px * $rate;
  font-weight: bold;
  color: $font_color;
}

.hfc_denominator {
  position: absolute;
  left: 650px * $rate;
  top: 530px * $rate;
  width: 58px * $rate;
  height: 44px * $rate;
  text-align: right;
  /*font-family: $font_family;*/
  font-size: 36px * $rate;
  font-weight: bold;
  color: $font_color;
}

.btnStop {
  position: absolute;
  left: 761px * $rate;
  top: 122px * $rate;
  width: 57px * $rate;
  height: 58px * $rate;
}
		
.hfc_cardBg {
  position: absolute;
  left: 456px * $rate;
  top: 112px * $rate;
  width: 379px * $rate;
  height: 479px * $rate;
}

.hfc_cardIllust {
  position: absolute;
  left: 499px * $rate;
  top: 246px * $rate;
  width: 280px * $rate;
  height: 200px * $rate;
}

.hfc_cardIllustAnimate {
  -webkit-animation-name: frame_in;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
}

.hfc_cardWord {
  position: absolute;
  left: 456px * $rate;
  top: 112px * $rate;
  width: 366px * $rate;
  height: 468px * $rate;
  line-height: 468px * $rate;
  font-size: 50px * $rate;
  font-family: $font_family;
  color: $font_color;
  text-align: center;
  vertical-align: middle;
}

.btnStart {
  position: absolute;
  left: 558px * $rate;
  top: 265px * $rate;
  width: 166px * $rate;
  height: 167px * $rate;
}

.btn30Sheet {
  position: absolute;
  left: 413px * $rate;
  top: 634px * $rate;
  width: 151px * $rate;
  height: 67px * $rate;
}

.btn20Sheet {
  position: absolute;
  left: 258px * $rate;
  top: 634px * $rate;
  width: 151px * $rate;
  height: 67px * $rate;
}

.btn10Sheet {
  position: absolute;
  left: 101px * $rate;
  top: 634px * $rate;
  width: 151px * $rate;
  height: 67px * $rate;
}

.hfc_btnPrev {
  position: absolute;
  left: 164px * $rate;
  top: 272px * $rate;
  width: 114px * $rate;
  height: 130px * $rate;
}

.speed {
  position: absolute;
  top: 629px * $rate;
  width: 75px * $rate;
  height: 76px * $rate;
}
.speed0 {
  @extend .speed;
  left: 738px * $rate;
}
.speed1 {
  @extend .speed;
  left: 813px * $rate;
}
.speed2 {
  @extend .speed;
  left: 890px * $rate;
}
.speed3 {
  @extend .speed;
  left: 966px * $rate;
}
.speed4 {
  @extend .speed;
  left: 1042px * $rate;
}
.imgSlow {
  position: absolute;
  left: 657px * $rate;
  top: 653px * $rate;
  width: 77px * $rate;
  height: 29px * $rate;
}
.imgFast {
  position: absolute;
  left: 1124px * $rate;
  top: 653px * $rate;
  width: 77px * $rate;
  height: 29px * $rate;
}

.hfc_btnNext {
  position: absolute;
  left: 1004px * $rate;
  top: 272px * $rate;
  width: 114px * $rate;
  height: 130px * $rate;
}

.imgTimer {
  position: absolute;
  left: 466px * $rate;
  top: 122px * $rate;
  width: 57px * $rate;
  height: 58px * $rate;
}

.fc_imgBtnQ {
  position: absolute;
  left: 1180px * $rate;
  top: 520px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* katakana_top */

.katakana_top_main {
  background-color: #11e0ff;
}

/* katakana_gojuon */

.katakana_gojuon_main {
  background-color: #11e0ff;
}

/* katakana_practice */

.katakana_practice_main {
  background-color: #11e0ff;
}

/* katakana_reading_drill */

.katakana_reading_drill_main {
  background-color: #7efafa;
}

/* katakana_writing_drill */

.katakana_writing_drill_main {
  background-color: #17b9ff;
}

/* katakana_flashcard */

.katakana_fc_main {
  background-color: #11e0ff;
}

/* kanji_top */

.kanji1_top_main {
  background-color: #99F100;
}

.kanji2_top_main {
  background-color: #48D10F;
}

.kanji3_top_main {
  background-color: #14CF74;
}

.kt_imgYubiKidsCTop {
  position: absolute;
  top: 18px * $rate;
  left: 526px * $rate;
  width: 209px * $rate;
  height: 77px * $rate;
}

.kt_imgKTopYubi {
  position: absolute;
  left: 966px * $rate;
  top: 0px * $rate;
  width: 314px * $rate;
  height: 573px * $rate;
}

.kt_imgKakuDrill {
  position: absolute;
  left: 419px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}
.kt_imgYomuDrill {
  position: absolute;
  left: 579px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}
.kt_imgKanjiTable {
  position: absolute;
  left: 739px * $rate;
  top: 130px * $rate;
  width: 122px * $rate;
  height: 556px * $rate;
}

.kt_imgTopVLine {
  position: absolute;
  top: 130px * $rate;
  width: 4px * $rate;
  height: 588px * $rate;
}
.kt_imgTopVLine1 {
  @extend .kt_imgTopVLine;
  left: 400px * $rate;
}
.kt_imgTopVLine2 {
  @extend .kt_imgTopVLine;
  left: 560px * $rate;
}
.kt_imgTopVLine3 {
  @extend .kt_imgTopVLine;
  left: 720px * $rate;
}

.kt_imgTopNew {
  position: absolute;
  top: 100px * $rate;
  width: 69px * $rate;
  height: 76px * $rate;
}
.kt_imgTopNewKaku {
  @extend .kt_imgTopNew;
  left: 486px * $rate;
}
.kt_imgTopNewYomu {
  @extend .kt_imgTopNew;
  left: 646px * $rate;
}
.kt_imgTopNewTable {
  @extend .kt_imgTopNew;
  left: 806px * $rate;
}

/* kanji_table */

.kanji1_table_main {
  background-color: #99F100;
}

.kanji2_table_main {
  background-color: #48D10F;
}

.kanji3_table_main {
  background-color: #14CF74;
}

.ktbl_pageTitle {
  position: absolute;
  left: 556px * $rate;
  top: 14px * $rate;
  width: 172px * $rate;
  height: 74px * $rate;
}

.ktbl_tableScrollView {
  position: absolute;
  left : 52px * $rate;
  top: 134px * $rate;
  width: 1166px * $rate;
  height: 548px * $rate;
  overflow-x: scroll;
  -webkit-overflow-scrolling : touch;
}

.ktbl_tableScrollView table {
  table-layout: fixed;
}

.ktbl_tableScrollView tr {
}

.ktbl_tableScrollView td {
  height: 108px * $rate;
  width: 108px * $rate;
  min-width: 108px * $rate;
  max-width: 108px * $rate;
  text-align:center;
  vertical-align:middle;
}

.ktbl_char {
  height: 100px * $rate;
  width: 100px * $rate;
  line-height: 100px * $rate;
  margin: 4px * $rate;
  font-family: $font_family;
  font-size: 72px * $rate;
  border-radius: 10px * $rate;
  color: $font_color;
  text-align:center;
  vertical-align:middle;
  display: block;
  background-color: #FFFFFF;
}

.ktbl_imgNew {
  position: absolute;
  height: 42px * $rate;
  width: 45px * $rate;
  margin: -105px*$rate 0px 0px -57px*$rate;
  display: inline-block;
}

.ktbl_btnPrev {
  position: absolute;
  left: 22px * $rate;
  top: 368px * $rate;
  width: 31px * $rate;
  height: 84px * $rate;
}
.ktbl_btnNext {
  position: absolute;
  left: 1227px * $rate;
  top: 368px * $rate;
  width: 31px * $rate;
  height: 84px * $rate;
}

.ktbl_imgBtnQ {
  position: absolute;
  left: 1070px * $rate;
  top: 10px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* kanji_practice */

.kanji1_practice_main {
  background-color: #99F100;
}

.kanji2_practice_main {
  background-color: #48D10F;
}

.kanji3_practice_main {
  background-color: #14CF74;
}

.kp_pageTitle {
  position: absolute;
  left: 860px * $rate;
  top: 18px * $rate;
  width: 260px * $rate;
  height: 74px * $rate;
}

.kp_imgTatekei {
  position: absolute;
  left: 800px * $rate;
  top: 0px * $rate;
  width: 7px * $rate;
  height: 720px * $rate;
}

.kp_lblKanji {
  position: absolute;
  left: 234px * $rate;
  top: 20px * $rate;
  width: 100px * $rate;
  height: 100px * $rate;
  line-height: 100px * $rate;
  color: $font_color;
  font-size: 80px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
}

.kp_lblStrokeNum {
  position: absolute;
  left: 320px * $rate;
  top: 54px * $rate;
  width: 90px * $rate;
  height: 38px * $rate;
  line-height: 38px * $rate;
  color: $font_color;
  font-size: 30px * $rate;
  font-family: $font_family;
  text-align: center;
  vertical-align: middle;
}

.kp_readingContainer {
  position: absolute;
  top: 14px * $rate;
  width: 100px * $rate;
  height: 112px * $rate;
}

.kp_readingContainerL {
  @extend .kp_readingContainer;
  left: 420px * $rate;
  display: table;
}

.kp_readingContainerR {
  @extend .kp_readingContainer;
  left: 520px * $rate;
}

.centeringContainer {
  display: table-cell;
  vertical-align: middle;
}

.kp_lblReading {
  display: block;
  width: 100px * $rate;
  height: 112px * $rate / 6;
  line-height: 112px * $rate / 6;
  text-align: left;
  vertical-align: middle;
  color: $font_color;
  font-size: 16px * $rate;
  font-family: $font_family;
}

.kp_lblOkuri {
  color: $font_red_color;
}

.kp_savedChar {
  position: absolute;
  width: 110px * $rate;
  height: 110px * $rate;
  padding: 3px * $rate;
  border-radius: 10px * $rate;
  background-color: #FFFFFF;
}

.kp_savedChar1 {
  @extend .kp_savedChar;
  left: 1065px * $rate;
  top: 113px * $rate;
}
.kp_savedChar2 {
  @extend .kp_savedChar;
  left: 1065px * $rate;
  top: 233px * $rate;
}
.kp_savedChar3 {
  @extend .kp_savedChar;
  left: 1065px * $rate;
  top: 353px * $rate;
}
.kp_savedChar4 {
  @extend .kp_savedChar;
  left: 1065px * $rate;
  top: 473px * $rate;
}
.kp_savedChar5 {
  @extend .kp_savedChar;
  left: 1065px * $rate;
  top: 593px * $rate;
}
.kp_savedChar6 {
  @extend .kp_savedChar;
  left: 905px * $rate;
  top: 113px * $rate;
}
.kp_savedChar7 {
  @extend .kp_savedChar;
  left: 905px * $rate;
  top: 233px * $rate;
}
.kp_savedChar8 {
  @extend .kp_savedChar;
  left: 905px * $rate;
  top: 353px * $rate;
}
.kp_savedChar9 {
  @extend .kp_savedChar;
  left: 905px * $rate;
  top: 473px * $rate;
}
.kp_savedChar10 {
  @extend .kp_savedChar;
  left: 905px * $rate;
  top: 593px * $rate;
}

.kp_imgSavedChar {
  width: 104px * $rate;
  height: 104px * $rate;
}

.kp_imgBtnQ {
  position: absolute;
  left: 700px * $rate;
  top: 10px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* kanji_reading_drill */

.kanji1_reading_drill_main {
  background-color: #c2ff0d;
}
.kanji2_reading_drill_main {
  background-color: #85e33f;
}
.kanji3_reading_drill_main {
  background-color: #66f1b1;
}

.krd_pageTitle {
  position: absolute;
  left: 846px * $rate;
  top: 16px * $rate;
  width: 237px * $rate;
  height: 74px * $rate;
}

.krd_questionLine {
  position: relative;
  left: 100px * $rate;
  width: 52px * $rate;
  height: 509px * $rate;
  line-height: 52px * $rate;
  font-size: 26px * $rate;
  font-family: $font_family;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.krd_fillInLine {
  left: 848px * $rate / 1.75;
  top: 178px * $rate / 30;
  width: 40px * $rate;
  height: 509px * $rate;
  line-height: 40px * $rate;
  margin-left: 4px * $rate;
  font-size: 40px * $rate;
  font-family: $font_family;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.krd_fillIn {
  @extend .fillIn;
  margin: 0px 0px 0px 0px;
}

.krd_textLine {
  width: 385px * $rate / 2.4;
  height: 509px * $rate;
  color: $font_color;
  font-size: 40px * $rate;
  font-family: $font_family;
  line-height: 1.2;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.krd_imgBgDrillNo {
  position: absolute;
  left: 1098px * $rate;
  top: 37px * $rate;
  width: 53px * $rate;
  height: 53px * $rate;
}

.krd_drillNo {
  position: absolute;
  left: 1098px * $rate;
  top: 37px * $rate;
  width: 53px * $rate;
  height: 53px * $rate;
  line-height: 53px * $rate;
  color: #FFFFFF;
  border-radius: 90px * $rate;
  text-align: center;
  vertical-align: middle;
  font-size: 30px * $rate;
}

.krd_drillNoForTest {
  @extend .krd_drillNo;
  color: #000000;
}

.krd_imgBtnQ {
  position: absolute;
  left: 700px * $rate;
  top: 10px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* kanji_writing_drill */

.kanji1_writing_drill_main {
  background-color: #e5ff43;
}
.kanji2_writing_drill_main {
  background-color: #afff99;
}
.kanji3_writing_drill_main {
  background-color: #99ffd7;
}

.kwd_pageTitle {
  position: absolute;
  left: 846px * $rate;
  top: 16px * $rate;
  width: 237px * $rate;
  height: 74px * $rate;
}

.kwd_questionLine {
  position: relative;
  left: 100px * $rate;
  width: 52px * $rate;
  height: 509px * $rate;
  line-width: 52px * $rate;
  font-size: 26px * $rate;
  font-family: $font_family;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.kwd_textLine {
  width: 385px * $rate / 2.4;
  height: 509px * $rate;
  color: $font_color;
  font-size: 40px * $rate;
  font-family: $font_family;
  line-height: 1.2;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.kwd_imgBgDrillNo {
  position: absolute;
  left: 1098px * $rate;
  top: 37px * $rate;
  width: 53px * $rate;
  height: 53px * $rate;
}

.kwd_drillNo {
  position: absolute;
  left: 1098px * $rate;
  top: 37px * $rate;
  width: 53px * $rate;
  height: 53px * $rate;
  line-height: 53px * $rate;
  color: #FFFFFF;
  border-radius: 90px * $rate;
  text-align: center;
  vertical-align: middle;
  font-size: 30px * $rate;
}

.kwd_drillNoForTest {
  @extend .kwd_drillNo;
  color: #000000;
}

.kwd_imgBtnQ {
  position: absolute;
  left: 700px * $rate;
  top: 10px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
}

/* kotoba_top */

.kotoba1_top_main {
  background-color: #fff82f;
}

.kotoba2_top_main {
  background-color: #ffcc0d;
}

.kotoba3_top_main {
  background-color: #ff8855;
}

.kott_imgYubiKidsCTop {
  position: absolute;
  top: 18px * $rate;
  left: 526px * $rate;
  width: 209px * $rate;
  height: 77px * $rate;
}

.kott_imgKotTopYubi {
  position: absolute;
  left: 966px * $rate;
  top: 0px * $rate;
  width: 314px * $rate;
  height: 573px * $rate;
}

.kott_drillMenuScrollView {
  position: absolute;
  left: 0px * $rate;
  top: 98px * $rate;
  width: 889px * $rate;
  height: 600px * $rate;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling : touch;
}

.kott_drillMenuContainer {
  width: 889px * $rate;
  height: 600px * $rate;
  text-align: right;
}

.kott_imgTopVLine {
  width: 4px * $rate;
  height: 588px * $rate;
  vertical-align: top;
  margin: 32px*$rate 0px 0px 0px;
}

.kott_imgTopTitle {
  width: 122px * $rate;
  height: 556px * $rate;
  vertical-align: top;
  margin: 32px*$rate 8px*$rate 0px 8px*$rate;
}

.kott_imgTopNew {
  position: absolute;
  width: 69px * $rate;
  height: 76px * $rate;
  margin: 0px 0px 0px -70px*$rate;
}

/* kotoba_drill */

.kotoba1_odd_drill_main {
  background-color: #f7ff00;
}

.kotoba1_even_drill_main {
  background-color: #ffff77;
}

.kotoba2_odd_drill_main {
  background-color: #ffe500;
}

.kotoba2_even_drill_main {
  background-color: #ffee66;
}

.kotoba3_odd_drill_main {
  background-color: #ffae33;
}

.kotoba3_even_drill_main {
  background-color: #ffd161;
}

.kotd_pageTitle {
  position: absolute;
  left: 834px * $rate;
  top: 40px * $rate;
  width: 358px * $rate;
  height: 73px * $rate;
}

.kotd_imgBgOption {
  position: absolute;
  left: 178px * $rate;
  top: 130px * $rate;
  width: 446px * $rate;
  height: 447px * $rate;
}

.kotd_optionBoard {
  position: absolute;
  left: 182px * $rate;
  top: 134px * $rate;
  width: 438px * $rate;
  height: 439px * $rate;
  font-size: 0px * $rate;
  text-align: center;
  vertical-align: top;
  display: table;
  table-layout: fixed;
}

.kotd_option {
  width: auto;
  height: 446px * $rate;
  color: $font_color;
  font-size: 30px * $rate;
  font-family: $font_family;
  vertical-align: top;
  display: table-cell;
}

.kotd_optionText {
  height: 426px * $rate;
  line-height: 1.2;
  margin-top: 10px * $rate;
  text-align: left;
  -webkit-writing-mode: vertical-rl;
}

.kotd_imgBgExplain {
  position: absolute;
  left: 206px * $rate;
  top: 577px * $rate;
  width: 390px * $rate;
  height: 128px * $rate;
}

.kotd_lblExplain {
  position: absolute;
  left: 210px * $rate;
  top: 596px * $rate;
  width: 382px * $rate;
  height: 105px * $rate;
  line-height: 1.2;
  font-size: 24px * $rate;
  font-family: $font_family;
  text-align: left;
  vertical-align: top;
}

.kotd_imgKotobaLeft {
  position: absolute;
  left: 0px * $rate;
  top: 519px * $rate;
  width: 201px * $rate;
  height: 201px * $rate;
  z-index: -2;
}

.kotd_questionLine {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 501px * $rate;
  line-height: 1.2;
  font-size: 26px * $rate;
  font-family: $font_family;
  margin: 13px * $rate;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.kotd_textLine {
  width: 210px * $rate;
  height: 501px * $rate;
  color: $font_color;
  font-size: 40px * $rate;
  font-family: $font_family;
  line-height: 1.2;
  margin: 13px * $rate;
  -webkit-writing-mode: vertical-rl;
  display: inline;
}

.kotd_questionIllust {
  position: absolute;
  left: 940.5px * $rate;
  top: 487px * $rate;
  width: 200px * $rate;
  height: 200.48019207683395px * $rate;
}

.kotd_imgBtnQ {
  position: absolute;
  left: 700px * $rate;
  top: 10px * $rate;
  width: 81px * $rate;
  height: 81px * $rate;
  z-index: 10;
}

/* info */
.imgInfo {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 1280px * $rate;
  height: 720px * $rate;
}

/* help */
.imgHelp {
  position: absolute;
  left: 0px * $rate;
  top: 0px * $rate;
  width: 1280px * $rate;
  height: 720px * $rate;
}

.imgCloseHelp {
  @extend .imgBack;
  z-index: 2;
}

div.dialog > div#inputArea > input[type="password"] {
  border: 1px solid !important;
  display: inline-block !important;
}