@charset "utf-8";

details {
	/* border: 1px solid #ccc; */
}
details:not(:last-child) {
	margin-bottom: 20px;
}

/**
* list-style: none; ←デフォルト三角削除（Chrome非対応）
* cursor: pointer; ←カーソルをポインターに
**/

details summary {
	list-style: none;
	cursor: pointer;
	padding: 20px;
	background: #FBEECB;
	color: #333;
	font-size: 1.2rem;
	font-weight: bold;
	align-items: center;
	text-align: center;
}

/**
* Chrome用のデフォルト三角削除
**/

details summary::-webkit-details-marker {
	display: none;
}

/**
* Font Awesomeのプラスアイコン使用
**/

details summary::before {
	content: '┼';
	position: absolute;
	color: #FACF5B;
	margin-left: 53%;
}

@media screen and (min-width: 768px) {
	details summary {
		text-align: center;
		font-size: 0.8rem;
	}
	details summary::before {
		margin-left: 28%;
	}
}

@media screen and (min-width: 1024px) {
	details summary {
		font-size: 1rem;
	}
}

@media screen and (min-width: 1024px) {
	details summary {
		font-size: 1.2rem;
	}
}

/**
* アコーディオンがオープン時はマイナスアイコンに変更
**/

details[open] summary::before {
	content: '─';
	color: #FACF5B;
}

details p {
	margin: 0;
	padding: 20px;
}