:root {
	
	/***▼デフォルト色▼*********************************************** */
	--q-bg-default: lightblue;
	/* 参照には var() を使う */
	--q1-bg: var(--q-bg-default);
	--q2-bg: var(--q-bg-default);
	--q3-bg: var(--q-bg-default);
	--q4-bg: var(--q-bg-default);
	--q5-bg: var(--q-bg-default);
	--q6-bg: var(--q-bg-default);
	--q7-bg: var(--q-bg-default);
	--q8-bg: var(--q-bg-default);
	--q9-bg: var(--q-bg-default);
	/***▲デフォルト色▲*********************************************** */
		
/*
	 背景色とボタン色を共通化 
	--q1-bg: #FFE066;  黄（レモンイエロー系・明るめ） 
	--q2-bg: #22D3EE;  水色（シアン／アクアブルー、明るい水色） 
	--q3-bg: #34D399;  緑（エメラルドグリーン鮮やか） 
	--q4-bg: #F8AF18;  オレンジ（アンバー） 
	--q5-bg: #F9A8D4;  ピンク（少し淡め） 
	--q6-bg: #60A5FA;  青（スカイブルー明るい青） 
	--q7-bg: #BEF264;  黄緑（明るい黄緑・視認性良） 
	--q8-bg: #C084FC;  紫（ラベンダー／ライラック、明るい紫） 
	--q9-bg: #F87171;  赤（コーラルレッド、明るい赤） 

*/

/* 背景色とボタン色を共通化 */
--q1-bg: #FFEBA3;  /* 元 #FFE066 → 少し柔らかい黄色 */
--q2-bg: #7DDDFB;  /* 元 #22D3EE → 明るさを抑えた水色 */
--q3-bg: #D9F99D;  /* 元 #BEF264 → やさしい黄緑 */
--q4-bg: #F7CDA1;  /* 元 #F8AF18 → やわらかいオレンジ */
--q5-bg: #93C5FD;  /* 元 #60A5FA → パステル寄りの青 */
--q6-bg: #6EE7B7;  /* 元 #34D399 → 落ち着いたエメラルド */
--q7-bg: #FBCFE8;  /* 元 #F9A8D4 → 柔らかいパステルピンク */
--q8-bg: #E9D5FF;  /* 元 #C084FC → パステルライラック */
--q9-bg: #FCA5A5;  /* 元 #F87171 → 柔らかいコーラルレッド */




}
    /* q1クラスのスタイル */
    .q1 {
        display: inline-block;
        background-color: var(--q1-bg); /* 黄色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★1」を表示し、中央寄せ */
    .q1::before {
        content: '★1';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q1.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★1」を非表示 */
    .q1.visible::before {
        content: '';
    }

    /* q2クラスのスタイル */
    .q2 {
        display: inline-block;
		background-color: var(--q2-bg); /* 緑色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★2」を表示し、中央寄せ */
    .q2::before {
        content: '★2';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q2.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★2」を非表示 */
    .q2.visible::before {
        content: '';
    }

    /* q3クラスのスタイル */
    .q3 {
        display: inline-block;
        background-color: var(--q3-bg); /* 青色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★3」を表示し、中央寄せ */
    .q3::before {
        content: '★3';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q3.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★3」を非表示 */
    .q3.visible::before {
        content: '';
    }

    /* q4クラスのスタイル */
    .q4 {
        display: inline-block;
        background-color: var(--q4-bg); /* ピンク色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★4」を表示し、中央寄せ */
    .q4::before {
        content: '★4';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q4.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★4」を非表示 */
    .q4.visible::before {
        content: '';
    }

    /* q5クラスのスタイル */
    .q5 {
        display: inline-block;
        background-color: var(--q5-bg); /* オレンジ色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★5」を表示し、中央寄せ */
    .q5::before {
        content: '★5';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q5.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★5」を非表示 */
    .q5.visible::before {
        content: '';
    }

    /* q6クラスのスタイル */
    .q6 {
        display: inline-block;
		background-color: var(--q6-bg); /* 紫色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★6」を表示し、中央寄せ */
    .q6::before {
        content: '★6';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q6.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★6」を非表示 */
    .q6.visible::before {
        content: '';
    }

    /* q7クラスのスタイル */
    .q7 {
        display: inline-block;
        background-color: var(--q7-bg); /* 青色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 7px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★7」を表示し、中央寄せ */
    .q7::before {
        content: '★7';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q7.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★7」を非表示 */
    .q7.visible::before {
        content: '';
    }

    /* q8クラスのスタイル */
    .q8 {
        display: inline-block;
        background-color: var(--q8-bg); /* 緑色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★8」を表示し、中央寄せ */
    .q8::before {
        content: '★8';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q8.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★8」を非表示 */
    .q8.visible::before {
        content: '';
    }

    /* q9クラスのスタイル */
    .q9 {
        display: inline-block;
        background-color: var(--q9-bg); /* 赤色の背景 */
        color: transparent;
        padding: 0px 2px;
        border-radius: 9px;
        cursor: pointer;
        position: relative;
        width: auto;
    }

    /* 非表示時に「★9」を表示し、中央寄せ */
    .q9::before {
        content: '★9';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-weight: bold;
    }

    /* visibleクラスが付いたら元のテキストを表示 */
    .q9.visible {
        color: black;
    }

    /* visibleクラスが付いたら「★9」を非表示 */
    .q9.visible::before {
        content: '';
    }

/* テキストボックス */
.tbl-drill input[type="text"] {
    font-size: 11px;
}
/* テキストエリア ※Bootstrapのform-controlが効いているため */
textarea.form-control , .preview-container {
    font-size: 11px;
    resize: none;   /* ユーザーによるリサイズを無効にする */
}
table {
    table-layout: fixed; /* 列の幅を固定 */
    width: 100%;
}
.form-label {
    display: block; /* ラベルをブロック要素に変更 */
    margin-bottom: 5px; /* ラベル間のスペースを追加 */
}
.form-control {
    width: 100%; /* 入力フィールドを100%幅に設定 */
}
.preview-container {
    overflow-y: auto; /* 縦方向にスクロールバーを表示 */
    height: 500px; /* プレビューの最大の高さを設定 */
    padding: 5px; /* プレビューコンテナの内側の余白を追加 */
}





	.quiz-top {
/*		font-weight: bold;
		font-size: 1.0em;
		padding-bottom :5px;
		color: firebrick;*/
	}
	.quiz-title {
		font-weight: bold;
		font-size: 0.9em;
	}
	.quiz-question {
	  background-color: #f8f9fa;
	  padding: 0.5rem;
	  font-size: 0.8em;
	}
	.quiz-question pre {
		padding: 0.5rem;
		margin-top :10px;
		margin-bottom :0px;
	}
	.quiz-hint {
	  background-color: #f9f9f9;   /* 薄いグレー背景で見やすく */
	  border-left: 4px solid lightgray; /* 左側にラインをアクセント */
	  padding-left: 15px;          /* 内側に余白 */
	  padding-bottom: 20px;          /* 内側に余白 */
	  margin: 10px 0;              /* 上下の余白 */
	  line-height: 1.6;            /* 行間を広めに */
	  white-space: pre-line;       /* 改行コードを反映させる */
	  font-size: 0.8em;
	  border-radius: 4px;          /* 角を少し丸める */
	}