/*
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
*/
/* 親コンテナ */
.dialect_container {
  max-width: 800px!important;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0px;
}

/* 全問題数表示子アイテム*/
#total-questions {
  	border: 2px solid #333;
  	max-width: 180px;
  	margin:10px auto;
  	border: 2px solid #333;
  	border-radius: 5px;
  	background-color: dimgrey;
  	color: white;
 	font-size: 1.2rem;
	padding: 10px 0px 10px 0px;
}


.dialect_container h1{
  margin-bottom: 0px;
}

.dialect_container h2{
  margin-top: 10px;
  margin-bottom: 0px;
}

.quiz-container,
.result-section,
.final-section {
  display: none;
  margin: 0px auto;/*ブロックレベル要素を上下余白0で、左右中央揃えにする*/
  margin-bottom: 20px;
}

.question-number {
  font-weight: bold;
  margin-bottom: 10px;
}

.question {
  font-weight: bold;
  margin-bottom: 10px;
  padding: 15px;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  background-color: #f1f1f1;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.choice {
  padding: 15px;
  background-color: #ffffff;
  text-align: left;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
}

.choice:hover {
  background-color: #d0d0d0;
}

.result-section {
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  background-color: #f1f1f1;
}

#answer-result {
  font-size: 2rem;
  margin-bottom: 10px;
}

.correct {
  color: green;
}

.wrong {
  color: red;
}

#next-question {
  margin-top: 20px;
  padding: 10px;
  background-color: #e0e0e0;
  text-align: center;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#next-question:hover {
  background-color: #d0d0d0;
}

.final-section {
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  background-color: #f9f9f9;
  margin: 20px auto;
  max-width: 800px;
}

#restart-quiz {
  margin-top: 20px;
  padding: 10px;
  background-color: #e0e0e0;
  text-align: center;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#restart-quiz:hover {
  background-color: #d0d0d0;
}

.hidden_No {
	/*visibility:hiddenは名前の通り、要素はあるけど見えない状態。display:noneは、要素も取得されず、完全にその場にない扱い。*/
	/*visibility:hidden;*/
	display: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*前書き*/
#Introduction p{
  text-align: left;
}

/*キャッシュ削除*/
#del_cache{
	margin-top: 0px;
	margin-bottom: 0px;
 	font-size: 0.8rem;
  	color: #fd7e00;
	text-align: left;
}