/*  リセット
=============================*/
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body,
h1,
p,
img {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

img {
  max-width: 100%;
  max-height: 100%;
}


/*  高さ
=============================*/
.page-main   { z-index: 10; }
.page-answer { z-index: 20; }
.title       { z-index: 30; }
.modal       { z-index: 40; }
.btn-menu    { z-index: 50; }
.page-hint   { z-index: 60; }
.page-alert  { z-index: 100; }


/*  タイトル
=============================*/
.title {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.title img {
  width: 100%;
}


/*  下部メニューボタン
=============================*/
.btn-menu {
  position: fixed;
  bottom: 0;
  width: 16vw;
  height: 17.6vw;
  background-size: 16vw 17.6vw;
  background-repeat: no-repeat;
  font-size: 0;
  color: transparent;
}

.btn-menu-hint {
  left: 4.8vw;
  background-image: url(../img/common/icon_hint.png);
}

.btn-menu-hint.is-active {
  width: 30.4vw;
  padding-top: 4.8vw;
  text-align: right;
}

.btn-menu-hint.is-active::after {
  content: "";
  display: inline-block;
  width: 10.1vw;
  height: 8.3vw;
  background-image: url(../img/common/icon_hand.png);
  background-size: cover;
  -webkit-animation: bounce2 1s .8s infinite;
          animation: bounce2 1s .8s infinite;
}

.btn-menu-select {
  right: 4.8vw;
  background-image: url(../img/common/icon_select.png);
}


/*  ページ
=============================*/
.page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0;
}

/*  基本画面
------------------------------*/
.page-main {
  padding: 13% 0 0;
  justify-content: space-between;
  background-image: url(../img/common/bg.png);
  background-size: cover;
  text-align: center;
}


/*  ヒント画面
------------------------------*/
.page-hint {
  justify-content: flex-start;
  padding: 11% 40px 0;
  background-color: #fff;
  background-image: url(../img/common/frame_hint.png);
  background-size: 96% 94%;
  background-position: center center;
  background-repeat: no-repeat;
}

.page-hint::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 60px;
  height: 66px;
  background-image: url(../img/common/icon_hint.png);
  background-size: cover;
  box-shadow: 6px 6px rgba(166,160,156,.5);
}

.btn-back-to-quiz {
  position: absolute;
  bottom: 6%;
  right: 8%;
  display: inline-block;
  width: 161px;
  height: 31px;
  background-image: url(../img/common/btn_back_to_quiz.png);
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px;
}

.btn-arrow-right,
.btn-arrow-left {
  display: inline-block;
  height: 49px;
  background-size: cover;
}

.btn-arrow-right {
  width: 37px;
  background-image: url(../img/common/icon_arrow_right.png);
}

.btn-arrow-left {
  width: 38px;
  background-image: url(../img/common/icon_arrow_left.png);
}

.hint-header {
  text-align: center;
}

.hint-arrow {
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

/*  せいかい・はずれ画面
------------------------------*/
.page-answer {
  background-color: rgba(255,255,255,.8);
}

.icon-answer-right {
  display: inline-block;
  width: 94%;
  max-width: 330px;
  background-image: url(../img/common/icon_right.png);
  background-size: cover;
  text-indent: -9999px;
}

.icon-answer-right::after {
  content: "";
  display: block;
  padding-bottom: 109%;
}

.icon-answer-wrong {
  display: inline-block;
  width: 240px;
  height: 251px;
  background-image: url(../img/common/icon_wrong.png);
  background-size: cover;
  text-indent: -9999px;
}

.icon-answer-good {
  display: inline-block;
  width: 92%;
  max-width: 346px;
  background-image: url(../img/common/icon_good.png);
  background-size: cover;
  text-indent: -9999px;
}

.icon-answer-good::after {
  content: "";
  display: block;
  padding-bottom: 98.8%;
}

.btn-show-hint {
  display: inline-block;
  width: 221px;
  height: 33px;
  background-image: url(../img/common/btn_show_hint.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.btn-good-1 {
  display: inline-block;
  width: 195px;
  height: 35px;
  background-image: url(../img/common/btn_good_1.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.btn-good-2 {
  display: inline-block;
  width: 187px;
  height: 35px;
  background-image: url(../img/common/btn_good_2.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
}


/*  アラート画面
------------------------------*/
.page-alert {
  padding: 0 36px;
  background-image: url(../img/common/bg.png);
  background-size: cover;
  text-align: center;
  line-height: 2;
}

.btn-play {
  display: block;
  background-image: linear-gradient(to bottom, #44C767, #5BBF2C);
  border-radius: 28px;
  font-size: 28px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(0,0,0,.3);
  color: #fff;
}


/*  モーダル
=============================*/
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(0,0,0,.5);
}

.modal-inner {
  position: relative;
  padding: 18px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #666;
}

.modal-btn-close {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #1DADE5;
  border-radius: 15px;
  font-size: 24px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
}

.modal .btn-arrow-right {
  position: absolute;
  top: 50%;
  right: 4%;
}

.modal .btn-arrow-left {
  position: absolute;
  top: 50%;
  left: 4%;
}


/*  もんだいリスト
=============================*/
.quiz-list {
  margin: 0 auto;
  padding: 0;
  width: 240px;
  font-size: 0;
  text-align: center;
  list-style: none;
}

.quiz-list li {
  display: inline-block;
  margin: 6px;
}

.quiz-list a {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #1DADE5;
  border-radius: 12px;
}

.quiz-list img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 66px;
  max-height: 66px;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}


/*  ユーティリティ
=============================*/
.mt1 { margin-top: 6px !important; }
.mt2 { margin-top: 12px !important; }
.mt3 { margin-top: 18px !important; }
.mt4 { margin-top: 24px !important; }
.mt5 { margin-top: 30px !important; }

.ph1 {
  padding-right: 6px !important;
  padding-left:  6px !important;
}
.ph2 {
  padding-right: 12px !important;
  padding-left:  12px !important;
}
.ph3 {
  padding-right: 18px !important;
  padding-left:  18px !important;
}
.ph4 {
  padding-right: 24px !important;
  padding-left:  24px !important;
}
.ph5 {
  padding-right: 30px !important;
  padding-left:  30px !important;
}
.ph6 {
  padding-right: 36px !important;
  padding-left:  36px !important;
}
.ph7 {
  padding-right: 42px !important;
  padding-left:  42px !important;
}
.ph8 {
  padding-right: 48px !important;
  padding-left:  48px !important;
}
.ph9 {
  padding-right: 54px !important;
  padding-left:  54px !important;
}
.ph10 {
  padding-right: 60px !important;
  padding-left:  60px !important;
}
.ph11 {
  padding-right: 66px !important;
  padding-left:  66px !important;
}

.text-center { text-align: center !important; }
.text-bold   { font-weight: bold !important; }
.text-red    { color: red !important; }

.fs24 { font-size: 28px !important; }
.fs48 { font-size: 48px !important; }

.bounce { -webkit-animation: bounce 1s;  animation: bounce 1s; }
.popup  { -webkit-animation: popup .25s; animation: popup .25s; }

.show-in-portrait { display: none; }
.portrait .show-in-portrait { display: block; }


/*  Retina Display
=============================*/
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx) {

  .btn-menu-hint    { background-image: url(../img/common/icon_hint@2x.png); }
  .btn-menu-hint.is-active::after { background-image: url(../img/common/icon_hand@2x.png); }
  .btn-menu-select  { background-image: url(../img/common/icon_select@2x.png); }
  .btn-back-to-quiz { background-image: url(../img/common/btn_back_to_quiz@2x.png); }
  .btn-show-hint    { background-image: url(../img/common/btn_show_hint@2x.png); }
  .btn-good-1       { background-image: url(../img/common/btn_good_1@2x.png); }
  .btn-good-2       { background-image: url(../img/common/btn_good_2@2x.png); }
  .btn-arrow-right  { background-image: url(../img/common/icon_arrow_right@2x.png); }
  .btn-arrow-left   { background-image: url(../img/common/icon_arrow_left@2x.png); }

  .page-main         { background-image: url(../img/common/bg@2x.png); }
  .page-alert        { background-image: url(../img/common/bg@2x.png); }
  .page-hint         { background-image: url(../img/common/frame_hint@2x.png); }
  .page-hint::before { background-image: url(../img/common/icon_hint@2x.png); }

  .icon-answer-right { background-image: url(../img/common/icon_right@2x.png); }
  .icon-answer-wrong { background-image: url(../img/common/icon_wrong@2x.png); }
  .icon-answer-good { background-image: url(../img/common/icon_good@2x.png); }
}


/*  アニメーション
=============================*/
@-webkit-keyframes bounce {
  from,0% { -webkit-transform: scale(1);   transform: scale(1); }
  10%     { -webkit-transform: scale(1);   transform: scale(1); }
  20%     { -webkit-transform: scale(1.2); transform: scale(1.2); }
  30%     { -webkit-transform: scale(1);   transform: scale(1); }
  40%     { -webkit-transform: scale(1.1); transform: scale(1.1); }
  50%     { -webkit-transform: scale(1);   transform: scale(1); }
  to,100% { -webkit-transform: scale(1);   transform: scale(1); }
}
@keyframes bounce {
  0%   { -webkit-transform: scale(1);   transform: scale(1); }
  10%  { -webkit-transform: scale(1);   transform: scale(1); }
  20%  { -webkit-transform: scale(1.2); transform: scale(1.2); }
  30%  { -webkit-transform: scale(1);   transform: scale(1); }
  40%  { -webkit-transform: scale(1.1); transform: scale(1.1); }
  50%  { -webkit-transform: scale(1);   transform: scale(1); }
  100% { -webkit-transform: scale(1);   transform: scale(1); }
}
@-webkit-keyframes bounce2 {
  from,0% { -webkit-transform: translateY(0);    transform: translateY(0) }
  10%     { -webkit-transform: translateY(0);    transform: translateY(0); }
  20%     { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  30%     { -webkit-transform: translateY(0);    transform: translateY(0); }
  40%     { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  50%     { -webkit-transform: translateY(0);    transform: translateY(0); }
  to,100% { -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes bounce2 {
  0%   { -webkit-transform: translateY(0);    transform: translateY(0) }
  10%  { -webkit-transform: translateY(0);    transform: translateY(0); }
  20%  { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  30%  { -webkit-transform: translateY(0);    transform: translateY(0); }
  40%  { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  50%  { -webkit-transform: translateY(0);    transform: translateY(0); }
  100% { -webkit-transform: translateY(0);    transform: translateY(0); }
}

@-webkit-keyframes popup {
  from,0% { -webkit-transform: scale(.9); transform: scale(.9); }
  to,100% { -webkit-transform: scale(1);  transform: scale(1); }
}
@keyframes popup {
  0%   { -webkit-transform: scale(.9); transform: scale(.9); }
  100% { -webkit-transform: scale(1);  transform: scale(1); }
}