/*----------------------------------------------------
	kanyomitest.php用
----------------------------------------------------*/
#kanyomi .kanji-list{
  display:flex; flex-direction:column;
  gap:6px;
  font-family:system-ui,sans-serif;
}

/* 行は「漢字カード + 2列（読み/使用例）」の3カラム風 */
#kanyomi .kanji-row{
  display:flex; align-items:flex-start;
  gap:12px;
}

#kanyomi .aiueo{
  min-width:2.5em;
  padding:5px; background:#aaccff;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:10px;
  margin:2px 0 0 0;
}
#kanyomi .aiueo_n{
  padding:5px;
  width:49px;
  margin:2px 0 0 0;
}




#kanyomi .no{
  min-width:2.5em;
  padding:5px 11px; background:#aaccff;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:40px;
  margin:2px 0 0 0;
}

#kanyomi .card{
  min-width:2.5em;
  padding:5px 11px; background:#aaccff;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:90px;
  margin:2px 0 0 0;
}

/* 2列：ボタン + 下に可変パネルの縦スタック */
#kanyomi .col{
  flex:1 1 360px;              /* 幅広ボタン用にやや太め */
  max-width:520px;             /* お好みで上限 */
  display:flex; flex-direction:column; gap:8px;
}

/* 幅広ボタン */
#kanyomi .btn{
  appearance:none;
  background:#aaccff; color:#000; cursor:pointer;
  font-size:16px; line-height:1; border-radius:8px;
  padding:12px 16px; width:100%;
  border:0;
}
.btn:active{ transform:translateY(1px); }

/* 折りたたみ器（2種とも同じ仕様） */
#kanyomi .wrap, .wrap2{
  height:0; overflow:hidden; border:2px solid transparent;
  border-radius:8px; background:#fff;
  transition: border-color .25s ease;
}
#kanyomi .wrap.is-open, #kanyomi .wrap2.is-open{
  border-color:#0e3d4b; box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* 中身の出現アニメは“下方向” */
#kanyomi .panel, #kanyomi .panel2{
  padding:12px 14px; font-size:15px; line-height:1.7;
  opacity:0; transform:translateY(-6px);
  transition: opacity .24s ease-out, transform .28s ease-out;
}
#kanyomi .panel.is-open, #kanyomi .panel2.is-open{
  opacity:1; transform:translateY(0);
}


/* アニメ苦手配慮 */
@media (prefers-reduced-motion: reduce){
  #kanyomi .wrap, #kanyomi .wrap2, #kanyomi .panel, #kanyomi .panel2{ transition:none !important; }
}





 /*----------------------------------------------------
	youjiyougotest.php用
----------------------------------------------------*/

#youjiyougo .kanji-list{
  display:flex; flex-direction:column;
  gap:1px;
  font-family:system-ui,sans-serif;
}

/* 行は「漢字カード + 2列（読み/使用例）」の3カラム風 */
#youjiyougo .kanji-row{
  display:flex;
  align-items:flex-start;
    justify-content: space-between;

  gap:6px;
  margin: 4px 0;
  width:930px;
}

#youjiyougo .aiueo{
  min-width:2.5em;
  padding:5px; background:#99fe96;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:10px;
  margin:2px 0 0 0;
}
#youjiyougo .aiueo_n{
  padding:5px;
  width:49px;
  margin:2px 0 0 0;
}

#youjiyougo .youjiyougo_spacer{
	width:140px;
	height:1px;
}



#youjiyougo .no{
  min-width:2.5em;
  padding:5px 11px; background:#99fe96;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:40px;
  margin:2px 0 0 0;
}

#youjiyougo .card{
  min-width:2.5em;
  padding:5px 11px; background:#99fe96;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:150px;
  margin:2px 0 0 0;
}

/* 2列：ボタン + 下に可変パネルの縦スタック */
#youjiyougo .col{
flex: 1 1 400px;   /* 最低幅を広げる（360px → 400px） */
  max-width: 560px;  /* 最大幅も広げる（520px → 560px） */
    display:flex; flex-direction:column; gap:4px;
}

/* 幅広ボタン */
#youjiyougo .btn{
  appearance:none;
  background:#99fe96; color:#000; cursor:pointer;
  font-size:16px; line-height:1; border-radius:8px;
  padding:10px 16px;
  width:560px;
  border:0;
}
#youjiyougo .btn:active{ transform:translateY(1px); }

/* 折りたたみ器（2種とも同じ仕様） */
#youjiyougo .wrap, #youjiyougo .wrap2{
  height:0; overflow:hidden; border:2px solid transparent;
  border-radius:8px; background:#fff;
  transition: border-color .25s ease;
}
#youjiyougo .wrap.is-open, #youjiyougo .wrap2.is-open{
  border-color:#0e3d4b; box-shadow:0 6px 18px rgba(0,0,0,.08);
  width:560px;
  margin:0 0 10px 0;
}

/* 中身の出現アニメは“下方向” */
#youjiyougo .panel,#youjiyougo  .panel2{
  padding:12px 14px; font-size:15px; line-height:1.7;
  opacity:0; transform:translateY(-6px);
  transition: opacity .24s ease-out, transform .28s ease-out;
}
#youjiyougo .panel.is-open, #youjiyougo .panel2.is-open{
  opacity:1; transform:translateY(0);
}


#youjiyougo .panel .shosaibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#youjiyougo .panel .shosaibox .box1{
	width:33.3%;
}

#youjiyougo .panel .shosaibox .box1 .midashi{
 text-align:center;
 font-weight:700;
}


#youjiyougo .panel .shosaibox .box1 .honbun{
 text-align:center;
}

/* アニメ苦手配慮 */
@media (prefers-reduced-motion: reduce){
  #youjiyougo .wrap, .wrap2, #youjiyougo .panel,#youjiyougo  .panel2{ transition:none !important; }
}


#youjiyougo .youjitable{
 width:780px;
}

#youjiyougo .youjitable th{
 padding:10px;
position: sticky;
  top: 0;             /* 上に固定 */
  background: #ffffff; /* 背景を指定して下の行と重なっても見えるように */
  z-index: 1;         /* 他のセルより上に表示 */ 
  border-bottom:1px solid #000000;
  font-size:16px;
 
}

#youjiyougo .midashitable_L{
 width:350px;
 float:left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


#youjiyougo .midashitable{
 width:720px;
 float:right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#youjiyougo .midashitable .one{
	margin:16px 0 0 0;
}
#youjiyougo .midashitable .two{
	line-height:1.4;
}



.frame1{
	border:2px solid #2e75b6;
	padding:10px;
	margin:10px auto;
	width:80%;
	display:block;
}
.frame1 img{
	width:550px;
	margin:0 auto;
	display:block;
}
.frame2 img{
	width:550px;
	margin:0 auto;
	display:block;
}
.frame3 img{
	width:550px;
	margin:0 auto;
	display:block;
}

.frame1 .framemidashibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:10px 0;
}

.frame1 h3{
	font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",sans-serif;
  font-size:19px;
}

.frame2{
	border:2px solid #548235;
	padding:10px;
	margin:10px auto;
	width:80%;
	display:block;
}
.frame2 .framemidashibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:10px 0;
}

.frame2 h3{
	font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",sans-serif;
  font-size:19px;
}



.frame3{
	border:2px solid #666666;
	padding:10px;
	margin:10px auto;
	width:80%;
	display:block;
}
.frame3 .framemidashibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:10px 0;
}

.frame3 h3{
	font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",sans-serif;
  font-size:19px;
}







.tsuzukilink{
	color:#000000;
	font-weight:700;
	margin:40px 20px 10px 0;
	text-align:right;
	font-size:17px;
}



 /*----------------------------------------------------
	hyougaikanjitest.php用
----------------------------------------------------*/
#hyougaikanji .kanji-list{
  display:flex; flex-direction:column;
  gap:1px;
  font-family:system-ui,sans-serif;
}

/* 行は「漢字カード + 2列（読み/使用例）」の3カラム風 */
#hyougaikanji .kanji-row{
  display:flex;
  align-items:flex-start;
    justify-content: space-between;

  gap:6px;
  margin: 4px 0;
  width:930px;
}

#hyougaikanji .aiueo{
  padding:5px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:49px;
  margin:2px 0 0 0;
}
#hyougaikanji .aiueo_n{
  padding:5px;
  width:49px;
  margin:2px 0 0 0;
}

#hyougaikanji .youjiyougo_spacer{
	width:140px;
	height:1px;
}



#hyougaikanji .no{
  min-width:2.5em;
  padding:5px 11px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:40px;
  margin:2px 0 0 0;
}

#hyougaikanji .card{
  min-width:2.5em;
  padding:5px 11px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:150px;
  margin:2px 0 0 0;
}

/* 2列：ボタン + 下に可変パネルの縦スタック */
#hyougaikanji .col{
flex: 1 1 400px;   /* 最低幅を広げる（360px → 400px） */
  max-width: 560px;  /* 最大幅も広げる（520px → 560px） */
    display:flex; flex-direction:column; gap:4px;
}

/* 幅広ボタン */
#hyougaikanji .btn{
  appearance:none;
  background:#e9ebf5; color:#000; cursor:pointer;
  font-size:16px; line-height:1; border-radius:8px;
  padding:10px 16px;
  width:560px;
  border:0;
}
#hyougaikanji .btn:active{ transform:translateY(1px); }

/* 折りたたみ器（2種とも同じ仕様） */
#hyougaikanji .wrap, #hyougaikanji .wrap2{
  height:0; overflow:hidden; border:2px solid transparent;
  border-radius:8px; background:#fff;
  transition: border-color .25s ease;
}
#hyougaikanji .wrap.is-open, #hyougaikanji .wrap2.is-open{
  border-color:#0e3d4b; box-shadow:0 6px 18px rgba(0,0,0,.08);
  width:560px;
  margin:0 0 10px 0;
}

/* 中身の出現アニメは“下方向” */
#hyougaikanji .panel,#hyougaikanji  .panel2{
  padding:12px 14px; font-size:15px; line-height:1.7;
  opacity:0; transform:translateY(-6px);
  transition: opacity .24s ease-out, transform .28s ease-out;
}
#hyougaikanji .panel.is-open, #hyougaikanji .panel2.is-open{
  opacity:1; transform:translateY(0);
}


#hyougaikanji .panel .shosaibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#hyougaikanji .panel .shosaibox .box1{
	width:33.3%;
}

#hyougaikanji .panel .shosaibox .box1 .midashi{
 text-align:center;
 font-weight:700;
}


#hyougaikanji .panel .shosaibox .box1 .honbun{
 text-align:center;
}

/* アニメ苦手配慮 */
@media (prefers-reduced-motion: reduce){
  #hyougaikanji .wrap, .wrap2, #hyougaikanji .panel,#hyougaikanji  .panel2{ transition:none !important; }
}


#hyougaikanji .youjitable{
 width:780px;
}

#hyougaikanji .youjitable th{
 padding:10px;
position: sticky;
  top: 0;             /* 上に固定 */
  background: #ffffff; /* 背景を指定して下の行と重なっても見えるように */
  z-index: 1;         /* 他のセルより上に表示 */ 
  border-bottom:1px solid #000000;
  font-size:16px;
 
}

#hyougaikanji .midashitable_L{
 width:350px;
 float:left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


#hyougaikanji .midashitable{
 width:720px;
 float:right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#hyougaikanji .midashitable .one{
	margin:16px 0 0 0;
}
#hyougaikanji .midashitable .two{
	line-height:1.4;
}



 /*----------------------------------------------------
	新hyougaikanjitest.php用
----------------------------------------------------*/
#hyougaikanjijitai .kanji-list{
  display:flex; flex-direction:column;
  gap:1px;
  font-family:system-ui,sans-serif;
}

/* 行は「漢字カード + 2列（読み/使用例）」の3カラム風 */
#hyougaikanjijitai .kanji-row{
  display:flex;
  align-items:flex-start;
    justify-content: space-between;

  gap:6px;
  margin: 4px 0;
  width:930px;
}

#hyougaikanjijitai .aiueo{
  padding:5px 10px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:49px;
  margin:2px 0 0 0;
}
#hyougaikanjijitai .aiueo_n{
  padding:5px 10px;
  width:49px;
  margin:2px 0 0 0;
}

#hyougaikanjijitai .youjiyougo_spacer{
	width:140px;
	height:1px;
}



#hyougaikanjijitai .no{
  min-width:2.5em;
  padding:5px 11px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:40px;
  margin:2px 0 0 0;
}

#hyougaikanjijitai .card{
  min-width:2.5em;
  padding:5px 9px; background:#e9ebf5;
  line-height:1.4;
  font-size:1.0rem;
  font-weight:600;
  width:240px;
  height:23px;
  margin:2px 0 0 0;
}

#hyougaikanjijitai .card span{
  font-size:0.7rem;
  line-height:1.2;
}


#hyougaikanjijitai .onkun{
  min-width:2.5em;
  padding:5px 11px; background:#e9ebf5;
  line-height:1.2; font-size:18px;
  font-weight:600;
  width:210px;
  height:23px;
  margin:2px 0 0 0;
}


/* 2列：ボタン + 下に可変パネルの縦スタック */
#hyougaikanjijitai .col{
flex: 1 1 400px;   /* 最低幅を広げる（360px → 400px） */
  max-width: 560px;  /* 最大幅も広げる（520px → 560px） */
    display:flex; flex-direction:column; gap:4px;
}

/* 幅広ボタン */
#hyougaikanjijitai .btn{
  appearance:none;
  background:#e9ebf5; color:#000; cursor:pointer;
  font-size:16px; line-height:1; border-radius:8px;
  padding:10px 16px;
  width:410px;
  border:0;
  text-decoration:underline;
}
#hyougaikanjijitai .btn:active{ transform:translateY(1px); }

/* 折りたたみ器（2種とも同じ仕様） */
#hyougaikanjijitai .wrap, #hyougaikanjijitai .wrap2{
  height:0; overflow:hidden; border:2px solid transparent;
  border-radius:8px; background:#fff;
  transition: border-color .25s ease;
}
#hyougaikanjijitai .wrap.is-open, #hyougaikanjijitai .wrap2.is-open{
  border-color:#0e3d4b; box-shadow:0 6px 18px rgba(0,0,0,.08);
  width:400px;
  margin:0 0 10px 4px;
}

/* 中身の出現アニメは“下方向” */
#hyougaikanjijitai .panel,#hyougaikanjijitai  .panel2{
  padding:12px 14px; font-size:15px; line-height:1.7;
  opacity:0; transform:translateY(-6px);
  transition: opacity .24s ease-out, transform .28s ease-out;
}
#hyougaikanjijitai .panel.is-open, #hyougaikanjijitai .panel2.is-open{
  opacity:1; transform:translateY(0);
}


#hyougaikanjijitai .panel .shosaibox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#hyougaikanjijitai .panel .shosaibox .box1{
	width:33.3%;
}

#hyougaikanjijitai .panel .shosaibox .box1 .midashi{
 text-align:center;
 font-weight:700;
}


#hyougaikanjijitai .panel .shosaibox .box1 .honbun{
 text-align:center;
}

/* アニメ苦手配慮 */
@media (prefers-reduced-motion: reduce){
  #hyougaikanjijitai .wrap, .wrap2, #hyougaikanjijitai .panel,#hyougaikanjijitai  .panel2{ transition:none !important; }
}


#hyougaikanjijitai .youjitable{
 width:800px;
}

#hyougaikanjijitai .youjitable th{
 padding:10px 0;
position: sticky;
  top: 0;             /* 上に固定 */
  background: #ffffff; /* 背景を指定して下の行と重なっても見えるように */
  z-index: 1;         /* 他のセルより上に表示 */ 
  border-bottom:1px solid #000000;
  font-size:16px;
 
}

#hyougaikanjijitai .midashitable_L{
 width:350px;
 float:left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


#hyougaikanjijitai .midashitable{
 width:820px;
 float:left;
}

#hyougaikanjijitai .midashitable .one{
	margin:16px 0 0 0;
 	float:left;
 	width:40px;
}
#hyougaikanjijitai .midashitable .two{
	margin:16px 0 0 0;
 	float:left;
 	width:73px;
  font-size:15px;
}
#hyougaikanjijitai .midashitable .three{
	margin:16px 0 0 0;
 	float:left;
 	width:103px;
  font-size:15px;

}
#hyougaikanjijitai .midashitable .bikou{
	margin:16px 0 0 0;
 	float:left;
 	width:280px;
  font-size:15px;

}
.yomikomidashi{
  font-size:20px;
  font-weight:700;
  margin:20px 0 0 60px;

}
.yomikatahonbun{
  font-size:17px;
  line-height:1.5;
  margin:0 60px;

}