body {
    background-color: #f5e7de;
    color: #440011;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", tahoma, verdana, sans-serif;
    font-size: 14px;
    image-rendering: pixelated;
}
a {
    color: #885533;
    background-color: #ddbbaa;
    padding: 1px;
    text-decoration:none;
    font-weight: bold;
}
a:hover {
    color: #656a97;
}
p {
    text-align: justify;
    margin: 1px;
    margin-bottom: 10px;
}
.bgchange {
    cursor: pointer;
}

.content {
  display: none;
}

.section.open .content {
  display: block;
}

.toggle {
  cursor: pointer;
  background-color: #ddbbaa;
}


.flex { display: flex; }
.flip-card {
  background-color: transparent;
  width: 69px;
  height: 93px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  display: inline-block;
}

/* 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.5s;
  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;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front { color:#440011; }

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}