:root {
    /* -- Top level -- */
    --main-color: #3498db;
    
    /* -- Table -- */
    --tbl-color-blue:   #CCFFFF;    /* -- 薄いblue -- */
    --tbl-color-yellow: #FFFFCC;    /* -- 薄いyellow -- */
    --tbl-color-white:  #FFFFFF;    /* -- white リセット用 -- */
    
    --tbl-font-siz-x-large:   2.2rem;
    --tbl-font-siz-u-large:   1.8rem;
    --tbl-font-siz-large:     1.5rem;
    --tbl-font-siz-u-midium:  1.2rem;
    --tbl-font-siz-midium:    1rem;
    --tbl-font-siz-small:     0.8rem;
    --tbl-font-siz-x-small:   0.6rem;
    --tbl-td_width_1st:    20px;
    --tbl-td_width_top:    390px;
    --tbl-td_width_stat:   240px;
    --tbl-td_width_500:    500px;
    --tbl-td_height_top:    20px;
    --tbl-td_width_top1:    10px;
    
    --tbl-td_width_1st:     10px;
    --tbl-td_width_2nd:    300px;
    --tbl-td_width_3rd:    300px;
    
    /* -- Font -- */
    --font-size-def: 1rem;
    --font-size-small: 0.8rem;
    --font-size-x-small: 0.6rem;
}

html {
    font-size: 62.5%;
    /*16px * 62.5% = 10px*/
}

p {
    font-size: 1.6rem;
    /*10px * 1.6 = 16px*/
}

h1 {
    font-size: 2.0rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.2rem;
}

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff ;
    color: #333;
    margin-left: 30px;
    padding: 0;
}

body.1 {
    font-family: Arial, sans-serif;
    background-color: #fffff0 ;
    color: #333;
    margin: 3;
    padding: 3;
}

body.fonMany {
    font-family:'Yu #CCFFFFGothic UI Semibold', 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

left-image {
    float: left;
}

h1 {
    color: #000000;
    text-align: left;
    font-size: midium;
}

h1.t1 {
    color: #000000;
    text-align: left;
    font-size: 12;      <!-- 12 ピクセル -->
}

h1.t2 {
    color: #000000;
    text-align: left;
    font-size: small;
}

h2 {
    color: #000000;
    text-align: left;
    font-size: small;
    font-weight: normal;
}


p.hint {
    font-size: var( tbl-font-siz-midium );    /* フォントサイズを調整 */
    line-height: 1.6;
    padding: 10px;
}


p.def {
    line-height: 0.8;
    padding: 8px;
    font-size: small;
    font-weight: normal;
}

p.xdl {
    padding: 8px;
    font-size: 1.2rem;       <!-  xx-small; -->
    color: black;
    font-weight: lighter;
}

p.ydl {
    line-height: 0.8;
    padding: 8px;
    font-size: 0.8rem;       <!-  xx-small; -->
    color: black;
    font-size: small; 
    font-weight: lighter;
    display: inline-block;
}

button {
    margin-left: 20px;
    color: black; 
    font-size: small; 
    font-weight: normal;
}

span.xld {
    color: black;
    font-size: var( --tbl-font-siz-x-large );
    font-weight: lighter;
    display: inline-block;
}

span.uld {
    color: black;
    font-size: var( --tbl-font-siz-u-large );
    font-weight: lighter;
    display: inline-block;
}

span.ld {
    color: black;
    font-size: var( --tbl-font-siz-large );
    font-weight: lighter;
    display: inline-block;
}


span.mdl {
    color: black;
    font-size: var( --tbl-font-siz-small ); 
    font-weight: lighter;
    display: inline-block;
}

span.mbl {
    color: blue;
    font-size: var( --tbl-font-siz-small );
    font-size: var( --tbl-font-siz-small );
    font-weight: lighter;
    display: inline-block;
}

span.sdl {
    color: black;
    font-size: small; 
    font-weight: lighter;
    display: inline-block;
}

span.sbl {
    color: blue;
    font-size: small; 
    font-weight: lighter;
    display: inline-block;
}

span.xdl {
    color: black;
    font-size: small; 
    font-weight: lighter;
    display: inline-block;
}

span.xbb {
    color: blue;
    font-size: small; 
    font-weight: bold;
    display: inline-block;
}

span.xbl {
    color: blue;
    font-size: xx-small; 
    font-weight: lighter;
    display: inline-block;
}

span.xdl {
    color: black;
    font-size: 0.8rem;
    font-weight: lighter;
    display: inline-block;
}

span.wdl {
    color: black;
    font-size: 0.9rem;  /*var( --font-size-small )     <!-- 0.8rem;  xx-small; -->*/
    font-weight: lighter;
    display: inline-block;
}

span.ydl {
    color: black;
    font-size: 0.8rem;  /*var( --font-size-small )     <!-- 0.8rem;  xx-small; -->*/
    font-weight: lighter;
    display: inline-block;
}

span.ybl {
    color: blue;
    font-size: var( --font-size-small )       /*<!-- 0.8rem;  xx-small; -->*/
}

span.zdl {
    color: black;
    font-size: var( --font-size-x-small );   /* <!-- 0.6rem;   xx-small; --> */
    font-weight: lighter;
    display: inline-block;
}


/* <table style="clear: left; text-align: left; margin-left: 0;" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="390px"> */

table.top {
    clear: left; 
    text-align: left;
    border-collapse: separate
    background-color: var( --tbl-color-white );   /* TOP Page 白表示*/
    height: var( --tbl-td_height_top );
    width:  var( --tbl-td_width_top );
}

/* --tbl-color-white */
table {
    clear: left; 
    text-align: left;
    border-collapse: separate
    height: var( --tbl-td_height_top );
    width:  var( --tbl-td_width_2nd );
}

table.stat {
    clear: left; 
    text-align: left;
    border-collapse: separate
    /*border: 0px solid white; */                    /* 白枠線 */
    background-color: var( --tbl-color-blue );       /* 反転薄い水色表示*/
    height: var( --tbl-td_height_top );
    width:  var( --tbl-td_width_stat );
}

td.top1 {
    color: black;
    background-color: var( --tbl-color-white );    /* var(--tbl-color-white);      白にリセット */
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_top1 );
}


td.top2 {
    color: black;
    background-color: var( --tbl-color-white );  /*#FFFFCC);*/
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_2nd );
}

td.top3 {
    color: black;
    background-color: var( --tbl-color-white );  /*:  #FFFFCC);*/
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_2nd );
}


table.w50 {
    clear: left; 
    text-align: left;
    border: 0;
    border-collapse: collapse
}

table.spec{
  text-align: left; 
  border: 0.5px solid black; 
  border-collapse: collapse; 
  width: 390px; 
  color: black; 
  font-size: x-small; 
  font-weight: lighter;
}

/*
 <td class="180table style="clear: left; text-align: left;" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="390px">
*/


td.td1 {
    color: black;
    /*background-color: var( --tbl-color-white ) ;*/    /* var(--tbl-color-white);      白にリセット */
    background-color: var( --tbl-color-blue ); 
    /*border: 1px solid white; */                       /* 白枠線 */
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_1st );
}

td.td2 {
    color: black;
    background-color: var( --tbl-color-blue ); 
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_2nd );
}

td.td3 {
    color: black;
    /* bgcolor="#CCFFFF" */
    background-color: var( --tbl-color-blue );  /*:  #FFFFCC);*/
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_2nd );
}

td.w10-14 
    table-layout: fixed;
    width: 10;
    height: 14;
}

td.w30 {
    table-layout: fixed;
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_1st );
}

td.w180 {
    table-layout: fixed;
    height: var( --tbl-td_height_top );
    width: var( --tbl-td_width_2nd );
}

a.hintM {
    color: blue;
    font-size: small; 
    font-weight: lighter;
}

a.hintS {
    color: blue;
    font-size: small; 
    font-weight: lighter;
}

a.hintSS {
    color: blue;
    font-size: xx-small; 
    font-weight: lighter;
}

button.hint--right {
  font-size: var( --tbl-font-siz-midium );   /* フォントサイズを調整 */
  margin-left: 20px;
  padding: 3px 3px;                         /* ボタン内の余白を調整 */
  width: auto;                              /* 必要であれば幅を自動に */
  height: auto;                             /* 必要であれば高さを自動に */
}

a.nunder {
    text-decoration: none;
}

<!-- <p><img border="0" src="images/quiz01.jpg" width="256" height="206"><br></p> -->

/* 画像の基本スタイル */
/*
- 幅と高さ: 幅を親要素にフィットさせ、高さは自動で調整します。
- 枠線と丸み: 枠線と角の丸みを追加してデザインを柔らかくします。
- 影: 画像に軽い影を付けることで立体感を出します。
- ホバー効果: マウスオーバー時に画像が少し拡大し、影が強調されます。
*/
img {
    width: 100%;
    height: auto; /* アスペクト比を保持 */
    border: 2px solid #ccc; /* 枠線を追加 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション効果 */
}

/* ホバー時のスタイル変更 */
img:hover {
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4); /* 影を強調 */
}

img:spc {
  display: block;
  border: 0;
  padding: 0;
  margin: 40;
}

button {
    width: 92px;
    height: 20px;
}