.accordion {
margin: 3em auto;
max-width: 80vw;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}



.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding: 1em;
display: block;
color: #333;
font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;

}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked + .title + .content {
max-height: 10000px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

.title:hover {
	background-color:#666; 	
	color:#fff; 	
}



em {
	font-weight:bold;
}

strong {font-weight:bold;color:#000;}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1.5em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #999999;
	background-color:#EEEEEE;
}

ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left:0em;
}

dl {
	margin-top:1.5em;
	margin-bottom:0.5em;
}
dt {
	margin-top:1.5em;
	margin-bottom:0.5em;
/*	border-bottom:2px dotted #aaa; */
}
dt:before {
	content:"\0025a0";
}
dd {
	margin-bottom:1em;
}

table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	border: 1px solid #ddd;
	margin-top:2em;
/*	font-size: small;*/
}
th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;
	background:#ccc;
}
td {
	padding:10px;
	text-align:left;
	border:1px solid #ddd;
}

/*
.list {
	padding:0 0 0 2em;
}

.list li {
	margin:0;
	padding:0;
	list-style:none;
	text-indent:-1.3em;
}
.list li:before {
	content:"\002605\00a0";
	color:#ffc720;
}
*/