.header-image {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    height: 70vh; /* ビューポートの70%の高さ */
    background-color: #000; /* 背景色を黒に設定 */
    overflow: hidden; /* 画像がはみ出ないようにする */
}

.header-image img {
    max-width: 100%; /* 画像の横幅を親要素内に収める */
    max-height: 100%; /* 画像の高さも親要素内に収める */
    object-fit: contain; /* 画像全体が見えるように調整 */
}


.profile {
    padding: 40px 20px;
    background-color: #000; /* 黒背景 */
    color: #fff; /* 白文字 */
    max-width: 800px;
    margin: 0 auto; /* センター揃え */
    line-height: 1.8; /* 読みやすい行間 */
}

.profile h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: #C400FF; /* カラフルなアクセントカラー */
}

.profile h2 {
    font-size: 1.8rem;
    margin-top: 30px;
    color: #C400FF;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
}

.profile h3 {
    font-size: 1.5rem;
    margin-top: 20px;
    color: #FF99FF; /* サブタイトル用カラー */
}

.profile p {
    margin-bottom: 20px;
}

.profile ul {
    margin: 20px 0;
    padding-left: 20px;
    list-style: disc; /* 通常の箇条書きスタイル */
}

.profile ul li {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .profile {
        padding: 20px;
    }

    .profile h1 {
        font-size: 2rem;
    }

    .profile h2 {
        font-size: 1.5rem;
    }

    .profile h3 {
        font-size: 1.2rem;
    }
}