body {font-family: sans-serif;line-height: 1.6;background: #fff9da;margin: 0;padding: 0;}

a {color: #bc6b29;}

.question {padding: 0.5em 0.75em;border-bottom: 1px solid #ddd;}
.main-kanji {font-size: 1.6em;font-weight: bold;}

.after, .before {font-size: 0.9em;opacity: 0.7;}

.answer {width: 5em;font-size: 1em;margin: 0 0 0 10px;}
input.answer {padding: 5px 5px;}

.level {margin-left: auto;font-size: 0.9em;}
.note {display: block;margin-top: 0.25em;font-size: 0.85em;color: #666;line-height: 1.4;}

.question.correct {border-color: #4caf50;background: #e8f5e9;}
.question.wrong {border-color: #f44336;background: #fdecea;}
.correct-reading {margin-left: 4px;color: #f44336;font-size: 0.9em;}

.question.correct {border: 1px solid #6fbf73;background: #eef8f0;}
.question.wrong {border: 1px solid #e57373;background: #fdeeee;}
.correct-reading {margin-left: 0.3em;color: #555;font-size: 1em;}
.question-count {margin-bottom: 1em;color: #666;font-size: 1em;}

.wrapper {width: 320px;margin: 0 auto;background: #FFF;}
#questionArea {
margin: 0 auto;padding: 0 10px;
display: grid;grid-template-columns: 1fr;gap: 0.5em;
}
.col2 {display: grid;grid-template-columns: 1fr;gap: 0.5em;}

#headArea h1,
#headArea p {text-align: center;}
#headArea h1{margin-bottom: 0;}
#headArea h1 {font-size: 1.2em;}
.spbr {display: block;}
@media (min-width: 604px) {
.wrapper {width: 580px;margin: 0 auto;}
#questionArea {width: 560px;grid-template-columns: 1fr 1fr;}
.col2 {width: 560px;grid-template-columns: 1fr 1fr;}
#headArea h1 {font-size: 1.5em;}
.spbr {display: none;}
}

h2.question-group {margin-bottom: 0;border-bottom: 4px solid #CCC;
grid-column: 1 / -1;}

#result {display: inline-block;margin: 0 5px 0 0;font-size: 1.2em;font-weight: bold;}
#shareArea {display: inline-block;margin-top: 1em;}

#resultArea {padding: 1.5em 1.5em 20px;background: #fafafa;}

.level {display: none;}

#headArea {padding-top: 20px;}
#othArea {padding: 0px 20px 20px 20px;}
#CreditArea {padding: 20px 20px;}

#btnwnd {padding: 40px 0 30px 0;text-align: center;}
.xBtn {padding: 10px 16px;}
.xBtn {
  display: inline-block;
  padding: 0.8em 3em;
  background-color: #e3364a; /* 背景色 */
  box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
  border-radius: 60px;
  border: none;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
.xBtn:hover {box-shadow: none;transform: translateY(5px);}
.xBtn:active {box-shadow: none;transform: translateY(5px);}

#retryBtn,
#gradeBtn {}


.pc-only {display: none;}
.sp-only {display: inline-block;}

@media (min-width: 604px) {
  .pc-only {display: inline-block;}
  .sp-only {display: none;}
}


#topArea {padding: 0 30px;}
#topArea p {margin: 10px 0;padding: 0;text-align: center;}
#topArea a {display: block;border: 2px solid #bc6b29;border-radius: 10px;padding: 10px;}
#topArea a:link {text-decoration: none;}

#lvmini a {background: #f1fbff; /* 水色 */}
#lvbeginner a {background: #fff1f6; /* ピンク */}
#lvadvanced a {background: #fff9da; /* 黄色 */}

#topArea strong {color: #333;}
#topArea span {font-size: 0.9em;color: #666;}

#lvmini a:hover {background: #daf7ff;}
#lvbeginner a:hover {background: #ffe5ed;}
#lvadvanced a:hover {background: #fff9da;}
#topArea strong,
#topArea span {display: block;}
#topArea strong {font-size: 1.5em;}


#topArea {display: grid;grid-template-columns: 1fr;gap: 0;}

/* 768px以上で3カラムに変更 */
@media (min-width: 604px) {
  #topArea {
    padding: 0 10px;grid-template-columns: repeat(3, 1fr);gap: 20px;
  }
}

body.mode-mini {
  background: #f1fbff;
}
body.mode-beginner {
  background: #fff1f6;
}
body.mode-advanced {
  background: #fff9da;
}