body {
    font-family: 'Zen Antique Soft', serif;
    margin: 0;
    background-color: #d1d1d1; 
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #25232c;
    min-height: 100vh;
}

.site-header {
    display: flex;
    justify-content: space-between; /* ロゴとアイコンを両端に配置 */
    align-items: center;
    padding: 10px 15px;
    background-color:#211a32;
    border-bottom: 1px solid #000000;
    position: sticky; /* ヘッダーを画面上部に固定 */
    top: 0;
    z-index: 10;
    min-height: 30px; /* ヘッダーの最小高さ */
}

.logo-image {
    height: 30px; 
    width: 30px; /* ロゴのサイズ（仮）*/
    background-color: #211a32; /* 画像がない場合の仮表示 */
}


/*  チェックボックス本体を隠す */
.menu-btn-check {
    display: none;
}

/* ハンバーガーアイコン（ラベル）の位置と形 */
.menu-btn-icon {
    display: block;
    width: 30px;
    height: 24px;
    cursor: pointer;
    position: relative; 
    z-index: 100; /* メニューより手前に表示 */
}

/* ハンガーアイコンの三本線（真ん中） */
.menu-btn-icon-line {
    display: block;
    background-color: transparent; /* ★真ん中の線を透明にする */
    width: 100%;
    height: 3px;
    position: relative;
    top: 10px; 
    transition: all 0.3s;
}

/*  ハンガーアイコンの三本線（上と下） */
.menu-btn-icon-line::before,
.menu-btn-icon-line::after {
    content: ""; 
    display: block;
    background-color: #b3ac99; /* 線の色 */
    width: 100%;
    height: 3px;
    position: absolute;
    transition: all 0.3s;
    border-radius: 3px; /* ★角を丸くする */
}

.menu-btn-icon-line::before {
    top: -6px; 
}

.menu-btn-icon-line::after {
    top: 6px; 
}
/* メニュー本体（開いた時に表示される中身） */
.menu-content {
    background-color: #f8f8f8;
    width: 200px;
    position: fixed; /* 画面に固定 */
    top: 0;
    right: -200px; /* ★重要：最初は画面の外（右側）に隠しておく */
    height: 100vh; /* 画面の高さ100% */
    padding-top: 60px; /* ヘッダーの高さ分くらい空ける */
    z-index: 50; /* アイコンよりは後ろ */
    transition: right 0.3s; /* 0.3秒かけてヌルッと動く */
    border-left: 1px solid #ddd;
}

.menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-content li {
    padding: 15px 20px;
    border-bottom: 1px solid #000000;
    cursor: pointer;
}
.menu-content li:hover {
    background-color: #eee;
}

.menu-btn-check:checked ~ .menu-content {
    right: 0; /* 画面の右端にピタッ！ */
}

/* チェックされたらアイコンを「×」印に変える */
.menu-btn-check:checked ~ .menu-btn-icon .menu-btn-icon-line {
    background-color: transparent; /* 真ん中の線を透明にする */
}
.menu-btn-check:checked ~ .menu-btn-icon .menu-btn-icon-line::before {
    transform: rotate(45deg); /* 上の線を45度回転 */
    top: 0;
}
.menu-btn-check:checked ~ .menu-btn-icon .menu-btn-icon-line::after {
    transform: rotate(-45deg); /* 下の線を-45度回転 */
    top: 0;
}

.profile-main {
    /* ヘッダーがstickyで固定されてるので、その分だけ隙間をあける */
    padding-top:   0px; 
}

.profile-header {
    position: relative;
    margin-bottom: 40px; /* アイコンの半分だけマージンをとる */
}

.cover-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: #ddd; 
}

.profile-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #b3ac99;
    
    position: absolute;
    bottom: -50px; /* カバー写真の下に半分はみ出す */
    left: 20px;
    
    object-fit: cover;
    background-color: #aaa; 
}

.profile-info {
    padding: 15px 20px;
    position: relative;
    color: #ececec
}

.follow-button {
    position: absolute;
    top: 15px;
    right: 20px;
    
    background-color: #b3ac99; 
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

.profile-info h1 {
    font-size: 24px;
    margin: 0;
    font-weight: normal;
}
.profile-info .roman-name,
.profile-info .affiliation {
    color: #ececec;
    margin: 2px 0;
    font-size: 14px;

}
.profile-info .website-link {
    color: #b3ac99;
    text-decoration: none;
    font-size: 14px;
    margin: 2px 0;
}
.follow-stats {
    display: flex;
    gap: 50px;
    margin: 30px 0;
    color: #ececec;
    font-size: 14px;
}
.follow-stats strong {
    color: #ececec;
    font-size: 15px;
}
.bio {
    font-size: 15px;
    line-height: 1.5;
}

.card {
    border-top: 1px solid #b3ac99;
    padding: 20px;
    margin-top: 5px;
    color: #ececec;
}
.card h2 {
    font-size: 18px;
    margin: 0 0 15px 0;
}

.schedule ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.schedule li {
    padding: 10px 0;
    font-size: 15px;
}
.schedule .location {
    font-size: 13px;
    color: #ececec;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.icon-location {
    width: 14px;
    height: 14px;
    background-color: #211a32; 
    border-radius: 50%;
}
.more-options .icon-ellipsis {
    width: 18px;
    height: 18px;
    background-color: #211a32; 
}

.gallery-scroll {
    display: flex;
    overflow-x: auto; /* 横スクロールできるようにする */
    gap: 10px;
}
.gallery-scroll img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #ddd; 
    flex-shrink: 0; /* 画像が縮まないようにする */
}