@charset "UTF-8";

.accordion-container .accordion-title {
	position: relative;
	margin: 0;
	/* padding: 0.625em 0.625em 0.625em 2em; */
	padding: 0.625em 3em 0.625em 2em;
	 background-color: #fff; 
	border: 1px solid #666;
	font-size: 1.25em;
	font-weight: bold;
	color: #000;
	cursor: pointer;
	transition: all 0.5s ease 0s;
	margin-top: 30px;
}

/* .accordion-container .accordion-title:hover,
.accordion-title.open {
	background-color: #a6d751;
	transition : all 0.5s ease 0s;
} */

/* .accordion-container .accordion-title:hover {
	background-color: #a6d751;
	transition: all 0.5s ease 0s;
} */

.accordion-container .accordion-title::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	width: 15px;
	height: 2px;
	/*縦線に*/
	transform: rotate(90deg);
	background: #000;
	transition: all .3s ease-in-out;
}

.accordion-container .accordion-title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	/*横線*/
	width: 15px;
	height: 2px;
	background: #000;
	transition: all .2s ease-in-out;
}

.accordion-container .accordion-title.open::before {
	transform: rotate(180deg);
}

.accordion-container .accordion-title.open::after {
	opacity: 0;
}

.accordion-content {
	display: none;
	/* padding-left: 2.3125em; */
	/* border: 1px solid #0079c1; */
	border: 1px solid #999;
	padding: 30px 18px;
	/* background-color: #f4f8ed; */
	border-top: none
}

/* CSS for CodePen */
.accordion-container {
	/* width: 300px; */
	/* width: 100%; */
	max-width: 980px;
	margin: 0 auto;
}

#accordion {
	margin-bottom: 30px;
}

.accordionBorder {
	border: 1px solid #5ca122;
	margin-bottom: 12px;
}


@media screen and (max-width: 640px) {
	.accordion-container .accordion-title {
		padding: 0.625em 2em 0.625em 1em;
	}

	/* .accordion-content {
		padding: 0 12px;
	} */

	.accordion-container .accordion-title::before {
		right: 16px;
	}

	.accordion-container .accordion-title::after {
		right: 16px;
	}

}