@charset "UTF-8";
/* CSS Document */
.date{
	width: 100%;
	height:32px;
	line-height:32px;
	text-align:center;
	font-size:2em;	/** 2022/10/11 ボタンレイアウト変更 upd */
}
.panel .section{
	clear: both;	/** 2022/10/11 ボタンレイアウト変更 add */
	width: 80%;
	height:250px;
	margin: 1em auto 0;	/** 2022/10/11 ボタンレイアウト変更 upd */
}
.panel .section .btn_area{
	width: 40%;
}
.panel .section .msg_panel{
	width: 80%;
	margin: 0 auto;
}
.panel .section .msg_panel .msg_title{
	width: calc(100% - 10px);
	padding: 5px;
}

.panel .section .msg_panel .msg_area{
	min-width: 30em;	/** 2022/10/11 ボタンレイアウト変更 upd */
	height: 8em;	/** 2022/10/11 ボタンレイアウト変更 upd */
	font-size:2em;	/** 2022/10/11 ボタンレイアウト変更 upd */
	background-color: #F2F2F2;
	border:1px solid black;
	padding: 0px 20px;
	text-align: left;
	vertical-align: top;
	overflow: auto;
}
/** 2022/10/11 ボタンレイアウト変更 add s */
span.cl_S {
	color: blue;
}
span.cl_E {
	color: red;
}
.btn_area span.btn {
    font-size: 3rem;
    min-width: 5rem;
    font-weight: 700;
    line-height: 1.5;
/*     background-color: #0000ff; */
    position: relative;
    display: inline-block;
    padding: 2rem 5rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
/*     letter-spacing: 0.5em; */
    color: #ffffff;
    border-radius: 1rem;
    border: 8px double;
    white-space: nowrap;
}
.btn_area span.start {
	background-color: #0000ff;
	border-color: #0000aa;
}
.btn_area span.end {
	background-color: #ff0000;
	border-color: #aa0000;
}
/** 2022/10/11 ボタンレイアウト変更 add e */