/* body{
    background-color: aliceblue;
    color: brown;
    }
#calc{
    text-align: center;
}
h2{
    text-align: center;    
    font-size: x-large;
}
.block{
    display: block;
    height:  450px;
}
a {
    color: brown;
}
.hidden{
    display: none;
}
.opa{
    opacity: 0;
}
.transform{
    transform: rotate(180deg);
    opacity: 1; 
    transition: opacity 2s ease-out; 
}
.appear{
    opacity: 1; 
    transition: opacity 2s ease-out; 
}
#description{
    text-align: right;
    font-size: x-small;
} */

body{
    background-color: aliceblue;
    color: brown;;
    }
#calc{
    text-align: center;
}
h2{
    text-align: center;    
    font-size: x-large;
}
a {
    color: brown;
}
.hidden{
    display: none;
}
#description{
    text-align: right;
    font-size: x-small;
}

.block{
    display: block;
    height: 450px;
    width: 250px;
    margin: 0 auto;
    perspective: 1000px;
    /* border: 1px solid black; */
}
.card{
    position: relative;
    transition: transform 1.2s;
    transform-style: preserve-3d; /*子要素の3D配置を維持する*/
}
.card-face{
    position: absolute;
    top: 0px;
    left: 0px;
    backface-visibility: hidden;
}
.back {
    transform: rotateY(180deg); /*★重要：最初から180度裏返しておく */
}
.rotate{
    transform: rotateY(180deg);
}
.transform{
    transform: rotateX(180deg);
}