body {
    background-color: transparent; /* ★修正: 背景を透明に */
    margin: 0;
    min-height: 100vh;
    font-size: 16px;
    position: relative; 
    overflow-x: hidden; 
}
#background-color-switcher {
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Z-Index: コンテンツの下、コピーライトの背景の上 */
    z-index: -2; 
    
    /* 初期背景色とフェードトランジション */
    background-color: cornflowerblue; /* 最初の色を設定 */
    transition: background-color 1.5s ease-in-out; /* 1.5秒かけてフェード */
}

main{
    padding: 30px 15px 0;
}
h1{
    margin: 0;
    padding: 0;
    text-align: center;
    color:#fff;
    /* カーソルをテキストと同じ行に表示するために設定 */
    display: inline-block; 
}
/*
 * カーソル（|）のスタイル設定
 * h1の::after擬似要素を使ってカーソルを表現
 */
#typewriter-text::after {
    content: '|'; /* カーソル文字 */
    display: inline;
    animation: blink-caret 0.75s step-end infinite; /* 点滅アニメーション */
}

/* カーソル点滅アニメーションの定義 */
@keyframes blink-caret {
    from, to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.logo-block {
    margin: 100px auto 0;
    max-width: 600px;
    width:100%;
    text-align: center;
    /* position: relative; の設定は今回はFlexboxでの中央配置ではないため必須ではありませんが、
       .smokeに absolute を使う場合は .logo-block の位置を基準にするため必要です。
       現在のCSSでは .smoke に absolute が設定されていないため、後述の追記をご確認ください。
    */
}
.smoke {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-bottom: -30px;
    margin-left: 8px;    
}
.smoke img{
    max-width: 50%;
    height: auto;
}
.logo img {
    max-width: 100%;
    height: auto;
    display: block; 
}
.speaking{
    text-align: center;
}
.speaking h1{
    margin: 5px auto;
    font-size:1.5rem;
    font-family: 'Kaisei Opti', serif;
    line-height: 1.2;
}
/* 🌟 コピーライトのスタイル 🌟 */
.copyright {
    position: fixed; /* 画面に固定 */
    bottom: 0;       /* 画面下端に配置 */
    left: 0;
    width: 100%;
    height: 40px; /* 高さの指定（任意） */
    color: #fff; /* 文字色 */
    text-align: center;
    line-height: 40px; /* 高さと合わせると垂直方向も中央に */
    font-size: 0.8em;
    z-index: 1000; /* 最前面に表示 */
    font-family: sans-serif; /* 汎用的なフォントで可読性を確保 */
}
.copyright span{
    font-size: 1.5rem;
    vertical-align: top;
}

@media screen and (max-width:500px){
.logo-block {
    margin: 100px auto 0;
}
.smoke {
    margin-bottom: -20px;
    margin-left: 4px;
}    
.speaking h1{
    font-size:1.1rem;
}    
}