Safariだとsummaryタグがflexコンテナに対応していない
https://note.com/takamoso/n/n32c4e6904cf7
https://ics-creative.github.io/220831_details_summary_accordion/demo2/index.html
summary{
display: flex;/* デフォルトアイコンを非表示 */
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 0;
font-weight: bold;
transition: .1s;
}
summary::-webkit-details-marker {
display: none;/* for Safari */
}
summary:hover{
cursor: pointer;
opacity: .5;
}
details[open] summary{
margin-bottom: 16px;
}
summary::after {
flex-shrink: 0;
display: inline-block;
content:”;
width: 16px;
height: 16px;
background-color: transparent;
background-image: url(images/icon/chevron-down-solid.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .5;
transition: transform 0.2s;
}
details[open] summary::after {
transform: rotate(180deg);
}