@charset "UTF-8";
.course-sub-head a {
  padding-left: 3px;
  padding-right: 3px;
}
.course-sub-head a:last-child {
  padding-right: 10px;
}
.course-sub-head a:first-child {
  padding-left: 10px;
}

.course-contents-icon, .course-contents-icon--note, .course-contents-icon--kanji, .course-contents-icon--vocabulary, .course-contents-icon--culture, .course-contents-icon--model, .course-contents-icon--hint, .course-contents-icon--hiragana, .course-contents-icon--katakana, .course-contents-icon--help, .course-contents-icon--typing {
  display: block;
  width: 26px;
  height: 26px;
  /*margin-left: 10px;*/
  padding: 6px;
  cursor: pointer;
  /*	&:hover {
  		opacity: 0.8;
  	}*/
}
.course-contents-icon--note {
  background: url(/a1/course/assets/img/icon-contents/note.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--note:hover {
  background-image: url(/a1/course/assets/img/icon-contents/note_over.png);
}
.course-contents-icon--kanji {
  background: url(/a1/course/assets/img/icon-contents/kanji.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--kanji:hover {
  background-image: url(/a1/course/assets/img/icon-contents/kanji_over.png);
}
.course-contents-icon--vocabulary {
  background: url(/a1/course/assets/img/icon-contents/vocabulary.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--vocabulary:hover {
  background-image: url(/a1/course/assets/img/icon-contents/vocabulary_over.png);
}
.course-contents-icon--culture {
  background: url(/a1/course/assets/img/icon-contents/culture.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--culture:hover {
  background-image: url(/a1/course/assets/img/icon-contents/culture_over.png);
}
.course-contents-icon--model {
  background: url(/a1/course/assets/img/icon-contents/model.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--model:hover {
  background-image: url(/a1/course/assets/img/icon-contents/model_over.png);
}
.course-contents-icon--hint {
  background: url(/a1/course/assets/img/icon-contents/hint.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--hint:hover {
  background-image: url(/a1/course/assets/img/icon-contents/hint_over.png);
}
.course-contents-icon--hiragana {
  background: url(/a1/course/assets/img/icon-contents/hiragana.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--hiragana:hover {
  background-image: url(/a1/course/assets/img/icon-contents/hiragana_over.png);
}
.course-contents-icon--katakana {
  background: url(/a1/course/assets/img/icon-contents/katakana.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--katakana:hover {
  background-image: url(/a1/course/assets/img/icon-contents/katakana_over.png);
}
.course-contents-icon--help {
  background: url(/a1/course/assets/img/icon-contents/help.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--help:hover {
  background-image: url(/a1/course/assets/img/icon-contents/help_over.png);
}
.course-contents-icon--typing {
  background: url(/a1/course/assets/img/icon-contents/typing.png) center center no-repeat;
  background-color: #ffcae8;
}
.course-contents-icon--typing:hover {
  background-image: url(/a1/course/assets/img/icon-contents/typing_over.png);
}

.course-instruction-icon, .course-instruction-icon--1, .course-instruction-icon--2, .course-instruction-icon--3, .course-instruction-icon--4, .course-instruction-icon--5, .course-instruction-icon--6, .course-instruction-icon--7, .course-instruction-icon--8, .course-instruction-icon--9, .course-instruction-icon--10, .course-instruction-icon--11, .course-instruction-icon--12 {
  display: block;
  width: 56px;
  height: 34px;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 56px;
      -ms-flex: 0 0 56px;
          flex: 0 0 56px;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.course-instruction-icon--1 {
  background: url(../img/icon-instruction/1.png) center center no-repeat;
}
.course-instruction-icon--2 {
  background: url(../img/icon-instruction/2.png) center center no-repeat;
}
.course-instruction-icon--3 {
  background: url(../img/icon-instruction/3.png) center center no-repeat;
}
.course-instruction-icon--4 {
  background: url(../img/icon-instruction/4.png) center center no-repeat;
}
.course-instruction-icon--5 {
  background: url(../img/icon-instruction/5.png) center center no-repeat;
}
.course-instruction-icon--6 {
  background: url(../img/icon-instruction/6.png) center center no-repeat;
}
.course-instruction-icon--7 {
  background: url(../img/icon-instruction/7.png) center center no-repeat;
}
.course-instruction-icon--8 {
  background: url(../img/icon-instruction/8.png) center center no-repeat;
}
.course-instruction-icon--9 {
  background: url(../img/icon-instruction/9.png) center center no-repeat;
}
.course-instruction-icon--10 {
  background: url(../img/icon-instruction/10.png) center center no-repeat;
}
.course-instruction-icon--11 {
  background: url(../img/icon-instruction/11.png) center center no-repeat;
}
.course-instruction-icon--12 {
  background: url(../img/icon-instruction/12.png) center center no-repeat;
}

.course-instruction {
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding-top: 5px;
  margin-bottom: 10px;
}
.course-instruction-step {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
  font-size: 15px;
  color: #d8137e;
}
.course-instruction-step__title {
  margin-right: 13px;
}
.course-instruction-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.course-instruction-main__text {
  padding-left: 10px;
  font-size: 16px;
  color: #474747;
  line-height: 1.4;
}
.course-instruction-main__text .f17 {
  font-size: 17px;
}
.course-instruction-main-line {
  text-decoration: underline;
}
.course-instruction-step {
  margin-right: 10px;
}
.course-instruction-sub {
  color: #474747;
}
.course-instruction .correct-counter {
  margin: 6px 0 0;
  color: #474747;
  font-size: 16px;
  text-align: right;
}
.course-instruction .correct-counter .cc-head {
  margin: 0 9px 0 0;
  padding: 5px 9px;
  border: 2px solid #474747;
}
.course-instruction .correct-counter .num_correct {
  padding-left: 4px;
}

.course-btn-base, .course-btn-primary, .course-btn-check, .course-btn-next, .course-btn-next-question, .course-btn-correct-result, .course-btn-retry {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: bottom;
}
.course-btn-base:hover, .course-btn-primary:hover, .course-btn-check:hover, .course-btn-next:hover, .course-btn-next-question:hover, .course-btn-correct-result:hover, .course-btn-retry:hover {
  opacity: 0.8;
}

.course-btn-primary, .course-btn-check, .course-btn-next, .course-btn-next-question, .course-btn-correct-result {
  color: #ffffff;
  background: #d8137e;
  font-size: 16px;
  height: 40px;
}

.course-btn-retry {
  border-radius: 6px;
  color: #919191;
  font-size: 14px;
  border: 2px solid #919191;
  width: 113px;
  height: 36px;
  font-weight: bold;
}
.course-btn-retry:before {
  content: url(../img/icon-btn-retry.png);
  margin-right: 5px;
}

.course-btn-check {
  width: 200px;
  border-radius: 6px;
}

.course-btn-next {
  width: 200px;
  border-radius: 6px;
}
.course-btn-next:before {
  content: url(../img/icon-btn-next.png);
}

.course-btn-next-question {
  width: 200px;
  border-radius: 6px;
}
.course-btn-next-question:before {
  content: url(../img/icon-btn-next.png);
}

.course-btn-correct-result {
  width: 200px;
  border-radius: 6px;
}

.course-actions {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin: 10px auto 20px;
}

.common-head-item:first-child {
  border-bottom: 1px solid #cfcfcf;
}

.course-head {
  position: relative;
  height: 46px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.course-head__logo {
  margin-right: 10px;
}
.course-head__type {
  margin-right: 10px;
}
.course-head__lesson {
  margin-right: 10px;
}
.course-head__cando {
  margin-right: 10px;
}

.course-head {
  cursor: pointer;
}

.course-head-menu-button {
  box-sizing: border-box;
  display: block;
  width: 0px;
  height: 0px;
  border: 0px solid transparent;
  border-width: 10px 5px 0 5px;
  border-top-color: #474747;
  margin-right: 10px;
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
}
.js-open-course-head-menu .course-head-menu-button {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.course-head-menu {
  border-radius: 0 0 3px 3px;
  position: absolute;
  display: none;
  z-index: 100;
  left: 60px;
  top: 46px;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-top: 0;
}
.js-open-course-head-menu .course-head-menu {
  display: block;
}
.course-head-menu-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.course-head-menu__section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}
.course-head-menu__section:last-child {
  margin-bottom: 0;
}
.course-head-menu__section-head {
  margin-right: 1em;
}
.course-head-menu__section-body {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.course-head-menu__section-body a {
  display: block;
  margin-bottom: 0.5em;
  text-decoration: inherit;
  color: inherit;
}
.course-head-menu__section-body a._current {
  color: #d8137e;
  font-weight: bold;
}
.course-head-menu__step-num {
  width: 16px;
  height: 16px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background: #474747;
  margin: 0 2px;
}

.course-indicators {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.course-indicators__item {
  width: 16px;
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background: #474747;
  margin: 0 2px;
}

.course-sub-indicators {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 2px;
}
.course-sub-indicators__item {
  width: 4px;
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 3px;
  background: #e5e5e5;
}
.course-sub-indicators__item.js-current {
  background: #d8137e;
}

.course-sub-head {
  width: 920px;
  line-height: 1;
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.course-main {
  min-height: 620px;
  width: 920px;
  margin: auto;
  padding-bottom: 70px;
  position: relative;
  box-sizing: border-box;
}
.course-main:before, .course-main:after {
  content: " ";
  display: table;
}
.course-main:after {
  clear: both;
}

.course-pkey-navi {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.course-pkey-navi__next, .course-pkey-navi__prev {
  position: absolute;
  bottom: 20px;
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
}
.course-pkey-navi__next:hover, .course-pkey-navi__prev:hover {
  opacity: 0.8;
}
.course-pkey-navi__prev {
  left: 0;
}
.course-pkey-navi__prev:hover {
  padding-right: 20px;
  -webkit-transform: translate(-20px, 0);
      -ms-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
}
.course-pkey-navi__next {
  right: 0;
}
.course-pkey-navi__next:hover {
  padding-left: 20px;
  -webkit-transform: translate(20px, 0);
      -ms-transform: translate(20px, 0);
          transform: translate(20px, 0);
}

.course-sound-button {
  display: inline-block;
  width: 66px;
  height: 65px;
  cursor: pointer;
  background: url(../img/icon-sound.png) center center no-repeat;
  background-size: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.course-sound-button.js-audio-playing {
  background: url(../img/icon-sound-stop.png) center center no-repeat;
}

.question-wrapper {
  line-height: 1.2;
  color: #474747;
}
.question-wrapper:before, .question-wrapper:after {
  content: " ";
  display: table;
}
.question-wrapper:after {
  clear: both;
}
.question-wrapper .incorrect-bg {
  background: #f6cfcf;
}

.question-head {
  overflow: hidden;
  margin: 10px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.question-head-type {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  float: left;
  background: #fff;
  border: 2px solid #919191;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 26px;
  line-height: 1;
  padding: 0 10px;
}
.question-head-type-jpn {
  font-size: 16px;
  font-weight: bold;
  color: #474747;
}
.question-head-type-roman {
  font-size: 14px;
  color: #d8137e;
  font-style: italic;
  margin-left: 5px;
}
.question-head-progress {
  font-size: 16px;
  font-weight: bold;
  color: #d8137e;
  padding: 0 10px;
  float: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border: 2px solid #d8137e;
  height: 26px;
}

.course-main .correct-counter {
  color: #474747 !important;
}

.course-instruction .correct-counter .cc-head {
  border-color: #474747 !important;
}

.course-main .correct-result-head {
  color: #474747 !important;
}

.course-main .correct-result-head__title {
  border-color: #474747 !important;
  color: #474747 !important;
}

.course-main .question-header-right {
  border-color: #474747 !important;
}

.course-main .question-header-right .question-header-right-text {
  border-color: #474747 !important;
  color: #474747 !important;
}

.course-main .question-head-progress {
  border-color: #474747 !important;
  color: #474747 !important;
}

.answer-item, .answer-input-placeholder {
  box-sizing: border-box;
  width: 151px;
  height: 98px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
}

.answer-input, .answer-input-correct {
  position: relative;
  display: inline-block;
  padding: 4px;
  border: 2px solid #cfcfcf;
  cursor: pointer;
  vertical-align: bottom;
}
.answer-input:hover, .answer-input-correct:hover {
  opacity: 0.8;
  z-index: 10;
  padding: 0;
  border: 6px solid #d8137e;
}
.answer-input.js-selected, .js-selected.answer-input-correct {
  padding: 0;
  border: 6px solid #d8137e;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.answer-input:hover, .answer-input-correct:hover {
  opcaity: 0.8;
}

.answer-input-placeholder {
  background: #fff;
}

.answer-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.answer-select-container {
  box-sizing: border-box;
  overflow: hidden;
  background: #dddddd;
}
.answer-select-container__inner {
  padding: 15px 0;
}
.answer-select-container.js-hide {
  height: 0;
}

.answer-select-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.answer-select-item:hover {
  opacity: 0.8;
  padding: 0px;
  border: 6px solid #d8137e;
}
.answer-select-item.js-selected {
  padding: 0px;
  border: 6px solid #d8137e;
}

.course-reference {
  margin: 0 auto;
  width: 920px;
  position: relative;
  padding: 35px 0 30px 0;
  color: #474747;
}
.course-reference-wrapper {
  background-color: #e5e5e5;
}

.course-reference-title {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: #474747;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  padding: 0 10px;
}

.course-reference-navi {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  min-height: 62px;
}
.course-reference-navi__item-wrapper {
  overflow: hidden;
  padding: 10px 10px 0;
  margin: -10px 0 0 -10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.course-reference-navi__item {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 300px;
  height: 52px;
  border-radius: 6px;
  background: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #474747;
  font-size: 18px;
}
.course-reference-navi.js-open .course-reference-navi__item.js-current {
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding-bottom: 0;
}
.course-reference-navi.js-open .course-reference-navi__item {
  border-radius: 6px 6px 0 0;
  padding-bottom: 10px;
}

.course-reference-content {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  background: #ffffff;
  margin-top: -10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.course-reference-content-wrapper {
  display: none;
}
.course-reference-content-wrapper:nth-child(1) .course-reference-content {
  border-radius: 0 6px 6px 6px;
}
.course-reference-content-wrapper:nth-child(2) .course-reference-content {
  border-radius: 6px;
}
.course-reference-content-wrapper:nth-child(3) .course-reference-content {
  border-radius: 6px 0 6px 6px;
}
.course-reference-content-wrapper.js-show {
  display: block;
}

.reference-words {
  overflow: hidden;
  border-radius: 0 6px 6px 6px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  padding-top: 60px;
}
.reference-words__item {
  box-sizing: border-box;
  width: calc(100% / 4);
  margin-bottom: 10px;
  padding-right: 10px;
}
.reference-words__item ._jpn {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.reference-words__item ._jpn ._btn-sound {
  display: inline-block;
  vertical-align: bottom;
  cursor: pointer;
  margin-left: 10px;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.reference-words__item ._jpn ._btn-sound:hover {
  opacity: 0.8;
}
.reference-words__item ._jpn ._btn-sound > img {
  display: block;
}
.reference-words__item ._roman {
  font-size: 13px;
  margin-bottom: 8px;
  color: #d8137e;
  font-style: italic;
}
.reference-words__item ._translate {
  font-size: 13px;
  margin-bottom: 8px;
  color: #008098;
}
.reference-words__pdf-link {
  position: absolute;
  right: 20px;
  top: 20px;
}

.reference-basics__item {
  margin-bottom: 27px;
}
.reference-basics__item ._jpn {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  text-decoration: underline;
  color: #474747;
}
.reference-basics__item ._jpn em {
  color: #d11010;
  font-style: normal;
}
.reference-basics__item ._roman {
  font-size: 13px;
  margin-bottom: 8px;
  color: #d8137e;
  font-style: italic;
}
.reference-basics__item ._translate {
  font-size: 13px;
  margin-bottom: 8px;
  color: #008098;
}

.reference-kanji {
  overflow: hidden;
  padding: 15px;
  border-radius: 6px 0 6px 6px;
}
.reference-kanji__item {
  float: left;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  background: #fff;
  margin: 5px;
}
.reference-kanji__item > a {
  position: relative;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border: 4px solid #f2f2f2;
  z-index: 0;
  text-decoration: none;
  color: #474747;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.reference-kanji__item > a:hover {
  border-color: #d8137e;
  z-index: 1;
}
.reference-kanji__item > a.js-selected {
  border-color: #d8137e;
  z-index: 1;
}
.reference-kanji__item > a:nth-child(n+2) {
  margin-left: -4px;
}
.reference-kanji__item > a > span {
  pointer-events: none;
  font-family: "学参 常改教科書ICA R", "GJ Kyoukasho ICA Regular", serif;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  text-align: center;
  line-height: 1;
}
.js-os-win .reference-kanji__item > a > span {
  line-height: 0.8;
}

.js-webfont-line-height-fix .reference-kanji__item > a > span {
  line-height: 1.4;
}
.reference-kanji-detail {
  position: relative;
  background: #fff;
  overflow: hidden;
  border-radius: 6px;
  height: 100%;
}
.reference-kanji-detail__list {
  width: 210px;
  position: absolute;
  right: 20px;
  top: 25px;
}
.reference-kanji-detail__list-title {
  color: #fff;
  background: #3b83bb;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.reference-kanji-detail__main {
  height: 100%;
  width: calc(100% - 260px);
  margin-left: 20px;
  overflow-y: scroll;
  padding-right: 10px;
}
.reference-kanji-detail__main iframe {
  width: 100%;
  height: 100%;
}

.course-audio .l-audio {
  padding: 10px 0;
  margin: 40px 0 20px 0;
  background-color: #e2f3f2;
  text-align: center;
}
.course-audio .l-audio .btn-audio {
  cursor: pointer;
  min-height: 51px;
  min-width: 52px;
  display: inline-block;
  background: url(../img/icon-check.png) no-repeat;
}
.course-audio .l-audio .btn-audio img {
  display: none;
}
.course-audio .l-audio .js-audio-playing {
  background: url(../img/icon-check-stop.png) no-repeat;
}

.course-balloon .l-msg {
  font-size: 16px;
  font-weight: bold;
  padding: 20px 50px;
  margin: 20px 0 20px 12px;
  background-color: #fee8d2;
  border: 3px solid #ed9946;
  position: relative;
  box-sizing: border-box;
  color: #474747;
  line-height: 1.4;
}
.course-balloon .l-msg > p {
  margin: 0;
}
.course-balloon .l-msg:before {
  content: url(../img/course-balloon/icon_comment.png);
  text-align: center;
  position: absolute;
  width: 46px;
  height: 46px;
  top: -20px;
  left: -14px;
  display: block;
  line-height: 1;
}
.course-balloon .l-msg:after {
  content: url(../img/course-balloon/bg_comment.png);
  text-align: center;
  position: absolute;
  width: 21px;
  height: 21px;
  bottom: -20px;
  left: 18px;
  display: block;
  line-height: 1;
}

.contents-reference-kanji {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row-reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
}
.contents-reference-kanji__wrapper {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
.contents-reference-kanji__list {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 224px;
  float: right;
  padding: 25px 14px 0 0;
  box-sizing: border-box;
}
.contents-reference-kanji__list-title {
  color: #fff;
  background: #3b83bb;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.contents-reference-kanji__detail {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  height: 100%;
  width: 720px;
  float: left;
  overflow-y: scroll;
  margin-left: 14px;
}
.contents-reference-kanji__detail iframe {
  width: 100%;
  height: 200%;
}

.contents-reference-kanji-item {
  float: left;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  background: #fff;
  margin: 5px;
}
.contents-reference-kanji-item > a {
  position: relative;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border: 4px solid #f2f2f2;
  z-index: 0;
  text-decoration: none;
  color: #474747;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.contents-reference-kanji-item > a:hover {
  border-color: #d8137e;
  z-index: 1;
}
.contents-reference-kanji-item > a.js-selected {
  border-color: #d8137e;
  z-index: 1;
}
.contents-reference-kanji-item > a:nth-child(n+2) {
  margin-left: -4px;
}
.contents-reference-kanji-item > a > span {
  pointer-events: none;
  font-family: "学参 常改教科書ICA R", "GJ Kyoukasho ICA Regular", serif;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  line-height: 1;
}
.js-os-win .contents-reference-kanji-item > a > span {
  line-height: 0.8;
}

.js-webfont-line-height-fix .contents-reference-kanji-item > a > span {
  line-height: 1.4;
}



/*# sourceMappingURL=course-common.css.map */