details {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    border-radius: 36px;
    margin-bottom: 20px;
}

details:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

details:last-child {
    margin-bottom: 0;
}

details[open] summary {
    padding: 40px 40px 20px;
}

details[open] summary ~ * {
    animation: open 0.3s ease-in-out;
}

@keyframes open {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

details[open] .summary-content {
    padding: 0 40px 40px;
}

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

details summary {
	width: calc(100% - 30px);
    padding: 40px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    list-style: none;
}

details summary:after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("../images/icon/plus.svg");
    position: absolute;
    top: 37px;
    right: 40px;
    transform-origin: center;
    transition: 200ms linear;
}

.ae details summary:after {
    left: 40px;
    right: initial;
}

details[open] summary:after {
    transform: rotate(45deg);
}

details summary {
    outline: 0;
}