.error{ background:#fdd; }
.error + span { background:#fdd !important; }


div.messagebox{ position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,.5); color:#fff; z-index:99;
	display:none; justify-content:center; align-items:center; align-content:center; }
div.messagebox.open{ display:flex; }
div.messagebox>dl{ width:90%; max-width:500px; background:rgba(0,0,0,.7); padding:50px; }
div.messagebox>dl>dt{ text-align: center; font-size:1.5em; margin-bottom:20px; }
div.messagebox>dl>dd ol>li{ display:block; padding:.5em 0 .5em 1.5em; }
div.messagebox>dl>dd ol>li:before{ content:"・"; display:inline-block; width:1em; margin-left:-1.0em; }

div.messagebox>dl>dd>ul{ display:table; width:90%; margin:0 auto; table-layout: fixed; border-spacing:10px; }
div.messagebox>dl>dd>ul>li{ display:table-cell; }


div.messagebox>dl>dd button{ display:block; width:100%; max-width:200px; margin:30px auto 0 auto; height:40px; line-height:40px; border-radius:5px; background:#FFBA00; border:0; color:#000; }



@media screen and (max-width: 768px) {

	div#messagebox>dl{ width:90%; padding:5vw; }
	div#messagebox>dl>dt{ margin-bottom:2vw; }
	div#messagebox>dl>dd button{ max-width:30vw; margin:3vw auto 0 auto; height:6vw; border-radius:.5vw; }
}
@media screen and (max-width: 480px) {

	div#messagebox>dl{ padding:5vw; }
	div#messagebox>dl>dt{ margin-bottom:3vw; }
	div#messagebox>dl>dd button{ max-width:100%; margin:6vw auto 0 auto; height:12vw; border-radius:1vw; }
}