body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f8f9fa; /* Light gray background */
}

/* The main container for the flip card */
.flip-card {
    background-color: transparent;
    width: 100%;
    aspect-ratio: 3/3.5; /* Set a fixed height for the cards */
    perspective: 1000px; /* Adds 3D effect */
    font-family: Arial, Helvetica, sans-serif;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s; /* Animation speed */
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem; /* Bootstrap's rounded-lg equivalent */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}
/* Style the back side */
.flip-card-back {
    background-color: #a47e26;
    
}





/* Style the front side */
.flip-card-front {
    background-color: #f9d582; /*d9a552を30(16進法)分だけ明るくした*/
    color: #5e5e5e;
    font-weight: bold;
}

/* Style the back side */
.flip-card-back {
    background-color: #a47e26; 
    color: #2b2929;
    transform: rotateY(180deg);
    padding: 20px; /* Add padding for the description */
    text-align: left;
}

.flip-card-front img {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.flip-card-back h5 {
    color: #5e5e5e;
}

.flip-card-back p {
    font-size: 0.9rem;
    line-height: 1.6;
}