/* 新版で追加する調整。現行の styles.css の後に読む。文字は大きめ（決定事項）。 */
html { font-size: 112.5%; }
body { -webkit-text-size-adjust: 100%; }
.devError { text-align: left; white-space: pre-wrap; font-size: 0.8rem; background: #f6f6f6; padding: 1em; margin: 1em; }

/* 段階3: 会員フォームの追加分 */
.errorList { list-style: none; margin: 0 0 20px; padding: 10px 15px; border: 2px solid #d33; background: #fff3f3; color: #c00; font-size: 16px; text-align: left; }
.errorList li { margin: 2px 0; }
.flashMessage { margin: 0 0 20px; padding: 10px 15px; border: 2px solid #4a9; background: #f0fff6; color: #063; font-size: 16px; }
.applicationView .formBox input.nameInput { width: 8em; }
.applicationView .formBox input.yearInput { width: 5em; text-align: center; }
/* 生年月日の月・日の選択欄は、ブラウザ既定（Arial 14px）ではなく西暦の入力欄と同じ字体・大きさ・高さにそろえる（入力欄は 801px 以上で 18px、800px 以下で 16px） */
.applicationView .formBox select { font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif; font-size: 18px; height: 39px; }
@media screen and (max-width: 800px) {
	.applicationView .formBox select { font-size: 16px; height: 36px; }
}
.applicationView .formBox input[type=email],
.applicationView .formBox input[type=tel],
.applicationView .formBox textarea { width: calc(100% - 12px); font-size: 18px; }
.applicationView .formBox small { font-size: 13px; color: #666; }
.applicationView .formBox .listInline { list-style: none; margin: 0; padding: 0; text-align: left; }
.applicationView .formBox .listInline li { display: inline-block; margin-right: 1em; }
.applicationView .checkList { margin-bottom: 20px; }
.applicationView .mailNotice { margin: 0 0 10px; font-size: 14px; color: #666; text-align: left; }
.buttonFull button.button { width: 100%; border: none; cursor: pointer; font-family: inherit; }
.button.buttonRed { background: #c33; color: #fff; }
.button.buttonGray { background: #666; color: #fff !important; box-shadow: 5px 5px 0 #444; }
.examMenuView .menuList .button.buttonGray { box-shadow: 5px 5px 0 #444; }
.examMenuView .menuList .button.buttonOrange { box-shadow: 5px 5px 0 #7c3a06; }
.settingView h3 { margin: 30px 0 10px; font-size: 20px; border-left: 6px solid #f59d2c; padding-left: 10px; }
.cancellationView ul { text-align: left; font-size: 16px; margin: 0 0 20px; }
.mt20 { margin-top: 20px; } .mb30 { margin-bottom: 30px; } .aR { text-align: right; }
@media screen and (max-width: 640px) {
  .applicationView .formBox input.nameInput { width: calc(50% - 3em); }
}

/* 段階4: テスト画面の追加分（現行HTMLが無く、JSの参照先とCSSから組み直した部分） */
.examView .backLink { padding: 10px 0 20px; font-size: 16px; }
.statusView p { padding: 6px 0; font-size: 16px; }
.guessView .examActionView .question .topSide,
.guessView .examActionView .question .bottomSide { margin: 0; padding: 0; text-align: center; }
.guessView .examActionView .question .topSide img,
.guessView .examActionView .question .bottomSide img { width: 80px; }
.guessView .examActionView .answerBox { padding: 10px 0 20px; }
.guessView .examActionView .answerBox .button { display: inline-block; min-width: 200px; }
.examFinishView .finishBox { max-width: 560px; margin: 0 auto 30px; padding: 20px 15px; border: 5px solid #f59d2c; border-radius: 15px; background: #fff; text-align: center; }
.examFinishView .finishLabel { margin: 0; font-size: 18px; color: #714205; }
.examFinishView .finishAge { margin: 10px 0; font-size: 22px; font-weight: bold; color: #b45309; }
.examFinishView .finishAge span { font-size: 56px; line-height: 1.2; margin-right: 4px; }
.examFinishView .finishOverall { margin: 10px 0 0; font-size: 18px; }
.examFinishView .finishNote { margin: 10px 0 0; font-size: 15px; color: #666; }
@media screen and (max-width: 640px) {
  .examFinishView .finishAge span { font-size: 44px; }
  .guessView .examActionView .question .topSide img,
  .guessView .examActionView .question .bottomSide img { width: 60px; }
}

/* 段階5: 結果一覧・詳細・マイページ（現行の resultView / mypageView の色に合わせる） */
.resultView .resultLead,
.resultView .resultNote { font-size: 15px; color: #555; text-align: left; }
.resultView .resultTable { margin: 15px 0; border-collapse: collapse; }
.resultView .resultTable th,
.resultView .resultTable td { padding: 8px 6px; border: 1px solid #f59d2c; text-align: center; vertical-align: middle; }
.resultView .resultTable .ageLarge { font-size: 22px; font-weight: bold; }
.resultView .resultTable .notCounted { font-size: 12px; color: #777; }
.resultView .resultTable .detailCell .button,
.resultView .resultMenu .button { display: inline-block; padding: 0 1em; line-height: 2.2; font-size: 16px; }
.resultView .resultMenu { list-style: none; margin: 0 0 20px; padding: 0; text-align: center; }
.resultView .pager { display: flex; justify-content: center; gap: 1.5em; align-items: center; margin: 10px 0 20px; font-size: 16px; }
.resultShowView .finishBox { max-width: 560px; margin: 20px auto; padding: 20px 15px; border: 5px solid #f59d2c; border-radius: 15px; background: #fff; text-align: center; }
.resultShowView .finishLabel { margin: 0; font-size: 18px; color: #714205; }
.resultShowView .finishAge { margin: 6px 0; font-size: 22px; font-weight: bold; color: #c46a00; }
.resultShowView .finishAge span { font-size: 56px; line-height: 1.2; margin-right: 4px; }
.resultShowView .finishOverall { margin: 6px 0 0; font-size: 18px; }
.resultShowView .detailTable { max-width: 560px; margin: 0 auto 20px; border-collapse: collapse; }
.resultShowView .detailTable th,
.resultShowView .detailTable td { padding: 8px 10px; border: 1px solid #f59d2c; font-size: 16px; }
.resultShowView .detailTable th { background: #fdf0de; color: #714205; text-align: left; width: 45%; }
.resultShowView .certBox { max-width: 560px; margin: 0 auto 20px; text-align: center; }
.resultShowView .certBox h3 { margin: 0 0 10px; font-size: 18px; color: #714205; }
.resultShowView .certBox img { width: 100%; height: auto; border: 1px solid #ddd; }
.resultShowView .certBox .button { display: inline-block; padding: 0 1.5em; line-height: 2.4; font-size: 16px; }
.examFinishView .finishBox .finishOverall + .finishOverall { margin-top: 4px; }
.mypageView .overallBox { padding: 15px; text-align: center; }
.mypageView .overallAge { margin: 0; font-size: 24px; font-weight: bold; color: #c46a00; }
.mypageView .overallAge span { font-size: 60px; line-height: 1.2; margin-right: 4px; }
.mypageView .overallDev { margin: 4px 0; font-size: 20px; }
.mypageView .overallNote,
.mypageView .latestNote,
.mypageView .trendSummary { margin: 8px 0 0; font-size: 14px; color: #666; text-align: left; }
.mypageView .trendBox { padding: 10px 15px 15px; }
.mypageView .trendChart { display: block; width: 100%; height: auto; font-family: inherit; }
.mypageView .trendChart .point:hover circle:last-child { r: 6.5; }
.mypageView .latestTable { width: calc(100% - 30px); margin: 15px; border-collapse: collapse; }
.mypageView .latestTable th,
.mypageView .latestTable td { padding: 8px 6px; border: 1px solid #f59d2c; font-size: 16px; text-align: center; white-space: nowrap; }
.mypageView .latestTable thead th { background: #b45309; color: #fff; }
.mypageView .latestTable tbody th { text-align: left; font-weight: normal; }
.mypageView .latestTable .notYet { color: #777; font-size: 15px; }
.mypageView .latestNote { padding: 0 15px 15px; }
.mypageView .noticeList { list-style: none; margin: 0; padding: 0 15px 10px; text-align: left; }
.mypageView .noticeList li { padding: 12px 0; border-bottom: 1px dashed #e0c9a6; }
.mypageView .noticeList li:last-child { border-bottom: none; }
.mypageView .noticeDate { margin: 0; font-size: 13px; color: #777; }
.mypageView .noticeTitle { margin: 2px 0 4px; font-size: 17px; font-weight: bold; color: #714205; }
.mypageView .noticeBody { font-size: 15px; line-height: 1.6; }
@media screen and (max-width: 640px) {
  /* 結果一覧は1行を縦のカードにする（見出しを各値の左に出す） */
  .resultView .resultTable thead { display: none; }
  .resultView .resultTable,
  .resultView .resultTable tbody,
  .resultView .resultTable tr,
  .resultView .resultTable td { display: block; width: auto; }
  .resultView .resultTable tr { margin: 0 0 15px; border: 2px solid #f59d2c; border-radius: 10px; overflow: hidden; background: #fff; }
  .resultView .resultTable td { border: none; border-bottom: 1px solid #f6d3a3; text-align: right; padding: 6px 10px; font-size: 16px; }
  .resultView .resultTable td[data-label]::before { content: attr(data-label); float: left; color: #714205; font-size: 14px; }
  .resultView .resultTable .ageLarge { font-size: 20px; }
  .resultView .resultTable .detailCell { text-align: center; border-bottom: none; }
  .resultShowView .finishAge span,
  .mypageView .overallAge span { font-size: 44px; }
}
/* お問い合わせ: 人には見えない送信よけの欄・改行をそのまま見せる */
.contactTrap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.preWrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 画面レビュー（2026-11-05）対応 */
/* 文字の見やすさ: 明るい橙(#f59d2c)と白の組み合わせは差が約2.2倍で読みにくいため、
   白文字を載せる地と橙の文字は濃い橙(#b45309、白との差約5倍)にする。トップの大きな橙の地は残し、上の文字を濃い茶にする。 */
.homeView h2,
.homeView p.message { color: #3d2000; }
.homeView ul a { color: #b45309 !important; }
.homeView .largeButton a,
.button.buttonBlue,
.button.buttonOrange,
.mypageView .menuList a,
.settingView td a,
.numericView .numberList li a,
.wordView .examNumberView li a,
.guessView .examActionView ul a.fcs span,
.priceView .priceBox,
.comparisonView thead td.active,
.resultView thead th,
.resultView .spTitle,
#footer .copy { background: #b45309; }
.homeView .largeButton a,
.button.buttonBlue,
.button.buttonOrange,
.mypageView .menuList a,
.wordView .examNumberView li a { box-shadow: 5px 5px 0 #7c3a06; }
.oTitle,
.examView h2,
.examView .messageBox,
.entryFreeView .leftSide h3,
.detailAboutView p,
.priceView .shadowBox h3 { color: #b45309; }

/* トップの登録ボタンが1つだけのときは右寄せにせず中央に置く（現行は2つ並び用の左右配置） */
.homeView ul li:only-child { float: none; margin: 0 auto; }

/* 立体把握の「同じ／違う」を同じ幅の2列にそろえる（50%+50%+4%で折り返していた） */
.grasp3dView .sameBox.buttonDouble { display: flex; gap: 4%; padding: 20px 0 0; }
.grasp3dView .sameBox.buttonDouble li { flex: 1 1 0; width: auto; margin: 0; }

/* 入力欄の下に常に出す説明（パスワードの条件など） */
.applicationView .formBox small.fieldNote,
.settingView .formBox small.fieldNote { display: inline-block; margin-top: 4px; font-size: 14px; color: #555; }

/* スマホメニューのボタン（a から button に変えたので、現行の .spMenu a と同じ見た目にする） */
@media screen and (max-width: 800px) {
	.spMenu { background: #b45309; }
	.spMenu button,
	.spMenu button span { display: inline-block; transition: all .4s; box-sizing: border-box;}
	.spMenu button { position: relative; width: 22px; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; vertical-align: top; }
	.spMenu button span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px;}
	.spMenu button span:nth-of-type(1) { top: 0;}
	.spMenu button span:nth-of-type(2) { top: 8px;}
	.spMenu button span:nth-of-type(3) { bottom: 0;}
	.spMenu button.open span:nth-of-type(1) { transform: translateY(8px) rotate(-315deg);}
	.spMenu button.open span:nth-of-type(2) { opacity: 0;}
	.spMenu button.open span:nth-of-type(3) { transform: translateY(-8px) rotate(315deg);}
}

/* 幅320px前後で見出しの最後の1〜2文字だけが次の行に落ちないよう、トップの見出しを小さくする */
@media screen and (max-width: 400px) {
	.homeView h2 { font-size: 24px; }
}

/* F7: トップのテスト説明（テストの種類・時間・結果の例・位置付け） */
.homeGuideView { background: #fff; padding: 50px 0 60px; }
.homeGuideView .inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.homeGuideView h3 { margin: 40px 0 15px; color: #3d2000; font-size: 26px; text-align: center; }
.homeGuideView h3:first-child { margin-top: 0; }
.homeGuideView .lead { margin: 0 0 20px; font-size: 16px; text-align: center; }
.homeGuideView .guideTests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.homeGuideView .guideTests li { padding: 15px 18px; border: 2px solid #f59d2c; border-radius: 8px; text-align: left; }
.homeGuideView .guideTests strong { display: block; color: #b45309; font-size: 19px; }
.homeGuideView .guideTests .limit { display: inline-block; margin: 6px 0 4px; padding: 2px 10px; border-radius: 4px; background: #fdebd3; color: #3d2000; font-size: 14px; }
.homeGuideView .guideTests p { margin: 4px 0 0; font-size: 15px; line-height: 1.7; }
.homeGuideView .guideResult { display: flex; align-items: center; justify-content: center; gap: 30px; }
.homeGuideView .sampleBox { min-width: 220px; padding: 15px 25px; border: 3px solid #b45309; border-radius: 10px; text-align: center; }
.homeGuideView .sampleBox p { margin: 0; }
.homeGuideView .sampleLabel { color: #b45309; font-size: 14px; font-weight: bold; }
.homeGuideView .sampleAge { font-size: 20px; font-weight: bold; }
.homeGuideView .sampleAge span { color: #b45309; font-size: 44px; }
.homeGuideView .sampleDev { font-size: 18px; font-weight: bold; }
.homeGuideView .sampleBox .sampleNote { margin-top: 6px; color: #555; font-size: 12px; }
.homeGuideView .guideList { margin: 0; padding-left: 1.4em; font-size: 16px; line-height: 2; text-align: left; }
.homeGuideView .guideNote { margin: 30px 0 25px; padding: 12px 15px; background: #f5f5f5; color: #333; font-size: 14px; line-height: 1.7; }
.homeGuideView .guideCta { max-width: 480px; margin: 0 auto 15px; }
.homeGuideView .guideCta .button { display: block; }
@media screen and (max-width: 640px) {
	.homeGuideView { padding: 35px 0 45px; }
	.homeGuideView .inner { padding: 0 15px; }
	.homeGuideView h3 { font-size: 21px; }
	.homeGuideView .guideTests { grid-template-columns: 1fr; gap: 12px; }
	.homeGuideView .guideResult { flex-direction: column; gap: 18px; }
}

/* F7: 数字反応で押し間違えたときの見た目の合図（音が聞こえない環境でも気付けるように） */
.numericView .missMessage { min-height: 1.6em; margin: -15px 0 10px; color: #b91c1c; font-size: 18px; font-weight: bold; text-align: center; }
.numericView .numberList li a.miss { background: #b91c1c; animation: numericMiss 0.35s; }
@keyframes numericMiss { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .numericView .numberList li a.miss { animation: none; } }

/* 数字反応: 狭い画面では枠の内側が「画面幅−24px」（320px 幅で 296px）になり、360px 未満で数字の並び（14em=336px）がはみ出す。375px 未満の端末をまとめて対象にし、並びを枠に合わせて縮める（360〜374px は見た目がほぼ変わらない） */
@media screen and (max-width: 374px) {
	.numericView .numberList { width: auto; max-width: 14em; }
	.numericView .numberList li a { width: 90%; }
}