/******************************************************
 *
 * アコーディオンの設定
 *
 ******************************************************/

/* アコーディオン全体 */
details {
	--color-border:		transparent;

	--color-close-back:	var(--color-official);
	--color-close-text:	#ffffff;

	--color-open-back:	var(--color-text-title);
	--color-open-text:	#ffffff;

	width:				100%;
	margin-top:			0.5em;
	margin-bottom:		0.5em;
}



summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 1em;
    cursor: pointer;
	background-color: var(--color-close-back);
}

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

summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 1em;
    height: 1em;
    margin-left: 10px;
    border-bottom:	0.5em solid var(--color-open-text);
    border-right:	0.5em solid var(--color-open-text);
    content: '';
    transition: transform .3s;
}

details[open] summary {
	background-color: var(--color-open-back);
}
details[open] summary::after {
    transform: rotate(225deg);
}


summary p {
    opacity: 1;
    margin: 0;
    padding: 0.5em 2em 0.5em 0.25em;
    color:	 var(--color-open-text);
    transition: transform .5s, opacity .5s;
}

details[open] p {
    transform: none;
    opacity: 1;
}