<style>

body {
font-family:'メイリオ', 'Meiryo', sans-serif;
margin: 0;
background: #fff;
color: #222;
}

a {
text-decoration: none;
color: #222;
}

/* 全体構成 */
.container {
display: flex;
min-height: 100vh;
}

/* 左カラム */
.sidebar {
width: 400px;
padding: 40px 10px 40px 10px;
box-sizing: border-box;
border-right: 1px solid #ddd;
}

.menu {
list-style: none;
padding: 0;
margin: 0 0 60px 0;
}

.menu li {
margin: 20px 0;
font-size: 1.2rem;
}

.menu a {
text-decoration: none;
color: #222;
font-size: 1.2rem;
display: block;
transition: 0.2s;
padding: 10px;
}

.menu a:hover {
color: #666;
transform: translateX(3px);
}

.material-icons{
display: inline-flex;
vertical-align: middle;
padding-right: 10px;
}

.profile {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.6rem;
}

/* アイコン共通設定 */
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-image: url(##IMAGE_DATA_20_URL##);
background-size: cover;
background-position: center;
flex-shrink: 0;
}

/* 左のプロフィールアイコン */
.sidebar .icon {
width: 40px;
height: 40px;
}

/* メインカラム */
.center-content {
flex: 0 0 600px;
padding: 40px;
box-sizing: border-box;
}

/* ツイート画面 */
.post {
display: flex;
align-items: flex-start;
gap: 10px;
border-bottom: 1px solid #ddd;
padding: 20px 0;
}

.post-body {
flex: 1;
}

.post-header {
display: flex;
align-items: center;
gap: 10px;
}

.name {
font-weight: bold;
}

.id {
color: #666;
}

.date {
margin-left: auto;
color: #666;
font-size: 0.9rem;
}

.content {
margin: 5px 0 0 0;
color: #555;
}

/* 「いまどうしてる？」欄 */
.new-post {
color: #aaa;
}
.new-post .placeholder {
margin: auto 0;
font-size: 1rem;
}

.new-post .placeholder .material-icons {
color: #9fc4f4;
font-size: 1rem;
}

.right-content {
width: 300px;
padding: 40px;
box-sizing: border-box;
}

/* スマホ用トリガー（ハンバーガー） */
.navTrigger {
    display: none;
}

/* スマホ用 */
@media (max-width: 700px) {

    /* container は横並びのままでOK（あなたの希望通り） */
    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    /* 左カラム（sidebar）を完全に幅0扱いにする */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0 !important;
        height: 100vh;
        overflow: hidden;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        background: #fff;
        z-index: 9998;
        padding: 0 !important;
        border-right: none;
    }

    /* 展開時だけ幅を戻す */
    .sidebar.active {
        width: 220px !important;
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        padding: 40px 10px !important;
    }

    /* メニューの位置指定は削除（これが横幅の原因だった） */
    .sidebar .menu {
        margin: 40px 0 0 0;
        padding: 0;
    }

    /* ハンバーガーアイコン */
    .navTrigger {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px;
        width: 32px;
        height: 24px;
        z-index: 9999;
        cursor: pointer;
        background: none !important;
    }

    .navTrigger::before,
    .navTrigger::after,
    .navTrigger span {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background: #000;
        border-radius: 2px;
    }

    .navTrigger::before { top: 0; }
    .navTrigger span { top: 10px; }
    .navTrigger::after { bottom: 0; }

    /* center-content を全幅に */
    .center-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box;
    }

    /* 右カラムはスマホでは非表示（Twitter風） */
    .right-content {
        display: none;
    }
}

</style>
