#modal-content{
    display:none;
	width:50%;
	margin:1.5em auto 0;
	padding:10px 20px;
	border:2px solid #aaa;
	background:#fff;
	/*追加分*/
	z-index:2;
	/*追加分*/
	position:fixed;
}

#modal-msg{
    display:none;
	width:80%;
	margin:1.5em auto 0;
	padding:0.5rem 0.8rem;
	background:#fff;
	/*追加分*/

}


#modal-overlay{
	z-index:1;
    /* 初期状態: 透明で非表示 */
    opacity: 0;
	display:none;
    /* フェードインアニメーションの設定 */
    transition: opacity 600ms ease-in-out;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}

/* #modal-overlayフェードイン後の状態 JavaScriptでこのスタイル属性を#modal-overlay要素に与える*/
.is-visible {
   opacity: 1 !important ;
  /* displayプロパティはアニメーションの開始直前にJavaScriptで変更 */
  /* transitionでdisplayはアニメーションできないため */
}

p.ans_on_modal {
    margin: 1.5rem auto;
    padding: 0.5rem 0.8rem;
    width:80%;
    background-color: #ffffff;
    font-weight:800;
    font-size:1.2rem;
}

p.ans_on_modal > a {    
    text-decoration: none;
}

p.ans_on_modal > a > .speaker {
    height: 1.9rem;
    width: 1.9rem;
    vertical-align: bottom;
}

.modal-open, #modal-close{
    display: inline-block;
    font-size:0.9rem;
	text-decoration:none;
	margin-left: 5px;
	padding: 0.2rem 0.4rem; 	
	color: #fff;
	background-color: #49a9d4;
	border-radius:5px;
}

#modal-close2{
    display: inline-block;
    width: 80px;
    font-size:0.9rem;
	text-decoration:none;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
	color: #fff;
	background-color: #49a9d4;
	border-radius:5px;
}

/*box-shadow:○px ○px ○px ○px #000;

○部分に数値を指定します。

    ・1番目の値は、水平方向の距離を指定します。
    ・2番目の値は、垂直方向の距離を指定します。
    ・3番目の値は、ぼかし距離です。値が大きいほど、ぼかしが強くなります。
    ・4番目の値は、広がり距離です。正の値を指定すると拡大し、負の値を指定すると縮小します。
    ・最後に影の色を指定します。*/

 
.modal-open:hover,#modal-close:hover, #modal-close2:hover{
	cursor:pointer;
    background-color: #5ccbf6;

}

#exercise_li li p a.modal-open{
	float:right;
	margin-right:10px;
	margin-bottom: 5px;
	
}