/*== 全体設定 ==*/

body{
    font-family: "Noto Sans JP"; 
}

ol{
    margin-bottom: 0;
}

/*== 共通するUI設定 ==*/

.bg-main-green{
    background: #03A678;
}

.font-bold{
    font-weight: bold;
}

/*== 個別のUIデザイン ==*/
.main-title{
    font-size: 28px;
    font-weight: bold;
}

/*== 回答ボタンのデザイン ==*/
.answer-btn{
    font-size: 24px;
    display: inline-block;
    text-decoration: none;
    background: #ff8181;
    color: #FFF;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #bd6565;
    transition: .4s;
}

.answer-btn:hover{
    color: white;
}

.answer-btn:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

/* ボタンの背景色 */
.answer-btn-bg1{
    background: #f2902e;
}

.answer-btn-bg2{
    background: #f2c12e;
}

.answer-btn-bg3{
    background: #f2e22e;
}

/*== 問題文を表示するテキストボックスのデザイン ==*/
.questionBox {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #049DBF;
    border-radius: 8px;
}

.questionBox .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 20px;
    background: #FFF;
    color: #049DBF;
    font-weight: bold;
}
.questionBox p {
    margin: 0;
    padding: 5px;
    font-size: 16px;
}


.choiceBox{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.choiceBox p {
    margin: 0; 
    padding: 0;
}

.answer-img{
    width: 100px;
}


/* Color Theme Swatches in Hex */
.イラスト-1-hex { color: #049DBF; }
.イラスト-2-hex { color: #03A678; }
.イラスト-3-hex { color: #F2C12E; }
.イラスト-4-hex { color: #F28705; }
.イラスト-5-hex { color: #F25835; }

img.cardImage {
    width: 10%;
    height: 10%;
}

.exam-card{
    text-decoration: none;
}


.lead {
    font-size: 16px; /* デフォルトの1.25remより小さめ */
}




/* モーダル全般の幅調整 */
.modal-content {
    padding: 15px;
    border-radius: 8px;
}

/* 画像のレスポンシブ対応 */
.answer-img {
    max-width: 100%;
    height: auto;
}

/* メディアクエリでスマホ向け調整 */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 90%; /* 横幅を狭く */
        margin: 0 auto;
    }
    .modal-content {
        padding: 10px; /* パディングを調整 */
    }
    .answer-title {
        font-size: 1.2rem; /* タイトル文字サイズ調整 */
    }
}



/* 選択肢ボタンと解答文の隙間調整 */
.col-md-8.offset-md-2.mt-3 {
    margin-right: 5rem;
}

/* 選択肢のスタイル調整 */
ol li {
    border-bottom: 1px solid #ddd; /* 区切り線を追加 */
    padding: 10px 0; /* 上下の余白を調整 */
}

/* 最後の選択肢の線を削除 */
ol li:last-child {
    border-bottom: none;
}

.custom-header {
  background-color: #4e83ff;   /* 好きな色を指定 */
}
.hover-card {
     transition: transform 0.2s, box-shadow 0.2s;
}
.hover-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}