body {
    font-family: "メイリオ", "ヒラギノ角ゴシック", sans-serif;
    margin: 3% 10px;
    color: #333;
}

h2 {
    font-size: 20px;
}

p {
    font-size: 16px;
    line-height: 1.6rem;
}

button {
    border-radius: 4px;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.tal {
    text-align: left;
}

.bold {
    font-weight: 800;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.inner-wrap {
    margin: 10px;
    padding: 20px;
    height: 57vh;
    /* height: 100vh; */
}

.hover-opacity:hover {
    opacity: 0.7;
}

.outside-border {
    border: 2px solid #B8B7B8;
}

.button-blue {
    background-color: #1258A0;
    color: #fff;
    padding: 7px 35px;
    font-size: 14px;
}

.button-blue:hover {
    opacity: 0.7;
}

.button-white {
    background-color: #fff;
    color: #000;
    padding: 7px 35px;
    font-size: 14px;
    border: 1px solid #B8B7B8;
}

.button-white:hover {
    background-color: #BEE4F2;
    border: 1px solid #68C6E1;
    color: #231815;
}

.button-white:active,
.button-white.clicked {
    background-color: #BEE4F2;
    border: 1px solid #E83632;
    color: #231815;
}

.no-push {
    opacity: 0.6;
}

.no-push:hover {
    opacity: 0.6;
}


.footer-logo {
    max-width: 1000px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;

}

.footer-logo img {
    width: 80px;

}

/* ユーザートップトップここから */
.top-wrap {
    max-width: 1000px;
    margin: 10px auto;
    padding: 40px 60px;
}

.top-contents-flex {
    display: flex;
    justify-content: space-between;
}

.top-contents {
    flex: 1;
}

.top-logo {
    background: #fff;
    height: 30vh;
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-logo img {
    width: 70%;
}

.top-text {
    background: #1258A0;
    height: 30vh;
    color: #F4F4F6;
    padding: 30px;

}

.top-text p {
    font-size: 20px;
}

.top-login {
    background: #F4F4F6;
    flex: 2;
}

.top-login-contents {
    max-width: 350px;
    padding: 30px;
    margin: 0 auto;
}

.login-title {
    color: #0E5599;
    font-size: 30px;
    margin-top: 60px;
}

.login-radio-label {
    padding-right: 20px;
}

.login-radio-wrap {
    padding-bottom: 15px;
}

.login-radio-contents {
    padding-bottom: 10px;
    margin: 0 !important;
}

.account-info {
    margin-top: 40px;
}

.account-info div:nth-child(2) {
    margin-top: 20px;
}

.login-label {
    font-size: 18px;
    color: #1258A0;
}

.input-area {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    padding: 5px;
    border: 2px solid #B5B5B6;
}

.login-btn {
    margin-top: 30px;
    background: #DCDDDD;
    border: 2px solid #1258A0;
    color: #1258A0;
    padding: 10px 70px;
    text-align: center;
}

.login-btn:after {
    content: "\025BA";
    font-size: 12px;
    padding-left: 8px;
}

.contents-wrap-border {
    border: 2px solid #B8B7B8;

}

.top-background {
    background-color: #AFCAE6;
}

.white-background {
    background: #fff;
}

.font-color_red {
    color: #FF0000;
}

/* ユーザートップトップここまで */

/* メンテナンスページここから */
.maintenance {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    padding: 60px 40px;
}

.maintenance-logo img {
    width: 130px;

}

.maintenance-text {
    font-size: 25px;
    color: #0E5599;
    padding: 150px 0 30px;
}

.any-text {
    color: #0E5599;
}

/* メンテナンスページここまで */

/* 試験一覧ここから */
.examlist.wrap {
    max-width: 1000px;
}

.examlist .inner-wrap {
    padding: 20px 50px;
}

.examlist-header {
    height: 40px;
    background: #1258A0;
}

.examlist-introduction {
    margin-top: 20px;
}

.examlist-wrap {
    margin-top: 60px;
}

.examlist-wrap h3 {
    font-size: 18px;
}

.examlist-wrap i {
    font-size: 20px;
    padding-right: 5px;
    color: #313131;
}

.examlist-tit {
    display: flex;
    margin-bottom: 30px;
}

.examlist-contents {
    background: #f1f1f1;
    padding: 20px;
    margin-bottom: 20px;

}

.examlist-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 試験一覧ここまで */

/* 試験中の設定ここから */
/* 試験中の囲い線設定 */
.main-contents-border {
    background: #fff;
    border: 10px solid #EEEEEE;
}

/* 試験中のヘッダー設定 */
.exam-header {
    padding: 20px;
    background-color: #fff;
}

.exam-header-flex {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}

.exam-header-logo {
    width: 110px;
    margin-right: 5px;
}

.exam-header-logo img {
    width: 100%;
}

.exam-title-wrap {
    display: flex;
}

.exam-img {
    width: 1000px;
}

/* 試験中のフッター設定 */
.exam-footer {
    padding: 8px 10px;
    background: #E0E1E0;
}

/* スクロールバー設定 */
.inline-scrollbar {
    height: 61vh;
    overflow: scroll;
    padding-right: 15px;
}

/* examlistページのスクロールバー設定*/
.examlist-inline-scrollbar {
    height: 80vh;
    overflow: scroll;
    padding-right: 15px;
}


/* 試験説明ここから */
.description-text {
    padding-top: 20px;
}

.description-text:first-child {
    padding-top: 0;
}

.description-text {
    padding-top: 20px;
}

.exam-footer.exam-outline-footer {
    justify-content: right;
    gap: 20px;
}

/* 試験説明ここまで */

/* 学科試験ここから */
.exam-header-under-flex {
    display: flex;
    justify-content: right;

}

.exam-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.exam-footer-flex {
    display: flex;
    gap: 5px;
}

.exam-footer {
    display: flex;
    justify-content: space-between;

}

.question-block {
    margin-bottom: 20px;
}

.choices-wrap {
    display: flex;
}

.left-bar-space {
    width: 10px;
    background-color: #D6292F;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.choices-content {
    flex-grow: 1;
    padding-left: 10px;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 16px;
}

.question-number {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.question-number input[type="checkbox"] {
    display: none;
}

.question-number label {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.question-number label::before {
    content: '';
    width: 14px;
    height: 14px;
    background: #eee;
    margin-right: 6px;
    display: inline-block;
    transition: all 0.3s ease;
}

.question-number input[type="checkbox"]:checked+label::before {
    background-color: rgba(18, 88, 160, 1);
    border-color: rgba(18, 88, 160, 1);
}

.question-number input[type="checkbox"]:checked+label::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    width: 8px;
    height: 4px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    transform: translateY(-75%) rotate(-45deg);
}

.question-text {
    text-indent: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.radio-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.answer-choices {
    display: flex;
    align-items: flex-start;
}

/* .answer-choices img {
    width: 100%;
    min-width: 500px;
} */

.answer-choices input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #B5B5B6;
    border-radius: 50%;
    outline: none;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.answer-choices input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #1258A0;
    border-radius: 50%;
}

.answer-choices label {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

/* タイプ2　協会実技解答中ここから */
.kyoukai-flex {
    display: flex;
    flex-direction: row;
    min-width: 0;
}

.kyoukai-question .inline-scrollbar {
    padding-left: 15px;
}

.kyoukai-question {
    background: #fff;
    flex: 6;
    padding: 30px 0;
    border: 2px solid #C2C2C2;
    text-align: center;
}

.kyoukai-question img {
    width: 940px;
}

.kyoukai-answer-choice {
    width: 210px;
}

.kyokai-img {
    width: 905px;
    margin-bottom: 20px;
}

/* 2級実技(タイプ2)　協会実技解答中ここから */
.grouped-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid #EDEDED;
    padding-bottom: 12px;
    margin-bottom: 12px;
}


/* 小問用ボタンスタイルを上書き・調整 */
.grouped-grid .progress-item {
    width: auto;
    min-width: 60px;
    height: 50px;
    padding: 10px 12px;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 小問あり進捗専用のラッパー */
.grouped-progress-inner-wrap {
    flex: 1;
    width: 100%;
    height: 61vh;
    overflow-y: auto;
    padding: 5px;
}

.radio-wrap-jitsugi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 15px;
}

.answer-choices.multiple-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}

.answer-choices.multiple-choice input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.multiple-choice label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    line-height: 1;
    text-align: center;
}

.sub-question {
    margin-bottom: 20px;
}


.answer-choices.numeric-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.input-label-inline {
    font-size: 14px;
    white-space: nowrap;
}

.numeric-input {
    width: 150px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: #fdfdfd;
}

.word-select select {
  width        : 100%;
  min-width    : 300px;
  padding      : 8px 32px 8px 12px;
  border       : 1px solid #bfbfbf;
  border-radius: 3px;
  font-size    : 15px;
  line-height  : 1.4;
  background   : #fff;
  box-sizing   : border-box;
  cursor       : pointer;
}

.word-select {
  position: relative;
}

.word-select::after {
  content : '';
  position: absolute;
  right   : 14px;
  top     : 60%;
  width   : 10px;
  height  : 10px;
  transform: translateY(-50%);
  background-image: url('data:image/svg+xml,%3csvg xmlns%3d%22http://www.w3.org/2000/svg%22 viewBox%3d%220 0 12 12%22%3e%3cpolygon points%3d%220,0 12,0 6,7%22 fill%3d%22%23666%22/%3e%3c/svg%3e');
  background-size: 10px 10px;
  pointer-events: none;
}

.exam-wrap {
    padding-bottom: 10px;
}

/* 2級実技(タイプ2)　協会実技解答中ここまで */

/* タイプ3専用レイアウト　きんざい実技解答中ここから */

body.type3 {
    font-family: "メイリオ", "ヒラギノ角ゴシック", sans-serif;
    color: #333;
}

.wrap.type3 {
    max-width: 1500px;
    margin: 0 auto;
}

.inner-wrap.type3 {
    margin: 10px;
    padding: 20px;
    /* height: 100vh; */
}

.inline-scrollbar.type3 {
    height: 70vh;
    overflow: scroll;
    padding: 10px;
    /* padding-right: 15px; */
}

.answer-choices img {
    width: 100%;
    min-width: 500px;
}

.jitsugi-flex {
    display: flex;
    flex-direction: row;
    min-width: 0;
}

.kyoukai-question.type3 {
    background: #fff;
    flex: 6;
    padding: 30px 0;
    border: 2px solid #C2C2C2;
    text-align: center;
}

.kyoukai-question.type3 img {
    margin: 0 auto;
    width: 90%;
    min-width: 500px;
}

.kyoukai-answer-choice.type3 {
    width: 250px;
}

.kinzai-question {
    width: 50%;
}

.kyokai-img.type3 {
    width: 100%;
}

.kinzai-question img {
    width: 100%;
    min-width: 500px;
}

.kinzai-answer-choice {
    width: 50%;
}

.kinzai-img {
    width: 100%;
}

.kinzai-question-img {
    padding-bottom: 5px;
}

.kinzai-question-img img {
    width: 100%;
    min-width: 500px;
}

.progress-inner-wrap.type3 {
    height: 70vh;
}

.score-wrap.type3 {
    display: flex;
    justify-content: space-between;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 0 0;
}

.answer-img {
    max-width: 500px;
}

/* タイプ3専用レイアウト　きんざい実技解答中ここまで */

/* 試験終了モーダルここから */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-wrap {
    background-color: #fefefe;
    margin: 15% auto;
    width: 400px;
    overflow: hidden;
    position: relative;
}

.modal-blue-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #1258A0;
}

.modal-contents {
    padding: 20px 20px 60px;
    padding-top: 25px;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

#modalText {
    text-align: left;
    margin-left: 20px;
}

.modal-choices {
    background-color: #F0F0EF;
    padding: 20px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 試験終了モーダルここまで */

/* 進捗ページここから */
.progress-contents-border {
    background: #fff;
    flex: 9;
}

.progress-inner-wrap {
    height: 61vh;
}

.progress-wrap {
    display: flex;
    justify-content: space-between;
}

.progress-list-grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    justify-content: space-between;
    gap: 6px;
}

.progress-underline {
    border-bottom: 2px solid #F2F2F2;
}

.progress-item {
    font-size: 12px;
    font-weight: 800;
    height: 50px;
    padding: 10px 0;
    text-align: center;
    border: 2px solid #9FA0A0;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
}

.progress-list-grid :hover {
    opacity: 0.7;
}

.progress-status {
    width: 140px;
    padding: 10px;
    background: #E3E3E2;
}

.grouped-progress-status {
    position: sticky;
    top: 0;
    background: #E3E3E2;
    width: 140px;
    padding: 10px;
    padding-bottom: 100px;
}

.status-text {
    font-size: 12px;
}

.status-style {
    margin-top: 10px;
    width: 50px;
    height: 40px;
    position: relative;
    border-radius: 5px;
}

/* 未回答 */
.not-answer {
    border: 2px solid #9FA0A0;
    background: #fff;
}

/* 解答中 */
.answering {
    border: 2px solid #9FA0A0;
    background: #fff;
}

.answering::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 4px solid rgba(255, 255, 0, 0.5);
    border-radius: 9px;
    pointer-events: none;
}

.option-number {
    margin-right: 10px;
}

/* チェックしたもの */
.checked {
    border: 2px solid #E60012;
    background: #fff;
}

.checked::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #E60012;
    border-left: 2px solid #E60012;
    transform: rotate(-45deg);
}

/* 解答ずみ */
.answered {
    border: 2px solid #9FA0A0;
    background: #B5D299;
}

/* 組み合わせスタイル調整 */
.answered.checked {
    background: #B5D299;
    border-color: #E60012;
}

.answered.answering::before {
    /* z-index: -100;
    background: #B5D299; */
    border-color: rgba(255, 255, 0, 0.8);
}

.checked.answering::before {
    border-color: rgba(255, 255, 0, 0.8);
}

/* 進捗ページここまで */
/* 試験中の設定ここまで */

/* 試験結果ページここから */
.result-list .inner-wrap {
    height: auto;
}

.result-announcement-wrap {
    padding: 20px;
    border: 10px solid #EEEEEE;

}

.result-announcement-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.score {
    font-size: 30px;
}

.score-text {
    font-size: 60px;
    color: #A02024;
    padding: 0 10px;
}

.result-link {
    color: #68C6E1;
    text-decoration: underline;
    display: block;
}

.pass-fail-style {
    border: 2px solid #000;
    text-align: center;
    line-height: 48px;
    width: 150px;
    height: 50px;
    font-size: 30px;
}

.pass {
    color: #3FBA77;
    border-color: #3FBA77;
}

.fail {
    color: #A02024;
    border-color: #A02024;
}

.score-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 0;
}

table {
    border-collapse: collapse;
    width: 30%;
    font-size: 14px;
}

tr a:hover {
    opacity: 0.7;
}

th,
td {
    border: 1px solid #D3D3D3;
    padding: 5px;
    text-align: center;
}

th {
    font-weight: bold;
}

/* 学科後半問題用のテーブル設定 */
.epartment-latter-score table {
    width: 700px;
}

.result-question-number {
    width: 50px;
}

.result-your-answer {
    width: 200px;
}

.result-true {
    width: 200px;
}

.epartment-score {
    justify-content: left;
    gap: 20px;
}

/* ここまで */

.mismatch {
    background-color: #FFE4E4;
}

.exam-footer.result-footer {
    justify-content: left;
    gap: 20px;
}

.exam-footer.result-footer.no-print button:nth-of-type(3) {
    margin-left: auto;
}


/* 試験結果ページここまで */
/* 問題見直しページここから */

.answer-wrap {
    margin-top: 40px;
    display: flex;
    flex-flow: column;
    gap: 10px;
    font-weight: 800;
}

.answer-flex {
    font-size: 20px;
    display: flex;
    gap: 10px;
    justify-content: left;
    align-items: flex-start;
    margin-bottom: 10px;
}

.answer-flex p {
    font-size: 16px;
}

.your-answer {
    color: #26AFE9;
}

.true-answer {
    color: #333;
}

.answer-tit {
    width: 130px;
    flex-shrink: 0;
}

.answer-text {
    flex: 1;
}

.correct-answer {
    font-size: 20px;
    color: #1258A0;
    /* border-bottom: 5px solid #A02024; */
}

.explanation {
    margin-top: 30px;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
    color: #333;
}

.explanation-title {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.explanation p {
    line-height: 1.5rem;
    margin-bottom: 12px;
}

/* 解説で太字と下線両方つける */
.highlight {
    font-weight: bold;
    text-decoration: underline;
}

/* 問題見直しページここまで */

/* エラーページここから */
.error-text {
    margin: 70px 0 40px;
    text-align: center;
    font-weight: 800;
}

.error-tit {
    font-size: 50px;
    margin-bottom: 10px;
}

.error-home {
    margin: 0 auto;
}

.error-img {
    width: 150px;
    margin: 0 auto;
    padding-top: 40px;
}

/* エラーページここまで */

/* 画面固定 */
@media screen and (max-width: 691px) {
    .wrap {
        width: 690px;
    }
}