.toolbar .title { background-image: url(img/ouin/title.png); }

.text { background-image: url(img/ouin/text.png); }

.sentence_title {
  width: 1.12rem;
  right: 0;
  top: 8.78rem;
  border-radius: .18rem 0 0 .18rem;
  background: 0 0 / 100% auto #999 no-repeat;
}

.sentence,
.sentence_answer {
  width: 7.3rem;
  right: 1.26rem;
  top: 1.72rem;
  border: .04rem solid transparent;
  pointer-events: none;
}
.sentence {
  background-position: .2rem .68rem;
  background-size: 6.79rem auto;
  z-index: 2;
}
[data-answer-shown] .sentence_answer {
  border-color: #000;
  background-color: #fff;
}

.letter {
  width: .97rem;
  height: .97rem;
  z-index: 1;
  border-radius: 50%;
}
[data-answer-shown] .letter[data-select-correct],
.page:not([data-answer-shown]) .letter.selected { background: #f9cfba; }

.page[data-state="cleared"] .letter,
.page[data-state="retry"] .letter,
[data-answer-shown] .letter {
  pointer-events: none;
}

.page[data-state="cleared"] .cleared {
  width: 6rem;
  height: 6.29rem;
  right: 1.8rem;
  top: 2.6rem;
  z-index: 3;
  background-image: url(img/ouin/circle.png);
}
.page:not([data-state="cleared"]) .cleared { display: none; }

.retry { right: 2.5rem; }

.check {
  width: 2rem;
  height: 2rem;
  right: 3.92rem;
  top: 12.84rem;
  border-radius: 50%;
  background: center / cover url(img/ouin/check.png) #ea6183 no-repeat;
  box-shadow: .07rem .07rem .06rem rgba(0, 0, 0, .3); 
}
.check:disabled { background-color: #b2b2b2; }

.zekku5 .sentence,
.zekku5[data-answer-shown] .sentence_answer { height: 6.6rem; }
.zekku5 .letter[data-num="1"],
.zekku5 .letter[data-num="2"],
.zekku5 .letter[data-num="3"],
.zekku5 .letter[data-num="4"],
.zekku5 .letter[data-num="5"] { right: 1.83rem; }
.zekku5 .letter[data-num="6"],
.zekku5 .letter[data-num="7"],
.zekku5 .letter[data-num="8"],
.zekku5 .letter[data-num="9"],
.zekku5 .letter[data-num="10"] { right: calc(1.83rem + 1.79rem); }
.zekku5 .letter[data-num="11"],
.zekku5 .letter[data-num="12"],
.zekku5 .letter[data-num="13"],
.zekku5 .letter[data-num="14"],
.zekku5 .letter[data-num="15"] { right: calc(1.83rem + 1.79 * 2rem); }
.zekku5 .letter[data-num="16"],
.zekku5 .letter[data-num="17"],
.zekku5 .letter[data-num="18"],
.zekku5 .letter[data-num="19"],
.zekku5 .letter[data-num="20"] { right: calc(1.83rem + 1.79 * 3rem); }
.zekku5 .letter[data-num="1"],
.zekku5 .letter[data-num="6"],
.zekku5 .letter[data-num="11"],
.zekku5 .letter[data-num="16"] { top: 2.33rem; }
.zekku5 .letter[data-num="2"],
.zekku5 .letter[data-num="7"],
.zekku5 .letter[data-num="12"],
.zekku5 .letter[data-num="17"] { top: calc(2.33rem + 1.08rem); }
.zekku5 .letter[data-num="3"],
.zekku5 .letter[data-num="8"],
.zekku5 .letter[data-num="13"],
.zekku5 .letter[data-num="18"] { top: calc(2.33rem + 1.08 * 2rem); }
.zekku5 .letter[data-num="4"],
.zekku5 .letter[data-num="9"],
.zekku5 .letter[data-num="14"],
.zekku5 .letter[data-num="19"] { top: calc(2.33rem + 1.08 * 3rem); }
.zekku5 .letter[data-num="5"],
.zekku5 .letter[data-num="10"],
.zekku5 .letter[data-num="15"],
.zekku5 .letter[data-num="20"] { top: calc(2.33rem + 1.08 * 4rem); }

.zekku7 .sentence,
.zekku7[data-answer-shown] .sentence_answer { height: 8.86rem; }
.zekku7 .letter[data-num="1"],
.zekku7 .letter[data-num="2"],
.zekku7 .letter[data-num="3"],
.zekku7 .letter[data-num="4"],
.zekku7 .letter[data-num="5"],
.zekku7 .letter[data-num="6"],
.zekku7 .letter[data-num="7"] { right: 1.83rem; }
.zekku7 .letter[data-num="8"],
.zekku7 .letter[data-num="9"],
.zekku7 .letter[data-num="10"],
.zekku7 .letter[data-num="11"],
.zekku7 .letter[data-num="12"],
.zekku7 .letter[data-num="13"],
.zekku7 .letter[data-num="14"] { right: calc(1.83rem + 1.79rem); }
.zekku7 .letter[data-num="15"],
.zekku7 .letter[data-num="16"],
.zekku7 .letter[data-num="17"],
.zekku7 .letter[data-num="18"],
.zekku7 .letter[data-num="19"],
.zekku7 .letter[data-num="20"],
.zekku7 .letter[data-num="21"] { right: calc(1.83rem + 1.79 * 2rem); }
.zekku7 .letter[data-num="22"],
.zekku7 .letter[data-num="23"],
.zekku7 .letter[data-num="24"],
.zekku7 .letter[data-num="25"],
.zekku7 .letter[data-num="26"],
.zekku7 .letter[data-num="27"],
.zekku7 .letter[data-num="28"] { right: calc(1.83rem + 1.79 * 3rem); }
.zekku7 .letter[data-num="1"],
.zekku7 .letter[data-num="8"],
.zekku7 .letter[data-num="15"],
.zekku7 .letter[data-num="22"] { top: 2.33rem; }
.zekku7 .letter[data-num="2"],
.zekku7 .letter[data-num="9"],
.zekku7 .letter[data-num="16"],
.zekku7 .letter[data-num="23"] { top: calc(2.33rem + 1.08rem); }
.zekku7 .letter[data-num="3"],
.zekku7 .letter[data-num="10"],
.zekku7 .letter[data-num="17"],
.zekku7 .letter[data-num="24"] { top: calc(2.33rem + 1.08 * 2rem); }
.zekku7 .letter[data-num="4"],
.zekku7 .letter[data-num="11"],
.zekku7 .letter[data-num="18"],
.zekku7 .letter[data-num="25"] { top: calc(2.33rem + 1.08 * 3rem); }
.zekku7 .letter[data-num="5"],
.zekku7 .letter[data-num="12"],
.zekku7 .letter[data-num="19"],
.zekku7 .letter[data-num="26"] { top: calc(2.33rem + 1.08 * 4rem); }
.zekku7 .letter[data-num="6"],
.zekku7 .letter[data-num="13"],
.zekku7 .letter[data-num="20"],
.zekku7 .letter[data-num="27"] { top: calc(2.33rem + 1.08 * 5rem); }
.zekku7 .letter[data-num="7"],
.zekku7 .letter[data-num="14"],
.zekku7 .letter[data-num="21"],
.zekku7 .letter[data-num="28"] { top: calc(2.33rem + 1.08 * 6rem); }

.risshi5 .sentence,
.risshi5[data-answer-shown] .sentence_answer {
  height: 12.86rem;
  top: .92rem;
}
.risshi5 .check { top: 14.14rem; }
.risshi5 .letter[data-num="1"],
.risshi5 .letter[data-num="2"],
.risshi5 .letter[data-num="3"],
.risshi5 .letter[data-num="4"],
.risshi5 .letter[data-num="5"],
.risshi5 .letter[data-num="6"],
.risshi5 .letter[data-num="7"],
.risshi5 .letter[data-num="8"],
.risshi5 .letter[data-num="9"],
.risshi5 .letter[data-num="10"] { right: 1.83rem; }
.risshi5 .letter[data-num="11"],
.risshi5 .letter[data-num="12"],
.risshi5 .letter[data-num="13"],
.risshi5 .letter[data-num="14"],
.risshi5 .letter[data-num="15"],
.risshi5 .letter[data-num="16"],
.risshi5 .letter[data-num="17"],
.risshi5 .letter[data-num="18"],
.risshi5 .letter[data-num="19"],
.risshi5 .letter[data-num="20"] { right: calc(1.83rem + 1.79rem); }
.risshi5 .letter[data-num="21"],
.risshi5 .letter[data-num="22"],
.risshi5 .letter[data-num="23"],
.risshi5 .letter[data-num="24"],
.risshi5 .letter[data-num="25"],
.risshi5 .letter[data-num="26"],
.risshi5 .letter[data-num="27"],
.risshi5 .letter[data-num="28"],
.risshi5 .letter[data-num="29"],
.risshi5 .letter[data-num="30"] { right: calc(1.83rem + 1.79 * 2rem); }
.risshi5 .letter[data-num="31"],
.risshi5 .letter[data-num="32"],
.risshi5 .letter[data-num="33"],
.risshi5 .letter[data-num="34"],
.risshi5 .letter[data-num="35"],
.risshi5 .letter[data-num="36"],
.risshi5 .letter[data-num="37"],
.risshi5 .letter[data-num="38"],
.risshi5 .letter[data-num="39"],
.risshi5 .letter[data-num="40"] { right: calc(1.83rem + 1.79 * 3rem); }
.risshi5 .letter[data-num="1"],
.risshi5 .letter[data-num="11"],
.risshi5 .letter[data-num="21"],
.risshi5 .letter[data-num="31"] { top: 1.53rem; }
.risshi5 .letter[data-num="2"],
.risshi5 .letter[data-num="12"],
.risshi5 .letter[data-num="22"],
.risshi5 .letter[data-num="32"] { top: calc(1.53rem + 1.08rem); }
.risshi5 .letter[data-num="3"],
.risshi5 .letter[data-num="13"],
.risshi5 .letter[data-num="23"],
.risshi5 .letter[data-num="33"] { top: calc(1.53rem + 1.08 * 2rem); }
.risshi5 .letter[data-num="4"],
.risshi5 .letter[data-num="14"],
.risshi5 .letter[data-num="24"],
.risshi5 .letter[data-num="34"] { top: calc(1.53rem + 1.08 * 3rem); }
.risshi5 .letter[data-num="5"],
.risshi5 .letter[data-num="15"],
.risshi5 .letter[data-num="25"],
.risshi5 .letter[data-num="35"] { top: calc(1.53rem + 1.08 * 4rem); }
.risshi5 .letter[data-num="6"],
.risshi5 .letter[data-num="16"],
.risshi5 .letter[data-num="26"],
.risshi5 .letter[data-num="36"] { top: 7.68rem; }
.risshi5 .letter[data-num="7"],
.risshi5 .letter[data-num="17"],
.risshi5 .letter[data-num="27"],
.risshi5 .letter[data-num="37"] { top: calc(7.68rem + 1.08rem); }
.risshi5 .letter[data-num="8"],
.risshi5 .letter[data-num="18"],
.risshi5 .letter[data-num="28"],
.risshi5 .letter[data-num="38"] { top: calc(7.68rem + 1.08 * 2rem); }
.risshi5 .letter[data-num="9"],
.risshi5 .letter[data-num="19"],
.risshi5 .letter[data-num="29"],
.risshi5 .letter[data-num="39"] { top: calc(7.68rem + 1.08 * 3rem); }
.risshi5 .letter[data-num="10"],
.risshi5 .letter[data-num="20"],
.risshi5 .letter[data-num="30"],
.risshi5 .letter[data-num="40"] { top: calc(7.68rem + 1.08 * 4rem); }

.risshi7 .sentence,
.risshi7[data-answer-shown] .sentence_answer {
  height: 16.49rem;
  top: .32rem;
  background-position: .2rem .42rem;
}
.risshi7 .check {
  width: 1.12rem;
  height: 1.12rem;
  right: .12rem;
  top: 14.12rem;
  background-image: url(img/ouin/check-s.png);
}
.risshi7 .letter[data-num="1"],
.risshi7 .letter[data-num="2"],
.risshi7 .letter[data-num="3"],
.risshi7 .letter[data-num="4"],
.risshi7 .letter[data-num="5"],
.risshi7 .letter[data-num="6"],
.risshi7 .letter[data-num="7"],
.risshi7 .letter[data-num="8"],
.risshi7 .letter[data-num="9"],
.risshi7 .letter[data-num="10"],
.risshi7 .letter[data-num="11"],
.risshi7 .letter[data-num="12"],
.risshi7 .letter[data-num="13"],
.risshi7 .letter[data-num="14"] { right: 1.83rem; }
.risshi7 .letter[data-num="15"],
.risshi7 .letter[data-num="16"],
.risshi7 .letter[data-num="17"],
.risshi7 .letter[data-num="18"],
.risshi7 .letter[data-num="19"],
.risshi7 .letter[data-num="20"],
.risshi7 .letter[data-num="21"],
.risshi7 .letter[data-num="22"],
.risshi7 .letter[data-num="23"],
.risshi7 .letter[data-num="24"],
.risshi7 .letter[data-num="25"],
.risshi7 .letter[data-num="26"],
.risshi7 .letter[data-num="27"],
.risshi7 .letter[data-num="28"] { right: calc(1.83rem + 1.79rem); }
.risshi7 .letter[data-num="29"],
.risshi7 .letter[data-num="30"],
.risshi7 .letter[data-num="31"],
.risshi7 .letter[data-num="32"],
.risshi7 .letter[data-num="33"],
.risshi7 .letter[data-num="34"],
.risshi7 .letter[data-num="35"],
.risshi7 .letter[data-num="36"],
.risshi7 .letter[data-num="37"],
.risshi7 .letter[data-num="38"],
.risshi7 .letter[data-num="39"],
.risshi7 .letter[data-num="40"],
.risshi7 .letter[data-num="41"],
.risshi7 .letter[data-num="42"] { right: calc(1.83rem + 1.79 * 2rem); }
.risshi7 .letter[data-num="43"],
.risshi7 .letter[data-num="44"],
.risshi7 .letter[data-num="45"],
.risshi7 .letter[data-num="46"],
.risshi7 .letter[data-num="47"],
.risshi7 .letter[data-num="48"],
.risshi7 .letter[data-num="49"],
.risshi7 .letter[data-num="50"],
.risshi7 .letter[data-num="51"],
.risshi7 .letter[data-num="52"],
.risshi7 .letter[data-num="53"],
.risshi7 .letter[data-num="54"],
.risshi7 .letter[data-num="55"],
.risshi7 .letter[data-num="56"] { right: calc(1.83rem + 1.79 * 3rem); }
.risshi7 .letter[data-num="1"],
.risshi7 .letter[data-num="15"],
.risshi7 .letter[data-num="29"],
.risshi7 .letter[data-num="43"] { top: .67rem; }
.risshi7 .letter[data-num="2"],
.risshi7 .letter[data-num="16"],
.risshi7 .letter[data-num="30"],
.risshi7 .letter[data-num="44"] { top: calc(.67rem + 1.08rem); }
.risshi7 .letter[data-num="3"],
.risshi7 .letter[data-num="17"],
.risshi7 .letter[data-num="31"],
.risshi7 .letter[data-num="45"] { top: calc(.67rem + 1.08 * 2rem); }
.risshi7 .letter[data-num="4"],
.risshi7 .letter[data-num="18"],
.risshi7 .letter[data-num="32"],
.risshi7 .letter[data-num="46"] { top: calc(.67rem + 1.08 * 3rem); }
.risshi7 .letter[data-num="5"],
.risshi7 .letter[data-num="19"],
.risshi7 .letter[data-num="33"],
.risshi7 .letter[data-num="47"] { top: calc(.67rem + 1.08 * 4rem); }
.risshi7 .letter[data-num="6"],
.risshi7 .letter[data-num="20"],
.risshi7 .letter[data-num="34"],
.risshi7 .letter[data-num="48"] { top: calc(.67rem + 1.09 * 5rem); }
.risshi7 .letter[data-num="7"],
.risshi7 .letter[data-num="21"],
.risshi7 .letter[data-num="35"],
.risshi7 .letter[data-num="49"] { top: calc(.67rem + 1.08 * 6rem); }
.risshi7 .letter[data-num="8"],
.risshi7 .letter[data-num="22"],
.risshi7 .letter[data-num="36"],
.risshi7 .letter[data-num="50"] { top: 8.96rem; }
.risshi7 .letter[data-num="9"],
.risshi7 .letter[data-num="23"],
.risshi7 .letter[data-num="37"],
.risshi7 .letter[data-num="51"] { top: calc(8.96rem + 1.08rem); }
.risshi7 .letter[data-num="10"],
.risshi7 .letter[data-num="24"],
.risshi7 .letter[data-num="38"],
.risshi7 .letter[data-num="52"] { top: calc(8.96rem + 1.08 * 2rem); }
.risshi7 .letter[data-num="11"],
.risshi7 .letter[data-num="25"],
.risshi7 .letter[data-num="39"],
.risshi7 .letter[data-num="53"] { top: calc(8.96rem + 1.08 * 3rem); }
.risshi7 .letter[data-num="12"],
.risshi7 .letter[data-num="26"],
.risshi7 .letter[data-num="40"],
.risshi7 .letter[data-num="54"] { top: calc(8.96rem + 1.08 * 4rem); }
.risshi7 .letter[data-num="13"],
.risshi7 .letter[data-num="27"],
.risshi7 .letter[data-num="41"],
.risshi7 .letter[data-num="55"] { top: calc(8.96rem + 1.08 * 5rem); }
.risshi7 .letter[data-num="14"],
.risshi7 .letter[data-num="28"],
.risshi7 .letter[data-num="42"],
.risshi7 .letter[data-num="56"] { top: calc(8.96rem + 1.08 * 6rem); }