@charset "UTF-8";

details .details-content {
    /*  これがないと，開閉時に summary と下部のコンテンツが重なる  */
    overflow: hidden;
}

details summary {
    display: block;
    cursor: pointer;
}

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

/* js-icon-cross = open close cross */
.js-icon-cross summary {
    position: relative;
    display: block;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    will-change: transform;
}

.js-icon-cross summary:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% - 20px);
    /* -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); */
    display: block;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--navy);
    border-right: 1px solid var(--navy);
    transform: translateY(-50%) rotate(135deg);
}

.js-icon-cross summary.active:before {
    transform: rotate(-45deg);
}