/* Thinker Page 用のスタイル */
body.page-template-page-thinker {
    background: #808080;
    margin: 0;
    padding: 0;
    height: 100vh; /* 画面の高さに固定 */
    position: relative;
    overflow: hidden; /* 縦・横スクロールを無効 */
}

.thinker-container {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面の高さに固定 */
    overflow: hidden; /* コンテナ内でのスクロールを無効 */
}

.thinker-image {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: auto;
    z-index: 1;
}

.speech-bubble {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid #000;
    padding: 10px 15px;
    border-radius: 50px; /* 横長の丸 */
    text-align: center;
    font-size: 1em; /* デフォルトサイズ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease-in, top 3s ease-in;
    max-width: 200px;
    width: 200px;
    line-height: 30px;
    word-wrap: break-word;
}

.speech-bubble.small-text {
    font-size: 0.9em; /* 12文字以上の場合に小さく */
}

.speech-bubble.fade-in {
    opacity: 1;
}

@media (max-width: 768px) {
    .thinker-image {
        max-width: 80%;
    }

    .speech-bubble {
        font-size: 0.8em; /* モバイルデフォルト */
        padding: 8px 12px;
        max-width: 200px;
        width: 200px;
        height: 40px;
        line-height: 24px;
    }

    .speech-bubble.small-text {
        font-size: 0.6em; /* モバイルでさらに小さく */
    }
}