body {
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    background-color: black;
    color: #FFD700;
    perspective: 1000px; /* 3D効果のための視点 */
}

h1#main-title {
    color: #FFD700; /* タイトルを黄色に */
}

#book-list-link {
    color: #FFD700; /* ゴールド */
    text-decoration: none; /* 下線なし */
    font-size: 1em; /* 少し小さめに */
    margin-bottom: 20px; /* ボタンとの間にスペース */
    display: block; /* ブロック要素にしてマージンを適用 */
    font-family: 'Noto Sans JP', sans-serif; /* ゴシック体に変更 */
}

.horizontal-line {
    border-bottom: 1px solid #B8860B; /* 暗いゴールドの水平線 */
    width: 100%; /* 幅を100%に */
    margin: 10px 0 20px 0; /* 上下マージン */
}

#book-list-link:hover {
    text-decoration: none; /* 下線を削除 */
    color: #B8860B; /* ホバー時に文字色を変更 */
}

button {
    margin-top: 20px;
    padding: 12px 25px;
    font-size: 18px;
    cursor: pointer;
    background-color: #DAA520; /* 濃いめの金色 */
    color: #000; /* 文字色を黒に */
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 影を追加 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
    background-color: #B8860B; /* ホバー時に少し濃い金色に */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4); /* ホバー時に影を強調 */
}

#card-container {
    margin: 40px auto;
    width: 200px;
    height: 300px;
}

#card {
    width: 100%;
    height: 0; /* 高さを0に設定 */
    padding-bottom: 150%; /* 幅の1.5倍の高さ（縦横比2:3）を維持 */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

#card.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 裏面を非表示 */
    border-radius: 10px;
    overflow: hidden;
}

.card-front {
    background-color: #f0f0f0;
    transform: rotateY(180deg);
}

.card-back {
    background-color: #000; /* 画像の周囲の余白を黒で埋める */
}

/* Ensure images inside card faces fill their containers and respect rounded corners */
#card img,
.card-back img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 画像全体が表示されるように変更 */
    display: block; /* インライン要素の余白をなくす */
    margin: 0; /* 余白をリセット */
    padding: 0; /* パディングをリセット */
    border: 0; /* ボーダーをリセット */
    vertical-align: top; /* 垂直方向の配置を調整 */
}

#card img.reversed {
    transform: rotate(180deg);
}

#card-info {
    margin: 10px auto; /* 上下のマージンを10px、左右を自動にして中央寄せ */
    max-width: 400px; /* カード幅の約2倍 */
    font-size: 1em; /* フォントサイズを1emに */
    font-weight: normal; /* テキストの太さを標準に */
}

.description-text {
    text-align: left;
    color: white; /* 文字色を白に */
}

.card-title {
    font-size: 2.5em;
}

.meaning-text {
    font-size: 1.2em; /* 少し大きく */
    font-weight: normal; /* そのまま */
}

.advice-text {
    text-align: left;
    margin-top: 10px; /* 上に少しスペースを空ける */
    color: white; /* 文字色を白に */
}

.advice-prefix {
    color: #FFD700; /* アドバイスのプレフィックスをゴールドに */
}

#scroll-to-top {
    opacity: 0; /* 最初は透明 */
    visibility: hidden; /* 最初は非表示 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* フェードアニメーション */
    position: fixed; /* 画面に固定 */
    bottom: 20px; /* 下から20px */
    right: 20px; /* 右から20px */
    z-index: 99; /* 他の要素より手前に表示 */
    border: none;
    outline: none;
    background-color: #DAA520; /* ボタンの色 */
    color: #000; /* 文字色を黒に */
    cursor: pointer;
    width: 50px;   /* 幅を固定 */
    height: 50px;  /* 高さを固定 */
    border-radius: 50%; /* 真円に */
    font-size: 24px; /* 矢印のサイズを大きくして太く見せる */
    font-weight: bold; /* 矢印を太字に */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; /* 矢印を中央に配置するため */
    justify-content: center; /* 矢印を水平方向中央に */
    align-items: center; /* 矢印を垂直方向中央に */
    padding: 0; /* パディングをリセット */
}

#scroll-to-top.show {
    opacity: 1; /* 表示時に不透明 */
    visibility: visible; /* 表示時に可視 */
}

#scroll-to-top:hover {
    background-color: #B8860B;
}

footer {
    margin-top: 50px; /* 上部にマージン */
    padding: 20px;
    text-align: center;
    font-size: 0.8em;
    color: #AAAAAA; /* テキストカラーを薄いグレーに */
}

.details-link {
    color: #FFD700;
    text-decoration: none;
}