.point {
    margin-left: auto;
    margin-right: auto;
    width: 36rem;
}
.point-title {
    display: flex;
    /*padding: 2rem;*/
    /*padding-top: 2rem;*/
    /*padding-bottom: 2rem;*/
    font-size: 1.6rem;
    color:#495057;
    border: 1px solid #ced4da;
    border-radius: 20px;
    box-shadow: 8px 9px 15px -2px #777777;
}
.point-title-box {
    text-align: center;
    width: 92%;
    height: 4.5rem;
    line-height: 4.5rem;
}

.point-title-toggle {
    /*margin-top: 2rem;*/
    /*margin-bottom: 2rem;*/
    text-align: left;
    color: #60bc0f;
    width: 8%;
    height: 4.5rem;
    line-height: 3rem;
    display: flex;
    justify-content: center;
}
.point-title-toggle img {
    margin: auto;
    /*margin-top: auto;*/
    /*margin-bottom: auto;*/
}
.point-title-toggle-x {
    display: none;
}

/*.point-title-toggle-on {*/
/*    display: inline-block;*/
/*}*/
/*.point-title-toggle-off {*/
/*    display: none;*/
/*}*/
/*.point-title-box {*/
/*    text-align: center;*/
/*    width: 92%;*/
/*}*/
.point-title-toggle-anim {
    animation: 0.2s forwards rotation1;
}
.point-title-toggle-anim-reverse {
    animation: 0.2s forwards rotation2;
}
@keyframes rotation1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(45deg); }
}
@keyframes rotation2{
    0%{ transform:rotate(45deg);}
    100%{ transform:rotate(0deg); }
}

.point-detail {
    display: inline-block;
    animation: showDetail 1.5s;
}
/*.point-title:hover + .point-detail {*/
/*    display: inline-block;*/
/*    animation: showDetail 1.5s;*/
/*}*/
.point-detail {
    display: none;
    margin-top: 1.5rem;
    padding-right: 2.2rem;
    padding-left: 2.2rem;
    font-size: 1.4rem;
    line-height: 2rem;
    background-color: #fff;
}

.point-detail-clicked {
    display: inline-block;
    animation: showDetail 1.5s;

    margin-top: 1.5rem;
    padding-right: 2.2rem;
    padding-left: 2.2rem;
    font-size: 1.4rem;
    line-height: 2rem;
    background-color: #fff;
}
.point-title span {
    text-align: right;
    color: #60bc0f;
}


.space {
    height: 3rem;
}


@keyframes showDetail {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media (max-width: 460px) {
    .point {
        width: 22rem;
        /*padding: 1.0rem;*/
        /*font-size: 1.0rem;*/
    }

    .point-title {
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        /*width: 21rem;*/
        /*padding: 1.0rem;*/
        font-size: 1.0rem;
    }

    .point-detail {
        margin-top: 1.5rem;
        padding-right: 2.2rem;
        padding-left: 2.2rem;
        font-size: 1.0rem;
        line-height: 1.8rem;
    }

    .point-detail-clicked {
        font-size: 1.0rem;
    }
}
@media (max-width: 400px) {
    .point {
        width: 21rem;
        /*padding: 1.0rem;*/
        /*font-size: 1.0rem;*/
    }
    .point-title {
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        /*width: 21rem;*/
        /*padding: 1.0rem;*/
        font-size: 1.0rem;
    }
    .point-detail {
        margin-top: 1.5rem;
        padding-right: 2.2rem;
        padding-left: 2.2rem;
        font-size: 1.0rem;
        line-height: 1.8rem;
    }
    .point-detail-clicked {
        font-size: 1.0rem;
    }

}