@charset "utf-8";
/*////////////////////////////////////
lecture
////////////////////////////////////*/

@media screen and (min-width: 768px) {
.lecture_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding: 100px 0;
}

#lecture_place {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}
.lecture_flow {
	position: relative;
	width: 48%;
	margin-right: 2%;
}
.lecture_img {
	position: relative;
	width: 48%;
	margin-left: 2%;
}
.lecture_word {
	position: relative;
	width: 100%;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 2;
	margin-bottom: 50px;
}
.flow {
	position: relative;
	width: 100%;
	background: #7AB178;
	padding: 10px 0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 400;
	color: #FFF;
	border-radius: 30px;
	margin-bottom: 10px;
}
.flow_word,
.flow_word2 {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2;
	margin-bottom: 50px;
}
.flow_word::after {
	content: "\025bc";
	position: absolute;
	font-size: 3.2rem;
	color: #7AB178;
	bottom: -50px;
	left: 50%;
}
#lecture_title {
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}
#lecture_title h3 {
	font-size: 4.2rem;
	color: #555;
}
#lecture_title span {
	font-size: 1.6rem;
	color: #999;
}

}
@media screen and (min-width: 0px) and (max-width: 767px) {
.lecture_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0;
}

#lecture_place {
	position: relative;
	width: 100%;
}
.lecture_flow {
	position: relative;
	width: 100%;
}
.lecture_img {
	position: relative;
	width: 100%;
}
.lecture_word {
	position: relative;
	width: 100%;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 2;
	margin-bottom: 50px;
}
.flow {
	position: relative;
	width: 100%;
	background: #7AB178;
	padding: 10px 0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 400;
	color: #FFF;
	border-radius: 30px;
	margin-bottom: 10px;
}
.flow_word,
.flow_word2 {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2;
	margin-bottom: 50px;
}
.flow_word::after {
	content: "\025bc";
	position: absolute;
	font-size: 3.2rem;
	color: #7AB178;
	bottom: -50px;
	left: 50%;
}
#lecture_title {
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}
#lecture_title h3 {
	font-size: 4.2rem;
	color: #555;
}
#lecture_title span {
	font-size: 1.6rem;
	color: #999;
}
}


.accordion {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.accordion-content {
  display: none;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  margin-bottom: 20px;
}


.accordion-header {
  background-color:#89A17B;
  padding: 20px 45px 16px 20px;
  margin: 10px 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  font-size: 1.6rem;
  font-weight: 400;
  color: #FFF;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:12px;
  height:2px;
  margin:auto;
  background:#FFF;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
  background-color:#A1CDA2;
  padding: 20px 20px;
  font-size: 1.6rem;
  line-height: 2;
}

.accordion-header span,
.accordion-content span{
  padding-left: 25px;
  position: relative;
}

.accordion-header span::before{
  position: absolute;
  content:"Q";
  top: -16px;
  left: -5px;
  color:#3282B8;
  font-size: 3.2rem;
}


.accordion-content span::before{
    position: absolute;
  content:"A";
  top: -20px;
  left: -5px;
  color:#BD292B;
  font-size: 3.2rem;
}

/* hover */
.accordion-header:hover {
  background-color:#B3D0AA;
}