/* ヘッダーのスタイル */
header {
    display: flex;
    align-items: center; /* ヘッダー内の要素を垂直方向に中央揃え */
    border: none; /* ヘッダーの境界線 */
    padding: 10px; /* ヘッダーの内側の余白 */
    background-color: #4BE8C3; /* 背景色 */
    position: relative; /* ベータ版表示に必要 */
}

.logo-text {
    font-size: 30px; /* テキストのフォントサイズ */
    color: #ffffff; /* テキストの色 */
    margin-top: 10px;
    margin-left: 100px;
    margin-bottom: 10px;
    font-weight: 700; /* フォントウェイトを太く設定 */
    position: relative; /* ベータ版表示に必要 */
}

.highlight {
    color: #4BE8C3;
    border: none;
    padding: 5px 5px; /* 枠線とテキストの間の余白 */
    background-color: white; /* 背景色 */
    border-radius: 0px; /* 角を丸くしない */
    font-weight: 700; /* ハイライト部分も太く設定 */
}


header a {
    text-decoration: none; /* 下線を消す */
}

/* ベータ版バッジの追加 */
.logo-text::after {
    content: "ベータ版"; /* ベータ版のテキスト */
    font-size: 14px; /* ベータ版のフォントサイズを設定 */
    color: #ffffff; /* ベータ版の文字色を白に設定 */
    background-color: #FF4C4C; /* ベータ版の背景色をオレンジに設定 */
    padding: 2px 6px; /* 内側の余白を設定 */
    border-radius: 4px; /* 角を丸くする */
    margin-left: 10px; /* ドリルの文字との間隔を設定 */
    font-weight: 700; /* ベータ版の文字を太字に設定 */
    vertical-align: middle; /* ベータ版の位置を中央に揃える */
    margin-left: 10px; /* ドリルの文字との間隔を設定 */
    position: absolute;
    top: 0;
    right: -70px; /* ロゴのすぐ横に配置 */
}

.catchphrase {
    font-size: 18px;
    margin: 0;
    margin-left: 80px;
}

/* スマートフォン用のレスポンシブデザイン */
@media (max-width: 768px) {
    header {
        display: flex;
        flex-direction: column; /* ロゴとキャッチコピーを縦に並べる */
        align-items: flex-start; /* 左揃えにする */
        padding: 10px;
    }

    .logo-text {
        margin-left: 0; /* スマートフォンでは左マージンをリセット */
        text-align: center; /* テキストを中央揃え */
    }

    .logo-text::after {
        right: -70px; /* ベータ版バッジの位置を調整 */
    }

    .catchphrase {
        font-size: 15px;
        text-align: center;
        margin-left: 0px;
    }
}