@charset "UTF-8";

/********** ↓共通↓ **********/
/* ↓ラジオボタン */
.radio {
	position: relative;
}

.radio_inline {
	display: inline-block;
}

.radio input[type="radio"] {
	position: absolute;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

.radio input[type="radio"]+label {
	display: inline-block;
	padding: 4px 4px 4px 35px;
	cursor: pointer;
	height: 26px;
	line-height: 26px;
}

.radio input[type="radio"]+label::before {
	content: '';
	display: inline-block;
	width: 26px;
	height:26px;
	border: 4px solid #26d3c0;
	border-radius: 18px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
}

.radio input[type="radio"]:checked+label::after {
	content: '';
	display: inline-block;
	width: 10px;
	height:10px;
	border: 1px solid #26d3c0;
	border-radius: 8px;
	background-color: #26d3c0;
	position: absolute;
	left: 11px;
	top: 11px;
}

/** （ラジオ）使用不可 */
.radio input[type="radio"]:disabled {
	cursor: default;
}

.radio input[type="radio"]:disabled+label,
.radio input[type="radio"]:disabled+label::before,
.radio input[type="radio"]:disabled+label::after {
	cursor: default;
	color: gray;
	border-color: #acacac;
}

.radio input[type="radio"]:disabled+label::after {
	background-color: #acacac;
}
/* ↑ラジオボタン */

/* ↓チェックボックス */
.checkbox {
	padding-left: 10px;
	width: auto;
	height: auto;
	margin: 5px 0;
}

.checkbox_inline {
	float: left;
}

.checkbox input[type="checkbox"] {
	display: none;
}

.checkbox input[type="checkbox"]+label::before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	border: 2px solid #26d3c0;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
}

.checkbox input[type="checkbox"]+label {
	position: relative;
	padding: 4px 4px 4px 35px;
	cursor: pointer;
	height: 26px;
	line-height: 26px;
}

.checkbox input[type="checkbox"]:checked {
	display: none;
}

.checkbox input[type="checkbox"]:checked+label::after {
	content: '';
	border-left: 2px solid #26d3c0;
	border-bottom: 2px solid #26d3c0;
	transform: rotate(-55deg) skew(-20deg);
	height: 7px;
	width: 18px;
	position: absolute;
	top: 7px;
	left: 5px;
}

/** (チェックボックス)使用不可 */
.checkbox input[type="checkbox"]:disabled {
	display: none;
}

.checkbox input[type="checkbox"]:disabled+label,
.checkbox input[type="checkbox"]:disabled+label::before,
.checkbox input[type="checkbox"]:disabled+label::after {
	cursor: default;
	color: gray;
	border-color: #acacac;
}

/* ↑チェックボックス */


/* ↓エラー */
.errormsg_area {
	padding: 8px;
	border: dashed 1px #800000;
	color: red;
	margin: 20px;
	width: 85vw;
}

li.errormsg {
	text-decoration: none;
	cursor: auto;
	color: red;
	margin: 3px;
}

.warningmsg2_area li.warningmsg, li.warning_msg {
	text-decoration: none;
	cursor: auto;
	margin: 3px;
}

li.errormsg a {
	color: red;
}

.msg {
	padding: 8px;
	border: dashed 1px #000080;
	margin: 20px;
}

.error_msg {
	color: red;
	margin: 0;
}

.error_field,
.checkbox_select.error_field,
.checkbox_select_area.error_field {
	background-color: #f9deec;
}

.alertmsg_area {
	padding: 8px;
	border: dashed 1px #000000;
	color: black;
	margin: 0px 20px 20px 20px;
	width: 85vw;
}

.alert_field {
	background-color: #fff6b2;
}

/* ↑エラー */

/* ↓警告 */
.warningmsg_area {
	padding: 8px;
	border: dashed 1px #800000;
	margin: 20px;
	width: 85vw;
}

.warningmsg2_area {
	padding: 8px;
	border: dashed 1px black;
	margin: 20px;
	width: 85vw;
}
/* ↑警告 */

/* 上下入れ替えられるリスト */
.move_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.move_list li {
	margin: 0;
	padding: 0;
	min-width: 400px;
	display: flex;
	justify-content: space-between;
}

.move_list_buttons {
	width: 70px;
	height: 30px;
	display: flex;
}

.up_button {
	background: url('./img/arrowbtn_up.svg') #e83828 no-repeat;
	opacity: 0.56;
}

.down_button {
	background: url('./img/arrowbtn_down.svg') #e83828 no-repeat;
	opacity: 0.56;
}

.up_button,
.down_button {
	background-position: center center;
	background-size: 28px;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	margin: 0 2px;
}

.up_button:hover,
.down_button:hover {
	cursor: pointer;
	opacity: 0.9;
}


.caution {
	color: #ff0000;
}



/********** ↓文例ダイアログ↓ **********/

#phraseMenu2 {
	border-radius: 5px;
	position: absolute;
	display: none;
	z-index: 999;
}

#phraseMenu2_inner {
	margin: 2px;
	border-radius: 5px;
}

#phraseMenu2 ul {
	list-style: none;
	padding: 0;
	margin: 5px;
	border: none;
	width: auto;
	max-height: 500px;
	overflow: auto;
}

#phraseMenu2 li {
	margin: 0px;
	color: black;
	display: block;
	cursor: pointer;
	padding: 3px;
	border-bottom: 1px solid #FFF;
	background-color: transparent;
	word-wrap: break-word;
}

#phraseMenu2 li:last-child {
	border: none;
}

#phraseMenu2 #phraseMenu2Close {
	width: 20px;
	height: 20px;
	padding: 5px;
	background-image: url('../img/batsu_icon.svg');
	background-repeat: no-repeat;
	background-size: 15px 15px;
	background-position: center center;
	border-radius: 16px;
	position: absolute;
	right: -15px;
	top: -15px;
	cursor: pointer;
	border: 1px solid #fff;
	z-index: 999;
}

.agent {
	padding-top: 3px;
	width: 50px;
	height: 50px;
	margin: 5px;
	vertical-align: middle;
	position: relative;
}

.agent.open:after {
	content: "ー";
	font-size: 12px;
	color: gray;
	bottom: -7px;
	right: -7px;
	position: absolute;
	width: 18px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ccc;
	text-align: center;
}

.agent.close:after {
	content: "＋";
	font-size: 12px;
	color: gray;
	bottom: -7px;
	right: -7px;
	position: absolute;
	width: 18px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ccc;
	text-align: center;
}

#agent_wait {
	width: 50px;
	height: 50px;
	position: fixed;
	cursor: pointer;
	z-index: 999;
	padding-top: 2px;
	padding-bottom: 2px;
}

#agent_wait,
#agent {
	background-size: 40px;
	background-repeat: no-repeat;
	background-position: left 5px center;
}

.image_usagi {
	background-image: url('../img/agent/usagi.svg');
	-webkit-user-select: none;
}

.image_hiyoko {
	background-image: url('../img/agent/hiyoko.svg');
	-webkit-user-select: none;
}

.image_saru {
	background-image: url('../img/agent/saru.svg');
	-webkit-user-select: none;
}

.image_hoict {
	background-image: url('../img/agent/hoict.svg');
}

.backcolor_usagi {
	background-color: #ffd6c7;
}

.backcolor_hiyoko {
	background-color: #b4edb7;
}

.backcolor_saru {
	background-color: #fff6b2;
}

.clickable_usagi:hover {
	background-color: #ffc8b3 !important;
	cursor: pointer;
}
#phraseMenu2 #phraseMenu2Close.backcolor_usagi:hover {
	background-color: #ffc8b3 !important;
}

.clickable_hiyoko:hover {
	background-color:  #7fe385 !important;
	cursor: pointer;
}
#phraseMenu2 #phraseMenu2Close.backcolor_hiyoko:hover {
	background-color: #7fe385 !important;
}

.clickable_saru:hover {
	background-color: #fceb65 !important;
	cursor: pointer;
}
#phraseMenu2 #phraseMenu2Close.backcolor_saru:hover {
	background-color: #fceb65 !important;
}

.draggable {
	cursor: grab;
}

.draggable.head {
	padding-top: 1px;
	padding-bottom: 2px;
}

.draggable:active {
	cursor: grabbing;
}

.phraseMenuArea {
	padding:5px;
}

#recommendPhraseArea {
	border-top: 1px solid #FFF;
}

.recomend_phrase_button {
	width: 80px;
	height: 20px;
	background-color: #ff4500;
	color: white;
	padding: 3px;
	border: none;
	cursor: pointer;
	text-align: center;
	display: inline-block;
	font-size: 14px;
	margin-top: 20px;
	margin-right: 10px;
}

.recomend_phrase_button:hover {
	opacity: 0.8;
}

.recomend_phrase_button.search {
	background: url(./img/search.svg) no-repeat;
	background-color: #4b88ac;
	background-position: left 0px center;
	background-size: 45px;
}