body {
    header {
        height: 30vh;

        h1 {
            height: 30vh;
            text-align: center;
            font-size: calc(1.5vw + 30px);
            font-weight: bold;
            font-family: "Zen Maru Gothic", sans-serif;
            line-height: 33vh;
            letter-spacing: 0.15em;
        }
    }

    main {
        .accordions {
            /* max-width: 800px; */
            width: clamp(328px, 100vw - 32px, 800px);

            margin: 0 auto;

            .accordion {
                margin-top: clamp(8px, 2vw + 1px, 16px);


                summary {
                    list-style: none;
                    background: steelblue;
                    background: hsl(222, 61%, 38%);
                    color: white;
                    padding: clamp(16px, 4vw + 2px, 32px);
                    letter-spacing: 0.15em;
                    line-height: 1;
                    display: flex;
                    font-weight: bold;
                    transition: .3s;
                    user-select: none;
                    /* font-size: clamp(16px, 0.5vw + 16px, 20px); */

                    span {
                        width: clamp(16px, 4vw + 2px, 32px);
                        width: clamp(16px, 3.5vw + 2px, 25px);
                        aspect-ratio: 1 / 1;
                        /* 幅に合わせて高さを1:1にする */
                        flex-shrink: 0;
                        align-items: center;
                        margin-right: clamp(16px, 4vw + 2px, 32px);
                        /* margin-right: clamp(8px, 2vw + 1px, 16px); */
                        display: inline-block;
                        position: relative;
                    }

                    span::before,
                    span::after {
                        content: "";
                        position: absolute;
                        background-color: currentColor;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        transition: transform 0.3s ease, opacity 0.3s ease;
                    }

                    span::before {
                        width: 100%;
                        height: 2px;
                    }

                    span::after {
                        width: 2px;
                        height: 100%;
                    }
                }

                div {
                    padding-inline: clamp(16px, 4vw + 2px, 32px);
                    padding: clamp(16px, 4vw + 2px, 32px);
                    /* overflow: hidden;
                    height: 0;
                    opacity: 0; */
                    transition: height 0.3s ease-out, opacity 0.3s ease-out;

                    h3 {
                        margin: calc(0.7vw + 14px) 0 calc(1.1vw + 20px);
                        line-height: 2;
                        letter-spacing: 0.1em;
                        /* font-size: calc(0.7vw + 17px); */
                        /* background: linear-gradient(to top, mistyrose 20%, transparent 20%); */

                        span {
                            background: linear-gradient(to top, moccasin 20%, transparent 20%);
                            font-weight: bold;
                        }
                    }

                    p {
                        line-height: 1.8;

                        span {
                            background: linear-gradient(to top, moccasin 20%, transparent 20%);
                            font-weight: bold;
                        }
                    }
                }
            }



            /* 修正前： .accordion[open] summary span::after */
            /* 修正後： data-open属性で即座に切り替える */

            /* --- プラス・マイナスの切り替え --- */

            /* 1. 縦棒（プラスを形作る棒）を消してマイナスにする */
            .accordion[data-open="true"] summary span::after {
                transform: translate(-50%, -50%) rotate(90deg);
                opacity: 0;
            }

            /* 2. 横棒の回転（任意）も data-open に合わせる */
            .accordion[data-open="true"] summary span::before {
                transform: translate(-50%, -50%) rotate(180deg);
            }


            .accordion[open] summary {
                background: #e597b2;
                background: #da81b2;
            }

            .accordion[open] div {
                height: calc-size(auto);
                opacity: 1;
            }
        }
    }
}