.main {
    width: 100%;              /* 幅指定 */
    background-color: #6e5a40;   /* 背景色（茶色） */
    text-align: center;       /* テキスト中央寄せ */
}

.text {
    font-size: 30px;           /* 文字サイズ */
    color: #fff;              /* 文字色（白） */
}

body {
    background-color: #eae7e7; /* アイボリーの背景色 */
    color: #000000;            /* 文字色（黒） */
}

li {
    list-style-type: none;     /* リストのスタイルを削除 */
}

h1 {
    display: inline-block;
    position: relative;
    animation: clip-text 0.5s ease-in-out forwards;
}

h1::before {
    content: "";
    display: block;
    background-color: #000;
    position: absolute;
    inset: 0;
    animation: clip-cover 0.5s ease-in-out forwards;
    animation-delay: 0.5s;  /* タイプミス修正（animation-deley -> animation-delay） */
}

@keyframes clip-cover {
    from {
        clip-path: inset(0 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 100%);
    }
}

/* 追加部分 */
summary {
    display: inline-block;
    margin-top: 5px;  /* 上に10pxのスペース */
    margin-bottom: 5px;  /* 下に10pxのスペース */
}

summary::before {
    content: "▶";
    display: inline-block;
    margin-bottom: 5px;  /* 下に10pxのスペース */
}