/* 全デバイス共通スタイル */
.circle-info-container {
    width: 100%;
    margin: 200px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Noto Serif JP', serif;
}

/* 本編リンク用のスタイル */
.kakuyomu-link {
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    font-size: 1.2em;
    margin: 20px 0;
    color: #333;
}

/* 本編リンクのアンカータグのスタイル */
.kakuyomu-link a {
    color: #00ace6;              /* リンクの色を明るい青に設定 */
    text-decoration: none;       /* リンク下線を消す */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}

/* ホバー時のスタイル */
.kakuyomu-link a:hover {
    color: #0086b3;              /* ホバー時の色を濃い青に変更 */
    text-decoration: underline;  /* ホバー時に下線を表示する */
}



/* スマホ版の基本スタイル（デフォルトで表示） */
.mobile-info {
    width: 90%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #00ace6;
    background-color: #f8f8f8;
    text-align: center;
}

.mobile-info .info-box {
    margin: 10px 0;
    font-size: 1.1em;
}

/* PC版の基本スタイル（デフォルトで非表示） */
.pc-frame {
    position: relative;
    display: none; /* デフォルト非表示 */
    width: 800px;
    height: auto;
}

.pc-frame .frame-image {
    width: 100%;
    height: auto;
}

.pc-info-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #333;
    width: 80%;
}

.pc-info-overlay .circle-name,
.pc-info-overlay .work-title,
.pc-info-overlay .author-name {
    margin: 15px 0;
    font-size: 1.3em;
    font-weight: bold;
}

/* レスポンシブ設定 */
@media (min-width: 769px) {

    /* PC版のスタイルを有効化 */
    .pc-frame {
        display: block;
    }

    /* スマホ版は非表示に */
    .mobile-info {
        display: none;
    }
}