@charset "UTF-8";

/* quiz */

/* ********** 全体共通 (smartphone専用) ************ */
#header.close,
#navi.close {
  display:none;
}
#s-container #navi ul.navi-menu-main li span.smallsize1 {
  font-size:90%;
}
#s-container #navi ul.navi-menu-main li span.smallsize2 {
  font-size:80%;
}
/* ********** クイズ ヘッダー  ************** */
/* クイズのヘッダー */
#quizhead {
  margin-top:20px;
  display:-webkit-flex;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap : 5px 0;
  align-items:center;
}

#s-container #quizhead input.right {
  margin-left:auto;	
}
#s-container #quizhead {
  margin-top:0;
  padding-top:10px;
}


/* ********** クイズ 残り時間 得点  *********** */
/* クイズ残り秒数、得点 */
#quiz-time,
#quiz-point,
#quiz-door,
#quiz-unlock,
#quiz-ball,
#quiz-atari {
  text-align:center;
  width:130px;
}
#quiz-ball,
#quiz-atari {
  width:150px;
}
#s-container #quiz-time,
#s-container #quiz-point,
#s-container #quiz-door,
#s-container #quiz-unlock,
#s-container #quiz-ball,
#s-container #quiz-atari {
  width:110px;
}

#quiz-time span,
#quiz-point span,
#quiz-door span,
#quiz-unlock span,
#quiz-ball span,
#quiz-atari span {
  vertical-align:middle;
}
#quiz-door.close,
#quiz-unlock.close {
  display:none;
}
#s-container #quiz-time,
#s-container #quiz-point,
#s-container #quiz-door,
#s-container #quiz-unlock,
#s-container #quiz-ball,
#s-container #quiz-atari {
  font-size:90%;
}
#s-container #quiz-time    span.smallsize,
#s-container #quiz-point   span.smallsize,
#s-container #quiz-door    span.smallsize,
#s-container #quiz-unlock  span.smallsize,
#s-container #quiz-ball    span.smallsize,
#s-container #quiz-atari   span.smallsize {
  font-size:80%;
}
#quiz-time-counter-data,
#quiz-point-counter-data,
#quiz-door-counter-data,
#quiz-unlock-counter-data,
#quiz-ball-counter-data,
#quiz-atari-counter-data {
  -moz-border-radius: 5px;    	/* Firefox */
  -webkit-border-radius: 5px;	/* Safari,Chrome */
  border-radius: 5px;         	/* CSS3 */
  border: 1px green solid;     	/* 枠線の装飾 */
  background-color: #ccffcc;   	/* 背景色 */
  font-weight:bold;
  font-size:x-large;
  color: black;
  padding-right:10px;
  margin:0 3px;
  text-align:right;
  min-width:50px;
  display:inline-block;
}
#s-container #quiz-time-counter-data,
#s-container #quiz-point-counter-data,
#s-container #quiz-door-counter-data,
#s-container #quiz-unlock-counter-data,
#s-container #quiz-ball-counter-data,
#s-container #quiz-atari-counter-data {
  font-size:large;
  padding-right:5px;
  min-width:35px;
}

/* ****** クイズ テーブル枠組 ****** */
div#quizmain {
  margin-top:10px;
}
div#quizpanel {
  border : 3px solid #cccccc;
  background-color : #000000;
  margin :0;
}
#s-container div#quizpanel {
  border : 2px solid #cccccc;
}

/* ********** クイズ footer  ************ */
/* クイズのフッター */
div#quizfooter {
  margin-top:10px;
  display:-webkit-flex;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
div#quizfooter input.right {
  margin-left:auto;
}
div#yahoo-api {
  text-align:right;
  width:150px;
  margin:5px 0 5px auto;
}

/* ********** クイズ ガイダンス ********** */
div#init {
  color : #ffffff;
  text-align : left;
  vertical-align : top;
  padding:1em;
  line-height:1.5em;
}
div#init-header {
  text-align : center;
  font-size : large;
  text-decoration: underline;
  padding :1rem 0.5rem;
}
div#init   img {
  height:15px;
  width :15px;
  margin:0 3px;
  vertical-align : -3px;
}
div#init input.quiz-start-button {
  margin-left:10px;
}

/* ***************** クイズ end画面  **************** */
/* quizend画面  カルーセル */
div#quizend {
  height: 520px;
  padding:10px;
  color : #ffffff;
  text-align  : center;
}
#s-container div#quizend {
  height: 450px;
  padding:5px;
}
/* 画像カルーセル枠組み */
#quizend-img {
  margin:40px auto 10px;
  width :200px;
  height:200px;
  position:relative;
  background:black;
}
/* 画像枠組み (smartphone専用) */
#s-container #quizend-img {
  margin:30px auto 10px;
  width :140px;
  height:140px;
}
/* quiz comment input枠 */
div#quizend-input {
  margin:0 auto;
}
/* 戻すボタン */
#quizend-img-prev {
  position:absolute;
  top     :95px;
  left    :-10px;
  cursor  :pointer;
  z-index :99;
}
/* 戻すボタン(smartphone専用) */
#s-container #quizend-img-prev {
  top     :65px;
  left    :-10px;
}
/* 次へボタン */
#quizend-img-next {
  position:absolute;
  top     :95px;
  right   :-10px;
  cursor  :pointer;
  z-index :99;
}
/* 次へボタン(smartphone専用) */
#s-container #quizend-img-next {
  top     :65px;
  right   :-10px;
}
/* 戻す・次へボタンの画像 */
#quizend-img-prev img,
#quizend-img-next img {
  width   :20px;
  height  :20px;
}
/* 画像枠 */
#quizend-img-dsp {
  margin:0 auto;
  width:200px;
  height:100%;
  overflow:hidden;
}
/* 画像枠 (smartphone専用) */
#s-container #quizend-img-dsp {
  width:140px;
}
/* 画像枠組み */
#quizend-img-dsp-frame ul {
  list-style-type:none;
}
#quizend-img-dsp-frame ul li {
  position:relative;
  float:left;
}
#quizend-img-dsp-frame ul li img {
  height:200px;
  width :200px;
  border:none;
}
/* 画像 (smartphone) */
#s-container #quizend-img-dsp-frame ul li img {
  height: 140px;
  width : 140px;
}

/* ******** クイズ終了時の得点とコメント入力 ********* */
#quizend-playgame {
  font-size:large;
}
#quizend-sum {
  height:3rem;
  line-height:3rem;
  vertical-align:middle;
}
#s-container quizend-sum {
  height:2rem;
  line-height:2rem;
}
#quizend-sum-point {
  font-weight:bold;
  font-size:xx-large;
  color:red;
}
#s-container #quizend-sum-point {
  font-size:x-large;
}
#quizend-sum img {
  height:32px;
  width :32px;
  vertical-align:text-bottom;
}
#s-container #quizend-sum img {
  height:24px;
  width :24px;
  vertical-align:text-top;
}
div#quizcomment-div {
  margin-bottom:20px;
}

div#quizcomment-div textarea,
div#quizcomment-div input {
  vertical-align:middle;
}

/* ********** 成績 *********  */
/* タブ */
#quizresult-tab {
  margin-top:10px;
}
#quizresult-tab ul {
  padding:0;
  list-style-type: none;
}
#quizresult-tab ul li {
  border-radius:5px 5px 1px 0;
  padding-top:5px;
  width:130px;
  height:30px;
  margin:0 0 -1px 10px;
  border:1px solid #9FB7D4;
  border-bottom:none;
  float:left;
  z-index:999;
  background-color:lightgrey;
  text-align:center;
  cursor:pointer;
  position:relative;
}
#s-container #quizresult-tab ul li:first-of-type {
  margin-left:0;
}
#quizresult-tab ul li.selected {
  background-color:white;
  text-decoration:none;
  cursor:default;
}
#s-container #quizresult-tab ul li.selected {
  height:31px;
  margin-bottom:-2px;
}

/* 成績 パネル */
div.quizresult-panel {
  position:relative;
  border:1px solid #9FB7D4;
  background-color:white;
}
div.quizresult-panel div.quizresult-table-wrap {
  margin:10px;
}
#s-container div.quizresult-panel div.quizresult-table-wrap {
  overflow:auto;
}
div.quizresult-panel table {
  margin-top:10px;
  border-collapse : collapse;
  width:100%;
  box-sizing:border-box;
}
#s-container div.quizresult-panel table {
  width:600px;
  margin:0 auto;
}
div.quizresult-panel table.close {
  display : none;
}

div.quizresult-panel table:first-of-type {
  margin-bottom:20px;
}
div.quizresult-panel table tr td {
  border-top  : 1px solid #9FB7D4;
  border-left : 1px solid #9FB7D4;
  text-align  : center;
  padding     : 5px;
}
div.quizresult-panel table tr.close {
  display : none;
}

div.quizresult-panel table tr th {
  font-size:large;
  font-weight : bold;
}
#s-container div.quizresult-panel table tr th {
  padding-left:10px;
  text-align:left;
}
div.quizresult-panel table tr.header {
  background-color : #f7e1e5;
  color       : #80555c;
  text-shadow : 0 1px 1px #ffffff;
  font-weight : bold;
}
div.quizresult-panel table tr.header td {
  font-weight : bold;
}
div.quizresult-panel table tr td:last-of-type {
  border-right : 1px solid #9FB7D4;
}
div.quizresult-panel table tr:last-of-type td,
div.quizresult-panel table tr td.bottom {
  border-bottom : 1px solid #9FB7D4;
}
div.quizresult-panel table tr td.pointsum {
  font-size:large;
  font-weight : bold;
}
div.quizresult-panel table tr td.quizcomment {
  text-align:left;
  width:10rem;
  word-break:break-all;
}
div.quizresult-panel table tr.honnin {
  color: white;
  background-color: navy;
}

div.quizresult-panel table td.notfound {
  font-size:xx-large;
  vertical-align : middle;
  height:5em;
  line-height:5em;
}

/* 成績 パネル img */
span.quizresult-sum-img {
  display:inline-block;
  margin :0;
  padding:5px;
  background-color:#f7e1e5;
  -moz-border-radius: 5px;    	/* Firefox */
  -webkit-border-radius: 5px;	/* Safari,Chrome */
  border-radius: 5px;         	/* CSS3 */
  border: 1px silver groove;     	/* 枠線の装飾 */
}
span.quizresult-sum-img img {
  height:25px;
  width :25px;
}

/* 人気トレンドクイズ */
div.quizresult-panel table#quizresult-trend-hint tr td:first-of-type {
  width:150px;
}
#s-container div.quizresult-panel table#quizresult-trend-hint tr td:first-of-type {
  width:100px;
}