/* ここには全デザインで共通となるとなるCSSを記述して下さい */

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: flex;
  flex-direction: column;
}
/* IEで択一、複数問題で選択肢の画像サイズが大きいときに画像がはみ出る対策 */
.choice input + label {
  max-width: 100%;
}
/*概要のマージン除去*/
#intro p {
  margin: 0;
}

/* 表がスクロールできるように */
#question_statement,
#before_question,
#instant_feedback_wrapper {
  overflow-x: auto;
}

/*問題文・選択肢のマージン除去*/
div#choices p,
div#question_statement p {
  margin: 0;
}
/*答え・解説のマージン除去*/
#instant_answer_msg p,
#instant_feedback_msg p {
  margin: 0;
}

/*wordbank対策*/
.drop-choice-wordbank p,
.drag-choice-wordbank p {
  display: inline-block;
}
/*並び替え/アイコンを右側中央に*/
.drop-choice li.sort-li-width {
  position: relative;
}
li.sort-li-width i.fa-align-justify {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  margin-top: 0;
}
/*結果画面のテーブルレイアウト調整*/
.result_table2_box .table-responsive {
  /*iOS iframe Bugfix*/
  width: 1px;
  min-width: 100%;
}
table#result_table2 {
  min-width: 450px;
}
table#result_table2 .no {
  width: 60px; /* IE */
  min-width: 60px;
}
/* student_responseが複数行になるように折返し */
.scoreStr,
.result,
.backToQuestion,
.backToQuestionHead,
.pageListButton {
  width: 90px; /* IE */
  width: 10%;
  min-width: 90px;
  text-align: center;
}

.student_response p {
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  margin-bottom: 0;
}

.student_response div {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 表示btnが縦になるのを修正 */
input.btn.btn-primary.btn-sm,
.pageListButton .list_to_quiz {
  padding: 0.5rem 1.1rem;
}
/*テキストデコレーション：アンダーライン修正*/
* {
  text-decoration-skip-ink: none;
}
/*数字入力のスピンボタン非表示*/
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
div#intro img {
  max-width: 100%;
  height: auto;
}

.drag-choice-wordbank img {
  max-width: 160px !important;
  height: auto !important;
}
.drag-choice-wordbank figure {
  margin-bottom: 0 !important;
}
/* 正答の数 */
#correct-count {
  font-size: 26px;
  margin-right: 10px;
}
#correct-count > i {
  margin-right: 4px;
}
/* 誤答の数 */
#incorrect-count {
  font-size: 26px;
}
#incorrect-count > i {
  margin-right: 4px;
}
/* 攻略モード100%到達後のバッジ表示 */
#stamp {
  display: none;
  margin-bottom: 10px;
}
#stamp > i {
  color: #ffb813;
  background: -webkit-linear-gradient(top, #ffe845, #ff9900, #ffcf20);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px #ccc);
}

/* 択一・複数選択の選択肢本文 */
.choice_body {
  display: block;
  padding: 4px 8px;
}

/* 択一・複数選択正答選択肢カラー設定 */
.correct-answer-choice {
  font-weight: bold;
  background-color: #B6D7A8;
  color: #38761D;
  border-radius: 1px;
  transition: background-color 1s;
}

#question_header .navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.interrupted-text {
  font-size: 2rem;
  margin-top: 20%;
}
#page_suspended {
  text-align: center;
}
#page_suspended button {
  width: 180px;
  margin: auto;
  padding: 12px;
}

/* ヘルプ機能のアイコン */
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.help-btn {
  margin: 0 6px;
}
.fa-help-wrap-show {
  font-size: 2rem;
  color: #ddd;
}
.fa-help-ch-show {
  font-size: 1.2rem;
  color: #616161;
}
.fa-help-wrap-hide {
  font-size: 2rem;
  color: #616161;
}
.fa-help-ch-hide {
  font-size: 1.2rem;
  color: #ddd;
}

/* tooltip */
/* waves-effectにoverflow:hiddenがかかっていてtooltipが表示されないので変更する */
.tooltip-wrapper{
  display: inline-block;
  overflow: visible;
  position: relative;
}
.tooltip-visible {
  display: block!important;
}

/* ツールチップ共通 */
.tooltip-wrapper .tooltip-common {
  display: none;
  position: absolute;
  font-size: 14px;
  color: #fff;
  background-color: #000;
  width: 130px;
  padding: 5px 8px;
  border-radius: 8px;
  z-index: 100;
}

/* フキダシ共通部分 */
.tooltip-wrapper .tooltip-common:before{
  content:'';
  position:absolute;
  height:0;
  width:0;
  border:13px transparent solid;
  border-right-width:0;
  border-left-color:#000;
  z-index:100;
}
/* フキダシの向き */
.tooltip-wrapper .tooltip-bottom:before {
  transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -o-transform:rotate(270deg);
}
.tooltip-wrapper .tooltip-top:before {
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
}
.tooltip-wrapper .tooltip-left:before {
  transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -o-transform:rotate(0deg);
}

/* 中断ボタン */
#suspend_button_wrapper {
  margin: 6px;
}
#suspend_button {
  margin: 0px;
}
#suspend_button_wrapper + .tooltip-bottom {
  top: 52px;
  left: -82px;
}
#suspend_button_wrapper + .tooltip-bottom:before{
  top: -13px;
  left: 100px;
}
#suspend_button_wrapper span:first-child {
  white-space: nowrap;
}
/* 設問リストボタン */
#hide_list_button + .tooltip-bottom {
  top: 48px;
  right: -10px;
}
#hide_list_button + .tooltip-bottom:before {
  top: -13px;
  left: 75px;
}
/* 回答の正誤履歴 */
#seigo_count + .tooltip-bottom {
  top: 48px;
  right: -10px;
}
#seigo_count + .tooltip-bottom:before {
  top: -13px;
  left: 75px;
}
/* 制限時間バー */
#timer_wrap_quiz .tooltip-bottom {
  top: 40px;
  left: 0px;
}
#timer_wrap_quiz .tooltip-bottom:before {
  top:-13px;
  left: 45%;
}
/* 次の設問へボタン */
#display_next_quiz + .tooltip-top,
#display_next_explanation_page + .tooltip-top {
  bottom: 40px;
  left: -47px;
}
#display_next_quiz + .tooltip-top:before,
#display_next_explanation_page + .tooltip-top:before {
  bottom: -13px;
  left: 72px;
}
/* 前の設問へボタン */
#display_prev_quiz + .tooltip-top,
#display_prev_explanation_page + .tooltip-top {
  bottom: 40px;
  left: -15px;
}
#display_prev_quiz + .tooltip-top:before,
#display_prev_explanation_page + .tooltip-top:before {
  bottom: -13px;
  left: 42px;
}
/* 採点ボタン */
#not_disp_answer_mark_button + .tooltip-left {
  bottom: 14px;
  right: 100%;
  margin-right: 5px;
}
#not_disp_answer_mark_button + .tooltip-left:before {
  right: -7px;
  bottom: 15px;
  transform: translateY(50%);
}
/* ページネーション */
#question_count_wrapper + .tooltip-bottom {
  top: 130%;
  left: 160px;
}
#question_count_wrapper + .tooltip-bottom:before {
  top: -13px;
  left: 46%;
}

@media screen and (min-width: 768px) {
  [data-lang='en'] #answer_mark_correct,
  [data-lang='en'] #answer_mark_incorrect {
    font-size: 150px;
  }
}

@media screen and (min-width: 500px) and (max-width: 767px) {
  #hide_list_button + .tooltip-bottom {
    width: 100px;
  }
  #hide_list_button + .tooltip-bottom:before {
    left: 45px;
  }
  #suspend_button_wrapper + .tooltip-bottom {
    width: 100px;
    left: -30px;
  }
  #suspend_button_wrapper + .tooltip-bottom:before{
    left: 70px;
  }
  #question_count_wrapper + .tooltip-bottom {
    width: 100px;
    left: 180px;
  }
  #timer_wrap_quiz .tooltip-bottom {
    width: 100px;
  }
  [data-lang='en'] #answer_mark_correct,
  [data-lang='en'] #answer_mark_incorrect {
    font-size: 100px;
  }
}

@media screen and (max-width: 499px) {
  .tooltip-wrapper .tooltip-common {
    font-size: 12px;
  }
  #hide_list_button + .tooltip-bottom {
    width: 80px;
    right: -5px;
  }
  #hide_list_button + .tooltip-bottom:before {
    left: 40%;
  }
  #suspend_button_wrapper + .tooltip-bottom {
    left: -10px;
    width: 100px;
  }
  #suspend_button_wrapper + .tooltip-bottom:before {
    left: 45%;
  }
  #question_count_wrapper + .tooltip-bottom {
    left: 105px;
    width: 100px;
  }
  #timer_wrap_quiz .tooltip-bottom {
    top: 40px;
    left: -20px;
    width: 90px;
  }
  #display_next_quiz + .tooltip-top {
    left: -55px;
  }
  #display_next_quiz + .tooltip-top:before {
    left: 80px;
  }
  #display_prev_quiz + .tooltip-top {
    left: -7px;
  }
  #display_prev_quiz + .tooltip-top:before {
    left: 35px;
  }
  [data-lang='en'] #answer_mark_correct,
  [data-lang='en'] #answer_mark_incorrect {
    font-size: 60px;
  }
}


/* sa-boxの選択肢の画像サイズ */
.sa-box-img img {
  max-width: 100%;
}
/* sa-box選択肢選択時のエフェクト */
.sa-box-img.waves-effect.waves-light .waves-ripple {
  background-color: rgba(0, 0, 0, 0.11);
}
/* 択一問題クイックの選択肢 */
.choice {
  position: relative;
}
/* 正誤・択一問題クイックの選択表示 */
.select-mark {
  display: none;
  background-color: #333333;
  color: #FFFFFF;
  font-size: 10px;
  position: absolute;
  top: 3px;
  right: 44px;
  padding-right: 4px;
  padding-left: 4px;
  border-radius: 2px;
  z-index: 1;
}
.select-mark.button {
  top: -2px;
  right: 70px;
}
#choice_false .select-mark {
  right: 70px;
}
.selected .select-mark {
  display: block;
}

.audio {
  vertical-align: middle;
  max-width: 100%;
}

.drag-choice-wordbank .my-gallery,
.disp_correct .my-gallery {
  display: inline-block;
}

@media screen and (orientation: portrait) {
  #alert-portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding-right: 0;
    margin-bottom: 0;
    z-index: 100;
  }

  #alert-portrait .close {
    top: auto;
    right: 0;
  }
}

@media screen and (orientation: landscape) {
  #alert-portrait {
    display: none;
  }
}

.layout-exam #before_question {
  background-color: #fff;
  border-color: #fff;
}

/* tinymce フォントサイズを変更しない場合に文字列と揃うように調整 */
body:not(.exam-vertical) [type="radio"] + label:before,
body:not(.exam-vertical) [type="radio"] + label:after {
  top: 3px;
}

/* 文字列が1行で収まる場合のみ揃う */
body:not(.exam-vertical) [type="checkbox"] + label:before {
  top: 4px
}

body:not(.exam-vertical) [type="checkbox"]:checked + label:before {
  top: 0;
}

/* 関連コンテンツ */
.related-contents-btn {
  word-break: break-word;
  overflow-wrap: break-word;
}

.related-contents-icon:before {
  margin-right: 4px;
}

.break-word {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 結果画面や一覧画面の手書き画像 */
.drawingboard-image {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 結果画面に表示する回答済の設問の解答と正誤（#show_answers_so_far:true の時） */
.student_response .has-mastered,
.result .has-mastered {
  display: inline-block;
  background-color: #fee440;
}

/* Photoswipeのリンク要素にtext-alignが効くようにする */
.my-gallery,
.my-gallery figure {
  display: inline-block;
}

/* 弱点克服ボタン */
#start_quiz_button_weak {
  background-color: #333333;
  border-color: #333333;
}
#start_quiz_button_weak:disabled {
  background-color: #D6D6D6;
  border-color: #D6D6D6;
}

/* 記述問題、複数記述問題の記述欄を文字サイズに合わせる　*/
.input-field #input_line.input,
input.fill_in_multi {
  min-height: 2.1rem;
  height: auto;
}