/*基本色
#4682b4（steelblue）（元は　#046cf4，#006df0 ほぼ同じ色）
リンクは　#0000ff（blue）
*/

a:normal{color:#0000ff;text-decoration:none;font-weight:normal;}
a:visited{color:#0000ff;text-decoration:none;font-weight:normal;}
a:link{color:#0000ff;text-decoration:none;font-weight:normal;}
a:hover{color:red;text-decoration:none;}
a:active{color:red;text-decoration:none;}

h1 a:normal{color:white;text-decoration:none;font-weight:normal;}
h1 a:visited{color:white;text-decoration:none;font-weight:normal;}
h1 a:link{color:white;text-decoration:none;font-weight:normal;}
h1 a:hover{color:red;text-decoration:none;}
h1 a:active{color:red;text-decoration:none;}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



a.word{
	color:black;
	font-weight:bold;
}
a.button{
	color:white;
	background-color:#4682b4;
	border-radius:8px;
	display:inline-block;
	margin:0;
	padding:0 8px 0 8px;
}
a.button:hover {
	color:red;
}
html {
    width:100%;
    height:100vh; 
}
body {
	margin:0;
	text-align:center;/* for IE */
    font-family: arial !important;/* for iOS */
    width:100%;
    height:100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}
header {
	text-align:left;		/* for IE */
	background-color:#4682b4;
	height:40px;
}
header h1 {
	margin:0px;
	margin-left:10px;
	padding:0px;
	display:inline-block;
	font-size:20pt;
}
main#playermain{
	margin:auto;
	text-align:center; 
	white-space: nowrap;
}
main div.content{
	vertical-align:top;
    width:100%;
    height:100vh;/*最重要　スクロールバーの天地幅*/
}
div#json{
	white-space: normal;
	text-align:left;
	max-height:100%;  
	overflow-x:hidden; 
/*	overflow-y:scroll; */  
	line-height:160%;
	padding:2px;
/*	max-height:640px;*/	/* for IE */
        width:; /* 指定しないこと。元は99%。指定すると下にスクロールバーが出る。指定しないほうが横のスクロールバーもきれい。 */

}
div#json img.raise-volume{
	height:20px;
}
/*main aside{
	width:600px;
	display:inline-block;
	height:100%;    */
/*	min-height:640px;*/	/* for IE */
/*	text-align:left;
}
main aside ul{
	display:table;
	list-style-type: none;
	list-style-position: inside;
	margin:0px;
	padding:0px;
}
main aside ul li{
	display:inline-block;
	margin:2px;
	padding:8px;
	background-color:#eee;
	text-align:center;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-left:solid 1px gray;
	border-right:solid 1px gray;
	border-top:solid 1px gray;
	font-size:12pt;
	color:#4682b4;
	font-weight:bold;
}
main aside section{
	background-color:white;
	width:100%;
	height:100%;
	font-size:80%;
	overflow-y:scroll;
	white-space: normal;
	padding-right: 8px;
}*/

/*	right.php	*/
/*
main aside article{margin-bottom:24px;}
main aside article:last-child{margin-bottom:800px;}
main aside article div{margin-bottom:16px;} */

#panel{
	border-radius:8px;
	color:white;
	background-color:#0000ff;
	background-repeat:no-repeat;
	position:fixed;
	bottom: 10px; /*コントロールパネルの下からの位置*/
	left: calc(50% - 187px);
	width:375px;
	height:80px; 
}
#panel #configbutton{
    display:inline-block;
	position:absolute;
	left:20px;top:20px;
}

#panel #btproblem{
    display:inline-block;
    position:absolute;
    left:73px; top:22px;
    border:solid 3px white;
    border-radius: 0.5rem;
    padding:3px 3px 3px 3px;
    font-weight: bold; 
}
		/*
		#panel img{
			height:40px;
		}
		#panel #repeaton{
			margin-top:20px;
			margin-right:8px;
			float:right;
			display:inline-block;
		}
		#panel #repeatoff{
			margin-top:20px;
			margin-right:8px;
			float:right;
			display:none;
		}
		*/
#panel #playbutton{
	display:inline-block;
    position:absolute;
	left:280px;top:20px;
}
#panel #pausebutton{
    position:absolute;
	left:280px;top:20px;
	display:none;
}
#panel #btn_time{
    display:inline-block;
    position:absolute;
    left:42%;top:20%;
    color:white;
}
#panel #toggle_as{
    display:inline-block;
    position:absolute;
    left:148px;top:45px;
    background-color: white;
    color:#0000ff;
    font-size:13px;
    border-radius:4px;
    padding:4px 0px 2px 0px;
    width: 107px !important; 
    text-align: center; /* 左右方向のセンター配置 */
}
div#json div{
	padding:8px 0px 8px 0px;/* ルビ訳と日本語訳全体の余白  */
}
div#waiting{/* 自動静止時のタイム表示  */
	margin-top:0px;/* 元は2px  */
	font-size:0pt;/* 元は12pt  */
}
/*div#wordPopup{
	display:none;
	position:absolute;
	margin:0px;
	line-height:24px;
	background-color:whitesmoke;
	border-radius:4px;
	border:solid 1px gray;
	opacity:0.9;
	filter: alpha(opacity=90);
	max-width:320px;
	text-align:left;
	padding:8px;
	white-space: normal;
}*/

/* ■日本語を左にした場合のフォントサイズ  */
/* ■ルビの付く英文  */
ruby {
    display: inline-table;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: none;
white-space: pre-line; /* ■nowrapにすると長い時にはみ出してしまう */
    text-indent: 0;
    text-decoration: inherit;
text-align: ;/* ■英語よりルビが長い時の英語の配置。元はcenter */
    font-size: 20.1px !important;
    color: #006400;
    line-height: 105% !important; /* ■単語とルビの間  */
    margin-bottom: 0.35em !important;/* ■ルビの下の空き  */
}














@media (min-width: 851px) and (max-width: 1200px) {
ruby {
    font-size: 18px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
@media (min-width: 1px) and (max-width: 850px) {
ruby {
    font-size: 17px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
/* ■アイフォン（サファリ）対応  */
_::-webkit-full-page-media, _:future, :root 
@media (min-width: 1px) and (max-width: 1200px) {
ruby {
    letter-spacing: -0.2m;/* 文字間詰める　元は-0.4  */
}
}

/* ■ルビ  */
ruby>rt {
    position: relative;
    top: 0px;
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0.125em;
    border: none;
    font: inherit;
    color: #4682b4;
    font-size: 12px !important;
    line-height: 120% !important;
    font-weight: normal;
}
@media (min-width: 851px) and (max-width: 1200px) {
ruby>rt {
    font-size: 11.6px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
@media (min-width: 1px) and (max-width: 850px) {
ruby>rt {
    font-size: 11px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
/* ■アイフォン（サファリ）対応  */
_::-webkit-full-page-media, _:future, :root 
@media (min-width: 1px) and (max-width: 1200px) {
ruby>rt {
    letter-spacing: -0.2m;/* 文字間詰める　元は-0.4  */
}
}

/* ■ルビのない英文  */
div#json {
    background-color: white;
    white-space: normal;
    font-family: arial;
    font-size: 20.1px !important;
}
@media (min-width: 851px) and (max-width: 1200px) {
div#json {
    font-size: 18px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
@media (min-width: 1px) and (max-width: 850px) {
div#json {
    font-size: 17px !important;
    letter-spacing: 0m;/* 文字間詰める　元は-0.2  */
}
}
/* ■アイフォン（サファリ）対応  */
_::-webkit-full-page-media, _:future, :root 
@media (min-width: 1px) and (max-width: 1200px) {
div#json {
    letter-spacing: -0.2m;/* 文字間詰める　元は-0.4  */
}
}




/*コメント*/
article.yoko span.jpline .commentb{		
font-size: 0.7em;
font-weight:bold;
color: #4682b4;
}

/* ■日本語を左にした場合のフォントサイズ ここまで */





span.slash, span.slashb{
    color: blue;
    font-weight: bold;
    font-size:1.1em ;	
}
span.kagi{
    color: red;
    font-weight: bold;
    font-size:1.1em ;	
}



/*■文構造なし時のスラッシュ非表示*/
span.slashn{
    display: none;
}

div span.title{
    max-width:1400px;
    overflow-wrap: break-word;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
    margin-bottom:20px;
    position:relative;
   /* height: 20px;*/
    top:0px; left:0px;
    font-size:150%;
}
div span.title b{
    margin-left: 5px;
    margin-right: 5px;
}
div.accshow
{
text-align: justify;/* ワードのようにきれいに表示  */
}


img.play.prev{
    display:block;
    content:url(https://www.eevideo.net/main/textplayer/sound-blue.gif);
    position:relative;
    margin-left:auto;
    margin-right:8px;
    margin-bottom:5px;
    width:20pt;
    height:15pt;
}

img.play.now{
    display:block;
    content:url(https://www.eevideo.net/main/textplayer/sound-red.gif);
    position:relative;
    margin-left:auto;
    margin-right:8px;
    margin-bottom:5px;
    width:20pt;
    height:15pt;
}

div.yoko{
    max-width:1500px;
    width:98%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    top:10px;left:0px;
    height: 22px;
    border-radius: 5px;
    background-color:#0000ff;
    color: white;
    font-size: 16.2px !important;
}
@media (min-width: 1px) and (max-width: 950px) {	
div.yoko{	
    width:100%;	
}}


div.yoko span.left{
    display:block;
    position:relative;
    left:3%; top:-5px; 
    vertical-align: middle;
}
@media (min-width: 1201px) and (max-width: 1530px) {
div.yoko span.left{
	left:2%; 
}
}
@media (min-width: 951px) and (max-width: 1200px) {
div.yoko span.left{
top:-2px;
	left:1%; 
}
}
@media (min-width: 1px) and (max-width: 950px) {
div.yoko span.left{
top:-2px;
		left:1%; 
}
}

div.yoko span.right{
    display:block;
    position:relative;
   left:calc(50% - 5px); top:-37px;
    vertical-align: middle;
}
@media (min-width: 1201px) and (max-width: 1300px) {
div.yoko span.right{
left:calc(45% + 35px);
}
}
@media (min-width: 951px) and (max-width: 1200px) {
div.yoko span.right{
top:-31px;
left:calc(45% + 35px);
}
}
@media (min-width: 851px) and (max-width: 950px) {
div.yoko span.right{
top:-30px;
left:calc(40% + 35px);
}
}
@media (min-width: 1px) and (max-width: 850px) {
div.yoko span.right{
top:-29px;
left:calc(40% + 35px);
}
}




div.rubiyaku{
    width:100%;
    height:100%;
    margin-top:20px;
    margin-bottom:90px;/* テキストの下部の空き  */
}

article.yoko{
    line-height: 100% !important;
    max-width:1400px;
    width:94%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    margin-bottom: 0px;/* 元は10px */
    display: grid;
    grid-template-columns: 20px calc(47% - 40px)  40px calc(53% - 40px)  60px;
    grid-template-rows:  fr;
    padding: 0px 5px 0px 5px;
    max-height:100%;
}



article.yoko span.num {
    display:inline-block;
    grid-column: 3;
    grid-row: 1;
    align-self: top;
    justify-self: center;
    color:red;
	margin-top: 8px;
}


@media (min-width: 700px) and (max-width: 950px) {
article.yoko span.enline {
    width:96%;
}}
@media (min-width: 600px) and (max-width: 699px) {
article.yoko span.enline {
    width:95%;
}}
@media (min-width: 500px) and (max-width: 599px) {
article.yoko span.enline {
    width:93%;
}}
@media (min-width: 400px) and (max-width: 499px) {
article.yoko span.enline {
    width:90%;
}}
@media (min-width: 1px) and (max-width: 399px) {
article.yoko span.enline {
    width:88%;
}}



article.yoko span.jpline {
    display:inline-block;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding:8px 0px 0px 0px;
}

div.tate{
    max-width:1100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    top:20px;left:0%;
    height: 22px;
    border-radius: 5px;
    background-color:#0000ff;
    color: white;
    font-size: 16.2px !important;
}
@media (min-width: 1150px) {
  div.tate {
    left: -10px;
  }
}


div.tate span.left{
    display:inline-block;
    position:relative;
    left:-500px; top:20%;/* 「日本語訳」マイナスで非表示に  */
    vertical-align: middle;
}
div.tate span.right{
    display:inline-block;
    position:relative;
    left:-30px; top:-7px;
    vertical-align: middle;
}
@media (min-width: 1001px) and (max-width: 1200px) {
div.tate span.right{
top:-6px;
}
}
@media (min-width: 801px) and (max-width: 1000px) {
div.tate span.right{
top:-5px;
}
}
@media (min-width: 501px) and (max-width: 800px) {
div.tate span.right{
top:-4px;
}
}
@media (min-width: 1px) and (max-width: 500px) {
div.tate span.right{
top:-3px;
}
}









/* ■日本語を下に表示した時のフォントサイズ  */
article.tate{

    max-width:1100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;/* 元は10px */
    position:relative;
    display: grid;
    grid-template-columns: 4% 30px 88% ;
    grid-template-rows: fr  fr;
    padding:5px;
            font-size: 20.1px !important;
}

article.tate span.enline{
	    line-height: 160% !important;
    display:inline-block;
    grid-column:3;
    grid-row:1;
    justify-self: start;
        background-color: #E3E9E5; /* 元は#E3E7E9  */
        border-radius:4px;
            font-size: 20.1px !important;
}
article.tate span.enline ruby{
	    line-height: 105% !important;
    margin-bottom: 0em !important;
}







article.tate span.jpline{
    display:inline-block;
    grid-column:3;
    grid-row:2;
    justify-self: start;
            font-size: 20.1px !important;
	        padding:3px 25px 4px 8px;
}
article.tate ruby {
            font-size: 20.1px !important;
     line-height: 105% !important; /* ■単語とルビの間  */
}

article.tate ruby>rt {
            font-size: 12px !important;
}

article.tate {
    line-height: normal; /* 親要素の line-height をリセット */
}
article.tate .commentb, .commenta{
font-size: 0.7em !important;
font-weight:bold;
color: #4682b4;
line-height: 1.0 !important;
}



article.tate span.jpline ruby{
	    line-height: 100% !important;
    margin-bottom: 1px !important;
}
article.tate span.jpline ruby rt{
line-height: 135% !important;
}


/* ■訳を下に表示した時のフォントサイズ　ここまで  */












article.tate span.num{
    display:inline-block;
    grid-column:2;
    grid-row:1;
    align-self: top;
    color:red;
		margin-top: 4px;
}
   
div#config{
	text-align: left;
	line-height: 1.2em;
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:;
}
div#config form{
	border-radius:8px;
	border:solid 4px #4682b4;
	width:520px;
	max-width:90%;
	margin:30px auto auto auto;
	padding:8px;
	background-color:white;
}
div#config input[type="button"]{
	color:white;
	background-color:#4682b4;
	border-radius:4px;
	border:none;
	padding:8px 10px 8px 10px;
	margin:8px 0px 0px 8px;
}

/*a??e¨-aR?c”≫e?￠*/
#config .section {
	display: block;
	padding-top:2px;
	padding-bottom:2px;
	text-indent: 6px;
	background-color: #4682b4;
	color: #ffffff;
	font-size: 0.9em;
}

#config table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

#config table>tr,td {
	border: 1px solid #4682b4;
	padding: 0;	
}

#config input[type=radio],
#config input[type=checkbox] {
	display:none;
}

#config label {
	display:inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	width: 100%; 
	height: 100%;
	font-size: 0.9em;
}

#config input[type=radio]:checked + label,
#config input[type=checkbox]:checked + label {
	background-color: #c2d4f2;
}

#config input[type=button] {
	background-color: #4682b4;
	border:1px solid #4682b4;
	color: #ffffff;
}

#config .notice {
	font-weight: bold;
}


@media (min-width: 851px) and (max-width: 1200px) {
.commentb, .commenta {
    font-size: 0.77em;/* 通常は0.8em  */
    line-height: 14.0pt;/* 通常は15pt  */
}
}
@media (min-width: 1px) and (max-width: 850px) {
.commentb, .commenta {
    font-size: 0.74em;
    line-height: 13.5pt;
}
}

/*日本語訳部分の[]*/	
.brackets{	
color: red;	
font-weight:bold;	
font-size: ;	/* 指定しない  */
}	
/*ルビ訳部分の[]*/	
.bracketsb{	
color: red;	
font-weight:bold;	
font-size:1.2em ;
}	






.gazo {
  width: 100%;
  max-width:600px;
  border-radius: 5px;
  margin-top:-10px;
  margin-bottom:10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.test {	
width: 100%;	
max-width:600px;	
border-radius: 2px;	
margin-top:-10px;	
margin-bottom:10px;	
display: block;	
margin-left: auto;	
margin-right: auto;	
}
.test2 {
  width: 70%;
  max-width:350px;
  border-radius: 2px;
  margin-top:-10px;
  margin-bottom:10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.test3 {
  width: 60%;
  max-width:200px;
  border-radius: 2px;
  margin-top:-10px;
  margin-bottom:10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 設問 ポップアップ表示の体裁  */

#problems {
    display:none;
    position:absolute;
    right:calc(50% + 60px);top:2%;
    width:40% !important;
    max-width:550px;
    zindex:1;
    background-color:white;
}

div.pcont {
  width:%;/* 指定しないこと */
  max-width:850px;
  height:;/* 指定しないこと */
  max-height:650px !important;

  margin: 0 0 0 auto; /* ポップアップのセンター寄せ */
  background-color: #D1C1A5;
  border-radius: 5px;
  border: 10px solid #D1C1A5;
  padding: 0px;

 /* 以下スクロールバー非表示のため */
  overflow-y: scroll;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}
.pcont::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}

div.pcont{
    width:100%;
    height: 80vh;/* 最大天地80% */
    max-height:650px;/* 最大天地650px */
    overflow-y:scroll;
    white-space:normal;
    text-align:left;
}

/* 行間詰め＋2行目以降を1文字下げ  */
p.indent {
  width:95%;
  margin:0;
  padding-left:1em;
  text-indent:-1em;
}





 /* 以下個々の端末対応 */
@media (min-width: 1px) and (max-width: 500px) {
#problems {width:40%;}
div.pcont {font-size: 13px;}
}
@media (min-width: 501px) and (max-width: 650px) {
#problems {width:41%;}
div.pcont {font-size: 13px;}
}
@media (min-width: 651px) and (max-width: 800px) {
#problems {width:42%;}
div.pcont {font-size: 13px;}
}
@media (min-width: 801px) and (max-width: 900px) {
#problems {width:42.5%;}
div.pcont {font-size: 14px;}
}
@media (min-width: 901px) and (max-width: 1000px) {
#problems {width:43%;}
div.pcont {font-size: 17px;}
}
@media (min-width: 1001px) and (max-width: 1175px) {
#problems {width:43.5%;}
}
@media (min-width: 1175px) and (max-width: 1350px) {
#problems {width:44%;}
}
@media (min-width: 1351px) and (max-width: 1500px) {
#problems {width:45%;}
}
@media (min-width: 1501px) and (max-width: 2000px) {
#problems {width:46%;}
}


 /* 画像の右回り込み（設問部分） */
mawarikomi{
float: left;
margin: 0 5px 5px 0;
}
/*800px以下で回り込み解除*/
@media screen and (max-width: 850px) {
mawarikomi { float : none ; display:block;  text-align:center }
}
 /* 通常の設問の画像 */
.setumon{
max-width:100%;
}

 /* ■設問をドラッグで移動可能に（class名：pcont drag-and-drop） 
参考ページ：https://q-az.net/elements-drag-and-drop/*/
.drag-and-drop {
    cursor: move;
    position: absolute;
    z-index: 1000;
min-height: 50px !important;
max-height: 60vw !important;
height: auto !important;
}

.drag {
    z-index: 1001;
}


/* ■新機能　オンマウス辞書 */
/* ■新機能　オンマウス辞書 */
.mouse { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 0px; /* 左右の空き 元は5px SP版は2px */
  font-size: px;
  color: #006400;
  left: 0%;
  right: 0%;
  line-height: 1em;
}

.description { /* ツールチップのスタイル */
  width: auto; /* 内容に応じて自動調整 */
  position: absolute;
  left: 50%;
  bottom: 100%; /* グラデーションありは80等 */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px 3px;
  border-radius: 3px; /* 角の丸み */
  background-color: #006400;
  font-size: 90%;
  color: #fff;
  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
  font-weight: normal;
  white-space: normal;       /* テキストを自動で折り返す */
  overflow-wrap: break-word; /* 長い単語を途中で折り返す */
}

.mouse:hover .description { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1.0; /* 不透明度を70％に */
}






/* ■iphone,ipad,androidで鬱陶しい規定の辞書などを表示させないため */
/* iPhoneサファリ対策  */
_::-webkit-full-page-media, _:future, :root 
p,img,ul,html,ol,body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* タブレット端末対策 */
@media screen and (min-width: 1px) and (max-width: 979px) {
p,img,ul,html,ol,body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}　

/* 設問部分　行間詰め＋2行目以降を1文字下げ  */
p.indent {
margin:0;
		padding-left:1em;
	text-indent:-1em;
}

u {
text-decoration: none;
/* background: linear-gradient(transparent 80%, #ffff99 0%);*/
}








/* ■新機能　文法ポップアップ */
.mouse2,.mouse3 { /* 補足説明するテキストのスタイル */
background: linear-gradient(transparent 0%, #add8e6 0%);/* 元は 50%，yellow 50% */
  position: relative;
  cursor: pointer;
  padding: 3 3px;/* 左右の空き　元は5px SP版は2px */
  font-size: px;
  left: 0%;
  right: 0%;
  line-height : 1em;
  padding: 0px 2px 2px 2px;
  bottom: 2px;
  border-radius: 3px;
  white-space: nowrap;
  margin: 0px 1px;
}

.mouse3 { /* 補足説明するテキストのスタイル */
  background: linear-gradient(transparent 70%, #add8e6 0%);/* 元は30%,90% */
}
/* 文法解説(赤) */
.mouse2.r {
  background: linear-gradient(transparent 0%, #f0bbfa 0%) !important;
}
/* 文法解説－be動詞(赤) */
.mouse3.r{
  background: linear-gradient(transparent 70%, #f0bbfa 0%);/* 元は30%,90% */
}

.description2,.description3 { /* ツールチップのスタイル */
  width: 190px; /* 横幅 */
  position: absolute;
  left: 100px; /* ■重要：センターは50%，左揃えは100px */
  bottom: 100%; /* グラデーションありは80等 */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px 2px 6px 6px;
  border-radius: 3px; /* 角の丸み */
  background-color: #5593BC;
  font-size: 14px;
  color: #fff;
  text-align: ;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
  font-weight: normal;
  white-space: normal;
}
/* ■縦表示ではセンター */
article[id^="en"].tate span.jpline .description2,
article[id^="en"].tate span.jpline .description3
{
  left: 50%;
}

.mouse3 .description2 {
background-color: gray; /元は*#447596;*/
}

.description2 a {
  color: #FFEFCF;
	word-break:keep-all;
        font-weight:bold;
	border-bottom: dotted 2px ;
}
.description2 a:hover {
	color:red;
}
.mouse2:hover .description2, .mouse3:hover .description2  { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を70％に */
}
.description2 b { /* 見出しの太字部分 */
  color: #FFEFCF;
	word-break:keep-all;
font-weight:bold;
}

/* ルビ訳側の <strong> にマーカー */
span.enline strong {
  background: linear-gradient(transparent 70%, #fac61e 0%);/* 元は30%,90% */
  font-weight: inherit;
  width: 100px;
  height: 100px;
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  padding: 0px 2px;
  border-radius: 2px;
}
/* マーカーの右側を短く 
span.enline strong:after {   
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #e3e9e5;
}
*/



/*■折りたたみメニュー-----------------------------------------------
参考ページhttps://saruwakakun.com/html-css/reference/accordion */
/*ボックス全体*/
.accbox {
    margin:0em 1em;
    padding: 0em;
    max-width: ;
	font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
}
/*ラベル*/
.accbox label {
    display: block;
    margin: px;
    padding : 0px 0px;
    color: #0000ff;
    font-size: 17px;
    font-weight: bold;
    background: white;
    cursor :pointer;
    transition: all 0.5s;
    border-radius: 10px;
}
/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}
/*クリック時にアイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}
/*ラベルホバー時*/
.accbox label:hover {
    background :;
    color: red;
}
/*チェックは隠す*/
.accbox input {
    display: none;
}
/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0.3em 0.5em !important;
    overflow: hidden;
    opacity: 0;
    transition: 1s;
	border-radius: 5px;
}
/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: white;
    opacity: 1;
}
.accbox .accshow p {
    margin: 15px 10px}
/*■折りたたみメニュー-------------------------------------------ここまで */


/*■タイトルとバーの太字指定 */
.left { font-weight: bolder;}
.right {font-weight: bolder;}
/*.title {font-weight: bold;}*/



/*日本語訳の英文　下も要変更　黒は#000000,緑は#006400*/
span.jpline ruby {	
color: #006400 !important;
}
/*日本語訳部分の英文(訳が付かない部分に反映)*/	
.jpline{	
color: #006400;	
font-size: ;	
}


span.commenta {
font-weight:bold;
font-size:19px;
}

/*イタリック*/
i {
    font-family: "Times New Roman", Times, serif;
}
.description2,.description3 {
    font-family: arial !important;/* for iOS */
}

/* 辞書と文法解説のポップアップを上げる（スマートフォン＋タブレット） */
@media screen and (max-width: 767px) {
  .description {
    margin-bottom: 30px !important;
  }
  .description2 {
    margin-bottom: 40px !important;
  }
}

/*■英文解釈の下線*/	
span.enline u, span.jpline u{
  color: inherit;
  border-bottom: #4682b4 dotted 2px;
  word-break: keep-all;
}
/*下線の部分 ルビ訳を少し下げる*/	
ruby>rt {
  position: relative;
  top: 2px;
}

/* ■オンマウスの適用範囲の拡大 
/* オンマウスの範囲を拡張するための擬似要素
以下があるとポップアップがずれる。
.mouse:before, .mouse2:before {
  content: "";
position: relative;
  top: -50px;
  left: 0;
  right: 0;
  height: 50px;
  background: transparent; 
  pointer-events: none; 
}
.mouse:hover:before, .mouse2:hover:before {
  pointer-events: auto; 
}
 */







/* タテ表示時の画像の周りを常に白く */
article.tate span.picture {
    grid-column: 3;
    grid-row: 0;
    width: 95%;
    padding: 24px 5px 34px 8px;
    background-color: white; 
    box-shadow: 
        50px 0 0 0 white,   /* 右 */
        -70px 0 0 0 white,  /* 左 */
        0 10px 0 0 white,   /* 下 */
        0 0px 0 0 white,  /* 上 */
        50px 10px 0 0 white,  /* 右下 */
        -70px 10px 0 0 white; /* 左下 */
}
/* ヨコ表示時の画像の周りを常に白く */
article.yoko span.picture{
    grid-column: 4;
    grid-row: 0;
    width: 100%;
    padding:24px 0px 25px 3px;
    background-color: white; 
    box-shadow: 
        50px 0 0 0 white,   /* 右 */
        -700px 0 0 0 white,  /* 左 */
        0 10px 0 0 white,   /* 下 */
        0 0px 0 0 white,  /* 上 */
        50px 10px 0 0 white,  /* 右下 */
        -80px 10px 0 0 white, /* 左下 */
        -80px -0px 0 0 white; /* 左上 */
}
@media (max-width: 1300px) {
    article.yoko span.picture {
        box-shadow: 
        50px 0 0 0 white,   /* 右 */
        -700px 0 0 0 white,  /* 左 */
        0 10px 0 0 white,   /* 下 */
        0 0px 0 0 white,  /* 上 */
        50px 10px 0 0 white,  /* 右下 */
        -80px 10px 0 0 white, /* 左下 */
        -300px -0px 0 0 white; /* 左上 */
    }
}
@media (max-width: 600px) {
    article.yoko span.picture {
        box-shadow: 
        50px 0 0 0 white,   /* 右 */
        -250px 0 0 0 white,  /* 左 */
        0 10px 0 0 white,   /* 下 */
        0 0px 0 0 white,  /* 上 */
        50px 10px 0 0 white,  /* 右下 */
        -80px 10px 0 0 white, /* 左下 */
        -100px -0px 0 0 white; /* 左上 */
    }
}
@media (max-width: 330px) {
    article.yoko span.picture {
        box-shadow: 
        50px 0 0 0 white,   /* 右 */
        -150px 0 0 0 white,  /* 左 */
        0 10px 0 0 white,   /* 下 */
        0 0px 0 0 white,  /* 上 */
        50px 10px 0 0 white,  /* 右下 */
        -80px 10px 0 0 white, /* 左下 */
        -100px -0px 0 0 white; /* 左上 */
    }
}

span.mouse2 {
  padding-left: 3px; 
  padding-right: 3px; 
}
span.mouse, span.mouse2 {
  white-space: nowrap;/* 途中で改行しない */
}

span.enline {
    width:95%;
    padding:4px 10px 4px 10px;
    word-spacing: 0.2em; /* 半角スペースを広げる */
    text-align: justify;/* ワードのようにきれいに表示  */
}
article.yoko span.enline {
    display:inline-block;
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
width: calc(100% - 27px);
	margin:3px;/* バックの黄色い部分  */
        padding:0px 12px 0px 12px;
        background-color: #E3E9E5; /* 元は#E3E7E9  */
        border-radius:4px;
	line-height: 160% !important;
}

div.tate, div.yoko{
    background-color:#006400;
}


/* 問題ボタン */
#btproblem {
    width: 50px;
    height: 29px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    padding: 0;
    display: inline-block;
	font-weight: normal !important;
}



/*「このページを印刷」ボタン */
.print-button {
  color: white;
  background-color: #4682b4;
  border-radius: 4px;
  border: none;
  padding: 2px 10px;
  margin: 8px 5px 0 8px;
	font-size:13px;
}



/* 文法解説ポップアップ */
.mouse3 .description2 {
    text-align: justify;/* ワードのようにきれいに表示  */
	padding: 6px 5px !important;
}
.mouse2 .description2 {
    text-align: justify;/* ワードのようにきれいに表示  */
	padding: 6px 5px !important;
}

/* 日本語訳の行間 */
span.jpline ruby{
line-height: 130% !important;

}
span.jpline ruby>rt {
    top: 0px !important; 
    line-height:100% !important; 
}



























/* 画像の2重表示を防止 */
.enline:has(:not(img)) img {
  display: none;
}
/* 破線を追加 */
.mouse.r{
    border-bottom: 1px dotted #006400;
}



/* 通常のルビ訳 */
.description { 
width: 100px ; 
left: 50%; 
font-size: 70%;
padding: 3px;
background-color: gray ;
word-wrap: break-word; /* ← 単語が長くても折り返す */
overflow-wrap: break-word; /* ← modernブラウザ向け */
}
/* ポップアップ（訳＋学習段階） */
.mouse.r .description.A{
width: 120px ; 
background-color: green;
white-space: normal; /* 改行を許可 */
}
/* ポップアップ（学習段階のみ） */
.mouse.r .description.B {
background-color: green;
width: 60px !important;
left: 50%; 
}


/* スマホ向け（幅768px以下） */
@media screen and (max-width: 768px) {
.mouse.r .description.A {
width: ;
left: ;
}
.mouse.r .description.B {
width: ;
left: ;
}
}



/* 「未」「済」の体裁 */
.status-word {
color: green;
background: white;
border: none;
border-radius: 5px; /* pill */
font-weight: bold; /* ← 太字 */
margin-left: 10px; /* ← 左だけ余白 */
		  font-size: 80%;
}
ruby .status-word {
margin-left: 0px;
}




/* 英語とルビの間隔(中高ダブりのルビがずれるため，全体修正) */
article.yoko span.enline {
ruby>rt {
  position: relative;
  top: -2px;
}
ruby:not(:has(ruby)) > rt:last-child {
  position: relative;
  top: 4px;
}
}