@charset "UTF-8";

/* ----------- 都道府県暗記 ------------------------------------------------------------------------------------------------------ */

/* ----------------------- トップ ----------------------- */


/* フレーム白 */
div.Prefectures_frame_wrap {
  width: 100%;
  margin: 0 auto;
}

div.Prefectures_frame {
  margin: 0.5em auto 1em;
  background-color: #ffffff;
  border: solid 2px #888888;
  border-radius: 0.5em;
  padding: 1.2em;
  font-size: min(2.5vw,30px);
}


/* テストタイトル */
div.Prefectures_quiz_title {
  width: 100%;
  text-align: center;
  font-size: min(5vw,8vh,60px);/*(6vw,9.6vh,72px);*/
  font-weight: bold;
  line-height: 2.2;
  margin-top: 1em;
}

div.button_box_s {/*スタートボタン*/
  display: block;
  text-align: center;
  margin: 0em auto 2.5em;
  font-size: min(2.5vw,4vh,30px);
}

input.Prefectures_start_button {
  font-size: 2.2em;
  width: 6.25em;
  height: 2.5em;
  border-radius: 0.16em;
}


input.Prefectures_start_button {
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: #e5943c;
/*  background: linear-gradient(#f7dec6 0%, #e5943c 100%);*/
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}

input.Prefectures_start_button:hover {
  background: #f88509;
/*  background: linear-gradient(#f5ad69 0%, #f88509 100%);*/
}
input.Prefectures_start_button:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e5943c;
/*  background: linear-gradient(#f7dec6 0%, #e5943c 100%);*/
  border: none;
}



/* 利用方法 */
div.Prefectures_way {
  font-size: 1.2rem;
  color: #315b94;
  font-weight: bold;
  width: 100%;
  line-height: 1.3;
}

ol.Prefectures_howto {
  width: 100%;
  margin: 0.3em auto 2em;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  counter-reset: my-counter;
  list-style: none!important;  
}
 
ol.Prefectures_howto > li {
  counter-increment: my-counter;
  margin-bottom: 5px;
  padding-left: 1.5em;
  position: relative;
  text-indent: -0.5em;
}

ol.Prefectures_howto > li:before {
  content: counter(my-counter) ".";
  display: inline-block;
  width: 1em;
}

div.quiz_caution {
  color: red;
  font-size: 0.9rem;
  padding-left: 1em;
  text-indent: -0.5em;
  line-height: 1.6;
}

div.quiz_caution::before {
  content: "※";
  margin-left: 0em;
  padding-right: 0.5em;
}

div.quiz_caution > a {
  color: red;
}
















































/* ----------------------- 問題選択＆問題画面　共通 ----------------------- */

body.body_Prefectures_test {
  background-color: #e0f1f6;
}

div.middle_Prefectures_test {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ゲーム画面を１ページに収める */

div.content_pagefit_wrap {
  width: 100%;
  margin: 0 auto;
  height: calc(var(--vh, 1vh) * 100);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

div.content_pagefit {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/*
@media screen and (orientation: landscape) {/* 画面横向き */
/*div.content_pagefit {
/*  max-width: min(1200px,calc(var(--vh, 1vh) * 200));/*横に伸びすぎないようにする*/
/*}
/*}







/* ------- 問題選択画面 ------- */

/* フレーム白（出題形式選択ページ） */
div.Prefectures_style_frame_wrap {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.5vw;/*  font-size: min(2.5vw,calc(var(--vh, 1vh) * 3.5));*/
}

@media screen and (min-aspect-ratio: 3/4) {
div.Prefectures_style_frame_wrap {
  font-size: 3.375vh;
}
}

div.Prefectures_style_frame {
  width: 20em;
  margin: 0 auto;
  background-color: #ffffff;
  border: solid 2px #888888;
  border-radius: 0.5em;
  padding: 1.5em;
  overflow: hidden;
}


























div.Prefectures_quiz_title_S {
  font-size: 1.2em;
  font-weight: bold;
  color: #555555;
  text-align: center;
  line-height: 2em;
}

div.select_style {
/*  width: 100%;*/
  margin: 1em auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

input.Prefectures_style_button {
  font-size: 1.8em;
  width: 8.4em;
  height: 1.89em;
  border-radius: 0.21em;
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: #e5943c;
/*  background: linear-gradient(#f7dec6 0%, #e5943c 100%);*/
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}
input.Prefectures_style_button_center {
  font-size: 1.4em;
  width: 10.8em;
  height: 2.43em;
  border-radius: 0.21em;
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: #e5943c;
/*  background: linear-gradient(#f7dec6 0%, #e5943c 100%);*/
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}
input.Prefectures_style_button_quit {
  font-size: 1.4em;
  width: 10.8em;
  height: 2.43em;
  border-radius: 0.21em;
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: #e53c3c;
/*  background: linear-gradient(#f7dec6 0%, #e5943c 100%);*/
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}
input.Prefectures_style_button:hover,input.Prefectures_style_button_center:hover {
  background: #f88509;
}
input.Prefectures_style_button:active,input.Prefectures_style_button_center:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e5943c;
  border: none;
}
div.PSBone {
  margin: 0 auto;
}
div.PSBtwo,div.PSBthree,div.PSBfour {
  margin: 1em auto 0;
}

input.Prefectures_style_button_quit:hover {
  background: #f80909;
}
input.Prefectures_style_button_quit:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e53c3c;
  border: none;
}





















@media screen and (min-aspect-ratio: 1/1) {/* 画面横長だと選択肢横配置 */

div.Prefectures_style_frame_wrap {
  font-size: 2.533vw;/*  font-size: min(2.5vw,calc(var(--vh, 1vh) * 3.5));*/
}

div.Prefectures_style_frame {
  width: 35em;
}

div.select_style > div {
  width: 50%;
}
input.Prefectures_style_button {
  font-size: 1.8em;
  width: 7.56em;
  height: 1.89em;
}
input.Prefectures_style_button_center,input.Prefectures_style_button_quit {
  font-size: 1.4em;
  width: 9.72em;
  height: 2.43em;
}
div.PSBone {
  margin: 0 auto 1.8em;
}
div.PSBtwo {
  margin: 0 auto 1.8em;
}
div.PSBthree {
  margin: 0 auto 0.6em;
}
div.PSBfour {
  margin: 0 auto 0.6em;
}
}

@media screen and (min-aspect-ratio: 3/2) {/* 画面横長だと選択肢横配置 */
div.Prefectures_style_frame_wrap {
  font-size: 3.8vh;
}
}























/* ------- 問題画面 ------- */


div.content_pagefit_problempage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}




/* フレーム白（各問題ページ） */
div.Prefectures_quiz_frame_wrap {
  width: 19em;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
}

@media screen and (min-aspect-ratio: 7/10) {/* 画面横長だと選択肢横配置 */
div.Prefectures_quiz_frame_wrap {
  font-size: 3.5vh;
  font-size: 3.5svh;
}
}



div.Prefectures_quiz_frame {
  width: 100%;
  margin: auto;
  background-color: #ffffff;
  border: solid 2px #888888;
  border-radius: 0.5em;
  padding: 0.8em;
  overflow: hidden;
}


div.Problem_num_line {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4em;
}

div.Problem_num {
  width: 50%;
  font-size: 0.8em;
  font-weight: bold;
}

div.quit_button_space {

}




input.quit_Quiz_button_problempage {
  font-size: 0.6em;
  width: 9em;
  height: 1.62em;
  border-radius: 0.18em;
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: #e53c3c;
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}
input.quit_Quiz_button_problempage:hover {
  background: #f80909;
}
input.quit_Quiz_button_problempage:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e53c3c;
  border: none;
}



div.Problem_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1em;
}

div.Problem_map_wrap {

}

div.Problem_map {
}

div.Problem_map > img {
  width: 16em;
}

div.Choice_Field {
  width: 100%;
  margin: 0.8em auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.Choice_Field_item {
  width: 50%;
  text-align: center;
}
div.Choice_Field_item:nth-child(-n+2) {
  margin-bottom: 0.8em;
}

button.Choice_item_box {
  width: 7.5em;
  border: solid 2px #888888;
  border-radius: 0.3em;
  color: #ffffff;
  background-color: #7bc6ef;
  height: 1.8em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.66);
}

button.Choice_item_box:hover {
  background-color: #ff9872;
}

button.Choice_item_box:active {
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0);
}



@media screen and (min-aspect-ratio: 6/5) {/* 画面横置きだと選択肢右置き */
div.Prefectures_quiz_frame_wrap {
  width: 19em;
  font-size: 5vw;
}

div.Problem_num_line {
  margin-bottom: 0.2em;
}

div.Problem_num {
  font-size: 0.5em;
}

input.quit_Quiz_button_problempage {
  font-size: 0.3em;
}

div.Problem_wrap {
  justify-content: space-between;
}

div.Problem_map_wrap {
  width: 9.4em;
  height: 9.4em;
}

div.Problem_map > img {
  width: 100%;
}

div.Choice_Field {
  margin: 0;
  width: 9em;
  height: 10.3em;
  font-size: 0.8em;
}
div.Choice_Field_item:nth-child(-n+2) {
  margin-bottom: 1em;
}
div.Choice_Field_item {
  width: 100%;
  margin-bottom: 1em;
}
div.Choice_Field_item:last-child {
  margin-bottom: 0em;
}
button.Choice_item_box {
  
}
}

@media screen and (min-aspect-ratio: 3/2) {/* 画面横置きだと選択肢右置き */
div.Prefectures_quiz_frame_wrap {
  font-size: 7.5vh;
  font-size: 7.5svh;
}
}



























/* ----------------------- 結果画面 ----------------------- */

div.middle_Prefectures_result {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

div.title_result {
  line-height: 2.5;
  font-size: 2.5em;
  text-align: center;
  font-weight: bold;
  background-color:  #4a7fb2;
  color: #ffffff;
  margin-bottom: 2.5rem;
}

div.display_result {
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
}

span.display_percent {
  margin-left: 0.3em;
  font-size: 1.8em;
  color: red;
}

span.mark_percent {
  font-size: 1.2em;
  color: red;
}

div.display_evaluation{
  margin: 0 auto;
  position: relative;
  font-size: calc(0.04 * (100vw - constant(safe-area-inset-right) - constant(safe-area-inset-left)));
  font-size: calc(0.04 * (100vw - env(safe-area-inset-right) - env(safe-area-inset-left)));
  font-weight: bold;
}

@media screen and (min-width: 1000px) {
div.display_evaluation {font-size: 40px;}
}

div.result_verygood, div.result_good, div.result_notbad {
  color: red;
  line-height: 6;
  text-align: right;
  padding-right: 1em;
}

div.result_bad {
  color: blue;
  line-height: 4;
  text-align: center;
}

div.result_verygood {
  width: 85%;
  max-width: 800px;
}

div.result_good {
  width: 63%;
  max-width: 580px;
}

div.result_notbad {
  width: 58%;
  max-width: 550px;
}


div.result_verygood > span {
  display: block;
  position: absolute;
  background: url(../images/mark/stamp_verygood.svg) no-repeat center center/contain;
  background-size: 4em 4em;
  width: 6em;
  height: 6em;
  animation: stamp_anime 1s;
}

div.result_good > span {
  display: block;
  position: absolute;
  background: url(../images/mark/stamp_good.svg) no-repeat center center/contain;
  background-size: 4em 4em;
  width: 6em;
  height: 6em;
  animation: stamp_anime 1s;
}

div.result_notbad > span {
  display: block;
  position: absolute;
  background: url(../images/mark/stamp_notbad.svg) no-repeat center center/contain;
  background-size: 4em 4em;
  width: 6em;
  height: 6em;
  animation: stamp_anime 1s;
}

div.result_bad > span {
  position: absolute;
  display: none;
}

div.title_result_table {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

/* スタンプが押されるアニメーション */
@keyframes stamp_anime {
  0% {
	background-size: 6em 6em;
  }
  30% {
	background-size: 6em 6em;
  }
  100% {
	background-size: 4em 4em;
  }
}


table.result_table {
  width: 100%;
  border: solid 2px #888888;
  background-color: #ffffff;
  margin-bottom: 18vh;
}

table.result_table th {
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  border: solid 1px #888888;
  background-color: #dddddd;
}

table.result_table th.result_A {
  width: 5%;
}

table.result_table th.result_B {
  width: 30%;
}

table.result_table td {
  border: solid 1px #888888;
  text-align: center;
  line-height: 1.2;
  padding: 0.5em 0em;
  vertical-align: middle;
}

span.akamaru {
  color: red;
  font-weight: bold;
}

span.aobatu {
  color: blue;
  font-weight: bold;
}

.result_num {
  font-size: 0.8em;
}



/* ----------------------- 共通の終了ボタン関係 ----------------------- */

/* 画面下部に固定するバー（やめるボタン） */
div.Prefectures_select_bar_wrap {
  z-index: 150;
  background-color: rgba( 216, 229, 248, 0.8 );/*#d8e5f8;*/
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div.Prefectures_select_bar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* 下部ボタンボックス内のフォントサイズをスムーズに変える */
@media screen and (max-width: 600px) {div.button_box_f,div.button_box_w {font-size: min(24px,5vh);}}
@media screen and (min-width: 601px) and (max-width: 1199px) {div.button_box_f,div.button_box_w {font-size: min(calc( 1vw + 18px ),5vh);}}
@media screen and (min-width: 1200px) {div.button_box_f,div.button_box_w {font-size: min(30px,5vh);}}


div.button_box_f,div.button_box_w {/*問題選択、テスト終了ボタン*/
  width: 100%;
  height: 16vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

div.button_box_f > div {
  display: inline-block;
  width: 100%;
}

div.button_box_w > div {
  display: inline-block;
  width: 50%;
}




input.quit_Quiz_button,input.retry_Quiz_button {
  margin: 0 auto;
  display: block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(51, 51, 51, 0.33);
  font-size: 1em;
  width: 7.5em;
  height: 2.7em;
  max-height: 18vh;
  border-radius: 0.25em;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.44);
  outline: none;
}

/* 中ボタン～色指定 */
input.quit_Quiz_button {
  background: #e53c3c;
}
input.quit_Quiz_button:hover {
  background: #f80909;
}
input.quit_Quiz_button:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e53c3c;
  border: none;
}

input.retry_Quiz_button {
  background: #e5943c;
}
input.retry_Quiz_button:hover {
  background: #f88509;
}
input.retry_Quiz_button:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: #e5943c;
  border: none;
}