/* --- base --- */
body{margin:0;font-size: 17px;font-family: "YakuHanJP", "游ゴシック体", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Helvetica, Arial, sans-serif;background:#f5f5f5;color:#222;}
a{text-decoration:none;color:inherit;}

/* header */
.x-header{height:70px;position:fixed;top:0;left:0;width:100%;background:#fff;border-bottom:1px solid #ddd;z-index:1000;transform:translateY(0);transition:.25s;}
.x-header-inner{max-width:600px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;justify-content:space-between;}
.header-hidden{transform:translateY(-100%);}
.logo-link{font-size:22px;font-weight:700;color:#111;line-height:1;}
.logo-image{
  height: 40px;
}
.x-nav{display:flex;align-items:center;gap:18px;margin-left:20px;}
.x-nav a{font-size:14px;color:#333;padding:6px 4px;transition:.15s;}
.x-nav a:hover{color:#0c8;}

/* layout */
.layout-wrap{display:flex;width:100%;margin:0 auto;padding-top:68px;}
.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:#fff;border-right:1px solid #ddd;padding:70px 10px;overflow-y:auto;margin:0;display:flex;flex-direction:column;z-index:900;}
.sidebar-menu ul{list-style:none;padding:0;margin:0;}
.sidebar-menu li{margin-bottom:14px;}
.sidebar-divider{height:1px;background:#ddd;margin:20px 20px;}
.sidebar-menu a{display:flex;align-items:center;padding:10px 14px;border-radius:6px;font-weight:500;color:#333;transition:.2s;}
.sidebar-menu a:hover{background:#eee;}
.sidebar-menu a.active{background:#0066cc;color:#fff;font-weight:700;}
.sidebar-menu a.disabled{opacity:.5;pointer-events:none;}
/* 右サイドバー用メニュー */
.sidebar-menu2 ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar-menu2 li{
  margin-bottom:14px;
}

/* a を flex 化してテキスト左・アイコン右を実現 */
.sidebar-menu2 a{
  display:flex;
  align-items:center;
  padding:10px 14px;
  border-radius:6px;
  color:#333;
  transition:.2s;
}

/* hover */
.sidebar-menu2 a:hover{
  background:#eee;
}

/* active（必要なら） */
.sidebar-menu2 a.active{
  background:#0066cc;
  color:#fff;
}

/* テキストは左寄せで伸縮（右側へ押し出しに利用） */
.sidebar-menu2 .menu-text{
  flex:1;
}

/* アイコンを右端に移動 */
.sidebar-menu2 .li-icon2{
  width:20px;
  height:20px;
  margin-left:auto;
  object-fit:contain;
  opacity:.85;
}
.li-icon{width:20px;height:20px;object-fit:contain;margin-right:8px;opacity:.85;}
.sidebar-right{
  position:fixed;
  top:0;
  right:0;
  width:240px;
  height:100vh;
  background:#fff;
  border-left:1px solid #ddd;
  padding:70px 10px; /* 左サイドバーと揃える */
  overflow-y:auto;
  z-index:900;
}
.container{max-width:600px;margin:0 auto;padding:16px;flex:1;margin-left:420px;}

/* post */
.post-box{background:#fff;border:1px solid:#ddd;border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.post-header,.user-link{display:flex!important;flex-direction:row!important;align-items:center!important;}
.icon{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:8px;}
.icon-large{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-right:12px;}
.post-content{font-size:16px;white-space:pre-wrap;margin:4px 0;}
.post-time{font-size:8px;color:#666;}
.post-link-area{display:block;color:inherit;}
.post-action-bar{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;}
.action-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;}
.action-btn:hover{background:#f0f0f0;}
.act-icon{width:18px;height:18px;}
.media-wrap{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
.post-image,.post-video{max-width:100%;border-radius:8px;}
.rt-info{font-size:12px;color:#666;margin-bottom:4px;}
.quoted-box{border:1px solid #ddd;border-radius:10px;padding:8px;margin-top:8px;background:#fafafa;}

.profile-box{display:flex;align-items:center;background:#fff;border:1px solid #ddd;border-radius:12px;padding:10px 12px;margin-bottom:16px;}
.profile-meta p{margin:4px 0;}
.btn-follow{padding:6px 14px;border-radius:20px;border:1px solid:#1d9bf0;color:#1d9bf0;background:#fff;}
.btn-follow.following{background:#1d9bf0;color:#fff;}

.reply-section{margin-top:16px;}
.reply-form textarea{width:100%;box-sizing:border-box;}
.reply-form button,.quote-form button{margin-top:6px;padding:6px 12px;border:none;border-radius:999px;background:#1d9bf0;color:#fff;cursor:pointer;}

.reply-item{background:#fff;border:1px solid #ddd;border-radius:10px;padding:8px 10px;margin-top:8px;}
.reply-header{display:flex;align-items:center;justify-content:space-between;}
.reply-time{font-size:11px;color:#777;}

.notif-item{display:flex;background:#fff;border:1px solid #ddd;border-radius:12px;padding:8px 10px;margin-bottom:8px;}
.notif-icon{margin-right:8px;}
.notif-body{flex:1;}
.notif-text{font-size:14px;margin-bottom:4px;}
.notif-meta{display:flex;justify-content:space-between;font-size:12px;color:#666;}
.notif-link{color:#1d9bf0;}

.quoted-original{background:#fff;border:1px solid #ddd;border-radius:12px;padding:8px 10px;margin-bottom:12px;}
.quote-form textarea{width:100%;box-sizing:border-box;}

/* media 16:9 */
.media-item{width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;position:relative;}
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover;object-position:top;display:block;cursor:pointer;}
.post-view-media{width:100%;margin:12px 0;border-radius:12px;overflow:hidden;}
.post-view-media img,.post-view-media video{width:100%;height:auto;object-fit:contain;object-position:top;background:#000;display:block;}

.x-footer{border-top:1px solid #ddd;margin-top:16px;}
.noti-badge{
  display:inline-block;
  padding:1px 6px;
  margin-left:6px;
  border:1px solid #ff8c00;
  border-radius:6px;
  font-size:12px;
  color:#ff8c00;
  background:#fff7e6;
}
.x-nav-sp{display:none;}
@media(max-width:600px){
  .x-nav{display:none;}
  .x-nav-sp{display:flex;gap:18px;}
}
/* ============================
   smart phone summary (最後に統合)
============================ */
@media(max-width:768px){
  /* ヘッダー */
  .x-header-inner{
    max-width:100%;padding:0 12px;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 左右サイドバー完全非表示 */
  .sidebar,
  .sidebar-right{display:none !important;}

  /* メインカラム最適化 */
  .container{
    max-width:100%;     /* スマホ幅いっぱい */
    margin-left: 10px;
    margin-right: 10px;
    padding:12px;       /* 過剰でない最適パディング */
    flex:1;
  }

  /* TL の見やすさ調整（任意） */
  .post-box{border-radius:10px;padding:10px;}
  .media-item{border-radius:10px;}
  .post-view-media{border-radius:10px;}
}
#floating-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid #ccc;  /* 下じゃなく上に影 */
    display: flex;
    justify-content: space-around; /* 均等配置 */
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

#floating-menu a {
    display: flex;
    flex-direction: column; /* 画像の上に文字 */
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 12px; /* 文字を小さく */
}

#floating-menu a img {
    width: 24px;   /* アイコンサイズ */
    height: 24px;
    margin-bottom: 4px; /* 文字との間隔 */
    object-fit: contain; /* 等倍表示 */
}

#floating-menu a:hover {
    color: #007BFF;
}
#floating-menu{transition:transform .3s;}
#floating-menu.footer-hidden{transform:translateY(100%);}
@media (min-width: 1024px) {
    #floating-menu {
        display: none !important;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
    }
}
#floating-menu a{
  position:relative;
}

.noti-badge-sp{
  position:absolute;
  top:-2px;
  right:14px;
  background:#ff5722;
  color:#fff;
  font-size:11px;
  padding:0 5px;
  border-radius:10px;
  line-height:1.4;
  font-weight:700;
  min-width:16px;
  text-align:center;
  box-shadow:0 0 2px rgba(0,0,0,.2);
}
.noti-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  font-size:12px;
  font-weight:600;
  color:#ff8c00;
  background:#fff7e6;
  border:1px solid #ff8c00;
  border-radius:6px;
  line-height:1.2;
}

/* PCでは非表示 */
@media(min-width:1024px){
  .noti-badge-sp{display:none;}
}
.disp{
  font-size: 20px;
  font-weight: bold;
}
.post-header{position:relative;}
.post-menu-btn{margin-left:auto;padding:4px 6px;cursor:pointer;font-size:20px;line-height:1;opacity:.7;}
.post-menu-btn:hover{opacity:1;}
.post-menu-popup{
  position:absolute;right:0;top:22px;
  background:#fff;border:1px solid #ccc;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-size:14px;z-index:9999;
}
.post-menu-popup div{
  padding:8px 12px;cursor:pointer;white-space:nowrap;
}
.post-menu-popup div:hover{background:#eee;}
.page-fade{position:fixed;inset:0;background:#fff;pointer-events:none;opacity:1;transition:opacity .18s ease-out;z-index:9999;}
.page-fade.-hide{opacity:0;}
.media-wrap{
  width:100%; display:grid; gap:4px; margin-top:8px;
}
.media-item{
  width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:10px;
}
.media-item img{
  width:100%; height:100%; object-fit:cover;
}

/* 1枚 → フル幅 */
.media-wrap.imgset-1{grid-template-columns:1fr;}
.media-wrap.imgset-1 .media-item{aspect-ratio:16/9;}

/* 2枚 → 1:1 の2列 */
.media-wrap.imgset-2{grid-template-columns:1fr 1fr;}
.media-wrap.imgset-2 .media-item{aspect-ratio:1/1;}

/* 3枚 → 上1枚 + 下2枚（Xと同じ） */
.media-wrap.imgset-3{
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
}
.media-wrap.imgset-3 .media-item:nth-child(1){
  grid-column:1/3; aspect-ratio:16/9;
}
.media-wrap.imgset-3 .media-item:nth-child(2),
.media-wrap.imgset-3 .media-item:nth-child(3){
  aspect-ratio:1/1;
}

/* 4枚 → 田んぼの田 */
.media-wrap.imgset-4{
  grid-template-columns:1fr 1fr;
}
.media-wrap.imgset-4 .media-item{
  aspect-ratio:1/1;
}
.profile-box-mini{
  margin-top: 20px;
  display:flex;align-items:center;background:#fff;
  padding:10px 12px;margin-bottom:16px;
}
.icon-side-mini{
  width:64px;height:64px;border-radius:50%;
  object-fit:cover;margin-right:10px;
}
.mini-info{flex:1;}
.mini-name{font-weight:700;font-size:15px;}
.mini-uname{color:#666;font-size:13px;margin-bottom:6px;}
.mini-ff span{margin-right:10px;font-size:13px;}
.btn-follow-mini{
  padding:4px 10px;border-radius:20px;font-size:13px;
  border:1px solid #1d9bf0;color:#1d9bf0;background:#fff;
}
.btn-follow-mini.following{background:#1d9bf0;color:#fff;}