@charset "utf-8";

/*--------------------------------------------*/
/* chat                                     */
/*--------------------------------------------*/

section {
  display: none;
}

.chatBox {
	display: block;
	position: relative;
  width: calc(100% - 20px);
  max-width: 800px;
	margin: -10px auto 10px;
}

.chatBox .chat_title{
  display: block;
	position: relative;
  width: 100%;
  margin-bottom: 30px;
  padding: 20px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
  background-color: #e0e0ad;
  border-radius: 8px;
}

.chatBox .box_chat {
  display: block;
	position: relative;
  width: 100%;
  margin-bottom: 50px;
}
.chatBox .box_chat > div {
  display: block;
	position: relative;
  width: 100%;
  min-height: 80px;
  margin-bottom: 20px;
}
.chatBox .box_chat div p {
  display: block;
	position: relative;
  width: 100%;
  max-width: 370px;
  padding: 20px;
  border-radius: 8px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em; 
}
.chatBox .chat_A p {
  margin: 0px 85px 0px auto;
  background-color: #8fc31f;
}
.chatBox .chat_A::before {
  content: 'あなた';
  position: absolute;
  width: 70px;
  padding-top: 75px;
  top: 0px;
  right: 0px;
	font-size: 14px;
	line-height: 1em; 
  white-space: nowrap;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 70px 70px;
  background-image: url("../include/chat_2-li_a.png")
}
.chatBox .chat_B p {
  margin: 0px auto 0px 85px;
  background-color: #dcdddd;
}
.chatBox .chat_B::before {
  content: '講師X';
  position: absolute;
  width: 70px;
  padding-top: 75px;
  top: 0px;
  left: 0px;
	font-size: 14px;
	line-height: 1em; 
  white-space: nowrap;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 70px 70px;
  background-image: url("../include/chat_2-li_b.png")
}
.chatBox .chat_C p {
  margin: 0px auto 0px 85px;
  background-color: #dcdddd;
}
.chatBox .chat_C::before {
  content: '参加者';
  position: absolute;
  width: 70px;
  padding-top: 75px;
  top: 0px;
  left: 0px;
	font-size: 14px;
	line-height: 1em; 
  white-space: nowrap;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 70px 70px;
  background-image: url("../include/chat_2-li_c.png")
}
.chatBox .chat_D p {
  margin: 0px auto 0px 85px;
  background-color: #dcdddd;
}
.chatBox .chat_D::before {
  content: '友達';
  position: absolute;
  width: 70px;
  padding-top: 75px;
  top: 0px;
  left: 0px;
	font-size: 14px;
	line-height: 1em; 
  white-space: nowrap;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 70px 70px;
  background-image: url("../include/chat_2-li_d.png")
}
.chatBox .chat_select {
  display: block;
	position: relative;
  width: 100%;
  margin-top: 50px;
}
.chatBox .chat_Q::before {
  content: 'あなた';
  position: absolute;
  width: 70px;
  padding-top: 75px;
  top: 0px;
  right: 0px;
	font-size: 12px;
	line-height: 1em; 
  white-space: nowrap;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 70px 70px;
  background-image: url("../include/chat_2-li_a.png")
}
.chatBox .chat_Q ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
  gap: 10px 0px;
  width: 100%;
}
.chatBox .chat_Q ul li {
  display: block;
	position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0px 85px 0px auto;
  padding: 30px 20px 30px 40px;
  border-radius: 8px;
  color: #d0121b;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em; 
  background-color: #8fc31f;
  cursor: pointer;
}
.chatBox .chat_Q ul li:hover {
  color: #fff;
  background-color: #d0121b;
}
.chatBox .chat_Q ul li._sel {
  color: #fff;
  background-color: #d0121b;
}
.chatBox .chat_Q ul li:nth-child(1)::before {
  content: 'A';
  position: absolute;
  top: 30px;
  left: 20px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em; 
}
.chatBox .chat_Q ul li:nth-child(2)::before {
  content: 'B';
  position: absolute;
  top: 30px;
  left: 20px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em; 
}
.chatBox .chat_Q ul li:nth-child(3)::before {
  content: 'C';
  position: absolute;
  top: 30px;
  left: 20px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em; 
}
.chatBox .chat_Q ul li:nth-child(4)::before {
  content: 'D';
  position: absolute;
  top: 30px;
  left: 20px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em; 
}

.q_result {
  display: none;
	position: relative;
  width: 100%;
  margin-top: 120px;
}





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

.chatBox {
  width: 100%;
}
.chatBox .chat_title{
  padding: 15px;
	font-size: 13px;
}
.chatBox .box_chat {
  margin-bottom: 40px;
}
.chatBox .box_chat div p {
  max-width: 200px;
  padding: 15px;
	font-size: 12px;
}
.chatBox .chat_A p {
  margin: 0px 75px 0px auto;
}
.chatBox .chat_A::before {
  width: 60px;
  padding-top: 65px;
	font-size: 12px;
  background-size: 60px 60px;
}
.chatBox .chat_B p {
  margin: 0px auto 0px 75px;
}
.chatBox .chat_B::before {
  width: 60px;
  padding-top: 65px;
	font-size: 12px;
  background-size: 60px 60px;
}
.chatBox .chat_Q ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
  gap: 10px 0px;
  width: 100%;
}
.chatBox .chat_Q ul li {
  max-width: 150px;
  margin: 0px 75px 0px auto;
  padding: 20px 15px 20px 30px;
	font-size: 12px;
}
.chatBox .chat_Q ul li:nth-child(1)::before {
  top: 20px;
  left: 15px;
	font-size: 12px;
}
.chatBox .chat_Q ul li:nth-child(2)::before {
  top: 20px;
  left: 15px;
	font-size: 12px;
}
.chatBox .chat_Q ul li:nth-child(3)::before {
  top: 20px;
  left: 15px;
	font-size: 12px;
}
.chatBox .chat_Q ul li:nth-child(4)::before {
  top: 20px;
  left: 15px;
	font-size: 12px;
}


}