<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 200px;
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("#画像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;
}


@media (max-width: 700px) {
.container {
flex-direction: row;
flex-wrap: nowrap;
}

/* 左カラム */

.sidebar .menu {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
margin: 0 0 60px 0;
}

/* スマホ表示の場合、左カラムのテキストを非表示 */
.sidebar .menu li a {
font-size: 0;
padding: 5px 0;
}

/* プロフィールアイコンを非表示 */
.sidebar .profile {
display: none;
}

.sidebar {
width: 60px;
padding: 10px 5px;
}

/* メインカラム */
.center-content {
flex: 1;
padding: 20px;
min-width: 0;
}

/* 各サイズ調整 */
.post {
gap: 5px;
}
}

.icon {
width: 40px;
height: 40px;
}

.name {
font-size: 0.7rem;
}

.id {
font-size: 0.7rem;
}

.date {
font-size: 0.7rem;
}

.content {
font-size: 0.8rem;
}
</style>
