:root {
  --main-color: #00acee;
  --hover-color: #f5f8fa; /* 薄いグレー */
}

*, *::before, *::after
{
     box-sizing: border-box;
}

*
{
    padding: 0;
    margin: 0;
}

html {
  scroll-behavior:smooth;
}

/* darkmode */
body.dark-mode {
    --main-color: #1da1f2;
    --hover-color: rgba(255, 255, 255, 0.04);
    --bg-color: #121212;
    --text-color: #f5f5f5;
}

/* Datail Icon color */
/* 通常モード */
.articles-icon-items-wrapper .tw i {
  color: #000;
}
.articles-icon-items-wrapper .fb i {
    color: #000;
}
.articles-hover i {
    color: #000
}
/* Darkmode用：白くする */
body.dark-mode .articles-icon-items-wrapper .tw i {
  color: #fff;
}
body.dark-mode .articles-icon-items-wrapper .fb i {
    color: #fff;
}
body.dark-mode .articles-hover i {
    color: #fff
}
/* ✅ Darkmode時の文字色を白に */
body.dark-mode .favorite-wrapper span {
    color: #f5f5f5;
}
body.dark-mode .users-wrapper span {
    color: #f5f5f5;
}
body.dark-mode .articles-description p {
    color: #f5f5f5;
}
body.dark-mode .articles-description p small {
    color: #ddd;
}
/* mobil icons */
/* ダークモード用スタイル */
body.dark-mode .mobile-nav {
    background: #1e1e1e;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
}

body.dark-mode .mobile-nav-link {
    color: #f5f5f5;
}

body.dark-mode .mobile-nav-icon {
    color: #f5f5f5;
}

/* hover や active 状態も対応 */
body.dark-mode .mobile-nav-icon:hover,
body.dark-mode .mobile-nav-icon:active {
    color: var(--main-color); 
}
/* scroll  */
body.dark-mode .mobile-nav {
  background: #1e1e1e;
}
/* user name */
body.dark-mode .following-feed-wrapper p {
        color: #f5f5f5;
    }
/* like */
body.dark-mode .liked .liked_heart {
    color: var(--main-color);
  }
/* like count */
body.dark-mode .articles-sum span {
    color: #f5f5f5;
}
/* count num */
body.dark-mode .info-wrapper strong {
    color: #f5f5f5;
}
/* infor */
body.dark-mode .info-wrapper span {
    color: #f5f5f5;
}
/* articles day */
body.dark-mode .articles-item small {
    color: #f5f5f5;
}
/* left nav right border */
body.dark-mode .left {
    border-right: 0.5px solid rgba(255, 255, 255, 0.1);
}
/* 下線 */
body.dark-mode .following-feed-wrapper {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
}
/* user name top */
body.dark-mode .articles-item p {
    color: #f5f5f5;
}
body.dark-mode .article-item p small {
    color: #cdcbcb;
}
/* user name */
body.dark-mode .articles-caption-inline .username a {
        color: #f5f5f5;
    }
/* snippet text */
body.dark-mode .snippet-text {
    color: #f5f5f5;
}
/* read-more */
body.dark-mode .read-more {
    color: #cdcbcb;
}
/* favorite-title */
body.dark-mode .favorite-title span {
    color:#f5f5f5;
}
/* swiper side button */
body.dark-mode .custom-swiper-button {
    background-color: gray;
}
* left nav right border */
body.dark-mode .left {
    border-right: 0.5px solid rgba(255, 255, 255, 0.1);
}
/* 下線 */
body.dark-mode .following-feed-wrapper {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
}

/* Debug */
/* * {
  outline: 1px solid red;
} */

/* Main */
body {
    font-family: 
    "Arial", 
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "Osaka",
    "メイリオ",
    "Meiryo",
    "MS Ｐゴシック",
    "MS PGothic",
    sans-serif;
    background-color: var(--bg-color, #fff);
    color: var(--text-color, #000);
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;    /* 縦スクロールは許可（これが必要） */
    touch-action: auto;  /* ← これもズーム有効化の鍵 */
}

a {
  color: var(--main-color);
}

a:hover {
  background-color: var(--hover-color);
}

/* headerやボタンにも反映 */
.header-icon-circle {
  background-color: var(--bg-color);
}

button {
  color: var(--main-color);
  background-color: transparent;
  border: none;
}
.fas {
  color: var(--text-color);
}

ul
{
    list-style: none ;
}

a
{
    text-decoration: none ;
}

.container {
    display: flex;
    height: 100vh; /* 必要に応じて */
    max-width: 100%;
}

.global-tag
{
    text-align:center ;
    margin-bottom: 20px;
}


/* mobil header */
.mobile-nav-wrapper {
    top: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background: #fff;
    display: flex;
    overflow-x: auto;
    z-index: 999;
    justify-content: space-between;
    transition: transform 0.3s ease-in-out;
}

/* ダークモード用 */
body.dark-mode .mobile-nav-wrapper {
    background: #1e1e1e;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.05);
}

/* スクロールイベント */
.mobile-nav-wrapper.scroll-down {
    transform: translateY(-100%);
}

.mobile-nav-wrapper.scroll-up {
    transform: translateY(0%);
}

/* オプション：アイコンカラー調整 */
body.dark-mode .mobile-profile-container i,
body.dark-mode .fas.fa-search {
    color: #e0e0e0;
}

/* オプション：検索バー入力 */
body.dark-mode .mobile-search-input {
    background-color: #2b2b2b;
    color: #f5f5f5;
    border: none;
}

/* optional logo color override */
body.dark-mode .mobile-logo_1,
body.dark-mode .mobile-logo_2 {
    color: #e0e0e0;
}

/* end scroll event */

.mobile-nav-wrapper {
    top       : 0;
    width     : 100%;
    height    : 50px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background: #fff;
    display   : flex;
    overflow-x: auto;
    z-index   : 999;
    justify-content: space-between;
    transition: transform 0.3s ease-in-out;
}
/* Scroll Event */
.mobile-nav-wrapper.scroll-down {
    transform: translateY(-100%);
}

.mobile-nav-wrapper.scroll-up {
    transform: translateY(0%);
}

.mobile-nav-top-link
{
    display: flex ;
    flex-direction: column ;
    align-items: center ;
    justify-content: center ;
    /*flex-grow: 1;*/
    min-width: 50px;
    overflow: hidden ;
    white-space: nowrap ;
    color: gray;
    text-decoration: none ;
    -webkit-tap-highlight-color:transparent ;
    transition: background-color 0.1s ease-in-out ;
}

.mobile-profile-container {
    display       : flex ;
    justify-content: center;
    align-items    : center ;
}

.mobile-profile-container img {
    border-radius:50%;
    width        :30px;
    height       :30px;
}


.mobile-profile-container i
{
    color: #333;
    font-size: 30px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #fff;
}
/* mobile logo */
.mobile-wrapper_circle
{
    font-family: 'Baloo Paaji 2', cursive;
    height:36px;
    width:36px;
    border-radius:50%;
    z-index:1;
    position:relative;
    background:var(--main-color);
}

.mobile-logo_1
{
    position:absolute;
    font-size:26px;
    color: #fff;
    transform: translateX(30%);
    -webkit-transform: translateX(30%);
    top: -10px;

}

.mobile-logo_2
{
    position:absolute;
    font-size:26px;
    color: #fff;
    transform: translateX(110%) ;
    -webkit-transform: translateX(110%);
    top: 4px;
}

/* mobile nav */
.mobile-nav-top-link button
{
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mobile-nav-top-link button i
{
    cursor: pointer;
    font-size: 16px;
    color: var(--main-color);
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #fff;
}


/* mobile nav search */

.mobile-nav-top-link button
{
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mobile-nav-top-search
{
    background: rgba(234, 242, 245, 0.62);
    width: 100%;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 15px;
    display: flex ;
    justify-content: center ;
    align-items: center ;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.mobile-search input[type="text"]
{
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    height: 100%;
    width: 100%;
    vertical-align: middle ;
    line-height: normal ;
}


.mobile-search-input{
    width: 100%;
    height: 100%;
    position: relative ;
    font-size: 16px;
    margin-left: 3px;
}

.mobile-search i
{
    font-size: 18px;
    margin-left: 10px;
    vertical-align: middle ;
    color: gray ;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #fff;
}

.mobile-search.active
{
    background: #fff;
    border: 1px solid var(--main-color);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 100%;
    height: 100%;
}

.mobile-search.active i
{
    color: var(--main-color);
}

/* left style icon */

/* Logo */
.wrapper_circle
{
    font-family: 'Baloo Paaji 2', cursive;
    height:70px;
    width:70px;
    border-radius:50%;
    z-index:1;
    border:double 10px #fff;
    position:relative;
    background:#555d66;
    margin-left: 8px;
    }

.logo_1
{
    position:absolute;
    top:-6px;
    left:10px;
    font-size:30px;
    color: #fff;
}

.logo_2
{
    position:absolute;
    top:10px;
    left:24px;
    font-size:30px;
    color: #fff;
}

.logo:hover
{
    background-color: unset!important;
}
li.logo {
    margin-top: 10px;
    margin-bottom: 23px;
    display: flex;
}

/* left icons */
/* 左ナビ全体 */
.left {
  width: 20%;
  flex-shrink: 0;
  border-right: 0.5px solid #ddd;
  padding: 1rem;
  overflow-y: auto;
}

/* スクロールしても追従） */
/* left icons wrapper */
.left-icons-wrapper {
    padding-left:6px;
    flex-direction: column;
    gap: 24px; /* アイコンの間のスペース */
}

/* 各リンク（アイコン + ラベル） */
/* 各項目をブロック状にする */

.icon-item {
    margin-bottom: 12px;  /* 各ボックスの間隔 */
}

/* aタグをflexで水平に並べてbox化 */
.icon-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;  /* fa-icon に合わせた幅 */
  height: 24px;
}
.icon-wrapper i {
    font-size: 1.4rem;  /* 少し大きめ */
}

.icon-link:hover {
    background-color: var(--hover-color, #f0f0f0); /* 好きな色に */
    color: rgb(29, 161, 242); /* hover時に色変化 */
}

/* ラベルの文字 */
.icon-label-text {
    font-size: 18px;
    font-weight: 580;
    white-space: nowrap;
}

/* アイコン */
.icon-link i {
    font-size: 23px;
}

/* create button */
.create-btn
{
    background: #1da1f2;
    color: #fff;
    font-size: 23px;
    border: none ;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}


.create-btn:hover
{
    cursor: pointer ;
    background: rgba(0, 148, 255, 0.97);
}

.left-profile-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* profile style */
.profile-pic
{
    border-radius:50%;
    width:40px;
    height:40px;
}

.profile-link
{
    display: flex ;
    justify-content: center ;
    justify-items: center ;
}

.profile-container
{
    display: flex ;
    justify-content: center;
    align-items: center ;
    color: rgb(101,119,134);
}

.icon-container
{
    display: flex ;
    justify-content: center ;
    align-items: center ;
    color:rgb(101,119,134);
    border-radius: 50%;
    position:relative;
}


.fa-ellipsis-h
{
    border-radius:50%;
    border: 2px solid rgb(20, 23, 26);
    width:30px;
    height:30px;
    display: flex ;
    justify-content: center ;
    align-items: center
}

.fa-ellipsis-h:hover
{
   border: 2px solid rgb(29, 161, 242) ;
}

.number{
    background:  #00acee;
    display: flex ;
    justify-content: center ;
    align-items: center ;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute ;
    transform: translateX(67%) translateY(-150%);
     -webkit-transform: translateX(67%) translateY(-150%);
    z-index: 1;
}

.live_notify_badge
{
    font-size: 12px;
    color: #fff;
}

.user-checking
{
    margin-left: 10px;
}

/* center and right */
/* 中央と右のスクロール領域 */
.center-and-right {
  display: flex;
  height: 100vh;
  overflow-y: auto; /* ✅ スクロールはここ */
  width: 80%;
  flex-grow: 1;
}
/* center style */
.center {
  width: 70%;
  padding: 3rem;
  flex-shrink: 0;
}

.center-header
{
    display: flex ;
    height: 53px;
    align-items: center ;
    justify-content: space-between ;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
}

.header-return {
    padding-left: 20px;
    padding-right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
}

.header-icon-text-wrapper {
    width: 100%;
    display: flex;
    align-items: center;       /* 縦の中央揃え */
    justify-content: space-between; /* 両端に配置（必要に応じて変更） */
    gap: 10px;                 /* 必要なら隙間調整 */
}

.header-return a
{
    color: var(--main-color);
}

.header-return i
{
    position: absolute ;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) ;
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.header-return:hover
{
    background:var(--hover-color);
}

.header-name
{
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    align-items: center ;
    margin-left: 10px;
}

.header-name span
{
    font-size: 14px;
    color: gray ;
}
/* profile */
.profile-bg
{
    text-align: center ;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.background-img
{
    width: auto ;
    height: 200px;
}

.background-img img
{
    width: 100%;
    height: 200px;
    object-fit: cover ;
    border-radius: 2px;
}


.profile-description
{
    position: relative ;
    bottom: 80px;
    padding-left: 10px;
    z-index: 1;
    border-bottom: 0.5px solid #efefef;
    transition: transform 0.3s ease;
}

.profile-description  a:hover {
    text-decoration: none;
    background: none;
    color: inherit;
}

.profile-description img
{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #eee;
}



.edit
{
    background-color: #fff;
    border-radius: 28px;
    border: 1px solid #0084b4;
    display: inline-block;
    cursor: pointer;
    color: #08a2e9;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    padding: 10px;
    margin-top: 90px;
    margin-right: 10px;
    position: absolute ;
    right: 2px;
}
.edit:hover {
    background-color: #e8f5fd;
}

.profile-description a:hover
{
    color: gray;
}

.profile-wrapper {
    padding-left: 10px;
}
.profile-name
{
    margin: 10px auto ;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2;
}

.profile-bio
{
    font-size: 15px;
    letter-spacing: 0.2;
    padding: 16px 6px 16px 6px;
}

.fa-link
{
  color: gray  ;
  padding-right: 4px;
}

.profile-website a
{
    color: var( --main-color)
}

.info-wrapper {
    padding-bottom: 8px;
}

.info-wrapper ul li
{
    text-decoration: none ;
    display: inline-block ;
    padding-top: 20px;
    padding-right: 10px;
}

.info-wrapper span
{
    font-size: 15px;
    color: gray ;
}

.info-wrapper strong
{
    color: #333;
}

/* profile follow unfollow */
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* フォローボタンの基本スタイル */
.follow-button {
    background-color: #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
    font-weight: 400;
}
.follow-form {
    margin-top: 60px;
}

.follow-button.is-following {
    background-color: #999;
}

/* articles */
.articles-description {
    padding-top: 16px;
    padding-left: 16px;
}
.articles-description p {
    color: #333;
}
.following-feed-wrapper {
    width: min(470px, 100vw); /* ← vw（画面幅）にするのが一般的 */
    max-width: 100%;
    margin: 0 auto; /* 中央寄せ */
    border-bottom: 0.5px solid #efefef;
    transition: transform 0.3s ease;
}

.article-wrapper{
    box-sizing: border-box;
}

.article-wrapper ul li
{
    text-decoration: none ;
    display: inline-block ;
    vertical-align: middle;
    margin: 10px  2px 10px  2px ;
}

.following-feed-wrapper:hover {
  background: var(--hover-color);
}

.articles-item img
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.articles-item small
{
    color: gray ;
}

.following-articles
{
    margin: 2px;
    padding-left: 16px;
}

/* articles thumbnail */
.articles-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.articles-thumb .swiper-container {
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
}

.articles-thumb .swiper-wrapper {
    height: 100%;
}

.articles-thumb .swiper-slide {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.articles-thumb .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 矢印ボタンスタイル --- */
/* ボタンの共通スタイル */
.custom-swiper-button {
    width : 23px;
    height: 23px;
    background-color: rgba(250, 246, 246, 0.971);
    opacity: 0.8;
    border-radius: 50%;
    color: #666666ab;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

/* Font Awesome アイコンサイズ */
.custom-swiper-button i {
    font-size: 14px;
}

/* 位置調整 */
.swiper-button-prev {
    left: 8px;
}

.swiper-button-next {
    right: 8px;
}

/* デフォルトの ::after を非表示にする */
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

/* --- pagination スタイル --- */
.articles-thumb .swiper-pagination-bullets {
    bottom: 6px;
}

.articles-thumb .swiper-pagination-bullet {
    background-color: white;
    opacity: 0.7;
    z-index: 1;
}

.articles-thumb .swiper-pagination-bullet-active {
    background-color: #1c507a; /* アクティブ時は少し濃い青 */
    opacity: 1;
    z-index: 1;
}

/* username badge snippet  */

/* 基本レイアウト */
.articles-caption-inline {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 16px;
  color: #262626;
  padding: 8px 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ユーザー名部分 */
.username-badge-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.username-badge-wrapper a {
    color: #262626;
}

/* テキスト部分の最小高さを確保してUIが崩れないように */
.snippet-wrapper {
  overflow: hidden;
  transition: max-height 0.1s cubic-bezier(0.25, 1, 0.5, 1);
  max-height: 80px;
  overflow-anchor: none;
}

.snippet-text {
  word-break: break-word;
  cursor: pointer;
  min-height: 30px;
}
/* .snippet-text.expanded {
  max-height は JS が設定する
} */

/* 「続きを読む」リンク */
.read-more {
  font-size: 12px;
  color: #8e8e8e;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
}

/* atcicles icons */
.articles-icon-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
}

.edit-icon-item {
    color: gray;
    margin-left: auto; /* ← 右端に寄せる */
     margin-left: auto !important;
}

.articles-icon
{
    margin:10px;
}

.icon-items a
{
    color: gray ;
}

.icon-items .fa-edit
{
    margin-left: 4px;
}
/* following feed h3 */
.following-feed h3 {
    font-size: 16px;
}

/* edit */
/* アイコン色 */
.edit-icon-item i {
    color: gray;
}

/* 背景を edit-circle に、アイコン色を i に */
.edit-circle:hover {
    background-color: rgba(23, 191, 99, 0.12);
}

.articles-hover.edit-circle a {
    background-color: transparent;
    display: flex;           /* iタグが中央に来るように */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* liked */
.liked .liked_heart
{
    color:var(--main-color);
}


.articles-icon ul li
{
    margin: 0;
}

.articles-icon-wrapper {
  display: flex;
  align-items: center;  
  gap: 2px;              
  padding-right: 10px;
}
.articles-icon-wrapper i {
    font-size: 23px;
    color: gray;
}

.articles-hover,
.heart-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent; /* hover時に色が付くように */
}

.articles-hover.heart-circle:hover {
  background: var(--hover-color);
}

.liked_heart {
  font-size: 20px;
  color: inherit;
}

.articles-sum span {
  font-size: 14px;
  color: gray;
  line-height: 1;
}

.articles-hover:hover
{
    background: var(--hover-color);
}

.heart-circle:hover
{
    background: rgba(71, 157, 255, 0.12)
}

.edit-circle:hover
{
    background: rgba(24, 218, 28, 0.14);
}

.articles-sum
{
    display: inline-block;
    justify-content: center ;
    align-items: center ;
    margin-left: 3px;
    font-size: 14px;
}

/* user_post_list  icons box*/
.articles-icon-box-user_post {
  display: flex;           /* 横並び */
  justify-content: flex-start; /* ← 左寄せにする */
  align-items: center;     /* 縦中央揃え（必要なら） */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* right style */
/* .right {
  width: 30%;
  padding: 1rem;
  flex-shrink: 0;
} */
.right-wrapper {
  position: relative; /* ✅ stickyやfixedをやめる */
  margin-top: 0;
}


/* おすすめアーティクル */
.favorite-articles
{
    width: 100%;
    margin-top: 72px;
}

.favorite-title
{
    padding: 10px ;
}

.favorite-title span, 
.users-title span {
    font-size: 14px;              /* または 13px */
    font-weight: 600;             /* セミボールド */
    color: #262626;               /* Instagramの標準テキスト色 */
    letter-spacing: 0.3px;        /* 若干の余白で視認性UP */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

.favorite-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 8px 10px;
}

.favorite-wrapper:hover
{
    background: var(--hover-color);
    border-radius: 16px;
}
.favorite-wrapper a:hover {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}
/* favorite Items */
.favorite-category
{
    color: gray ;
    line-height: 2;
}

.favorite-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* タイトル側が残り幅を使うように */
}

.favorite-items a {
    color: #333;
    text-decoration: none;
}

.favorite-items span {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-thumb {
    margin-left: 12px;
    flex-shrink: 0;
}

.favorite-thumb img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%; /* 丸型に */
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
/* さらに見る */
.favorite-info
{
    padding: 14px;
}

.favorite-info h5
{
    color: #00acee ;
    font-weight: 200;
}

/* おすすめユーザー */
.users
{
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.users-wrapper {
  box-sizing: border-box;
  padding: 8px 10px;
}

.users-box {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 10px;
}

.users-items img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%; /* 丸くする */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.users-items span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}
.users-wrapper:last-child
{
    border-bottom: none ;
}

.users-wrapper:hover
{
    background: var(--hover-color);
    border-radius: 16px;
}

/* Right item under */
.web-info, .web-info a
{
    text-align: center ;
    color: gray ;
    margin-top: 10px;
}

.web-info span
{
    font-size: 15px;
    padding-right: 10px;
}

.web-info span:hover
{
    text-decoration: underline;
}

.copyright p
{
    font-size: 14px;
    margin-top: 6px;
}


/* mobile nav */
.mobile-nav
{
    position: fixed ;
    bottom: 0;
    width: 100%;
    height: 55px;
    z-index: 10;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background: #fff;
    display: flex ;
    overflow-x: auto ;
}

.mobile-nav-link
{
    display: flex ;
    flex-direction: column ;
    align-items: center ;
    justify-content: center ;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden ;
    white-space: nowrap ;
    color: gray;
    text-decoration: none ;
    -webkit-tap-highlight-color:transparent ;
    transition: background-color 0.1s ease-in-out ;
}

/* .mobile-nav-icon
{
    font-size: 26px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #fff;
} */
.mobile-nav-icon {
    font-size: 24px; /* 少し小さめに */
    color: #000;
    font-weight: 300; /* 効果は限定的（FontAwesomeには反映されないことも） */
    -webkit-text-stroke: 0 !important; /* 輪郭を除去してスッキリ */
}

.mobile-nav-icon:hover
{
    color: var(--main-color);
}

.mobile-nav-icon:active
{
    color: var(--main-color);
}

.mobile-nav .live_notify_badge
{
    font-size: 10px;
}


/* mobile nav */

.mobile-nav
{
    position: fixed ;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background: #fff;
    display: flex ;
    overflow-x: auto ;
}

.mobile-nav-link
{
    display: flex ;
    flex-direction: column ;
    align-items: center ;
    justify-content: center ;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden ;
    white-space: nowrap ;
    color: gray;
    text-decoration: none ;
    -webkit-tap-highlight-color:transparent ;
    transition: background-color 0.1s ease-in-out ;
}

.mobile-nav-icon {
    font-size: 24px; /* 少し小さめに */
    color: #000;
    font-weight: 300; /* 効果は限定的（FontAwesomeには反映されないことも） */
    -webkit-text-stroke: 0 !important; /* 輪郭を除去してスッキリ */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-nav-icon:hover
{
    color: var(--main-color);
}

.mobile-nav-icon:active
{
    color: var(--main-color);
}

.mobile-nav .live_notify_badge
{
    font-size: 10px;
}

/* 半透明（下スクロール時） */
.mobile-nav.scrolled-down {
  opacity: 0.3;
}

/* 元に戻す（上スクロール時） */
.mobile-nav.scrolled-up {
  opacity: 1;
}
/* hiden */
.mobile-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
}


/* pagination */

ul{
    padding:                  0;
    list-style-type:       none;
    }

.pager{
    position:          relative;
    top:                   30px;
    padding:               30px;
    }

.pager .pagination {
  text-align:            center;
    }

.pager .pagination li {
  display:               inline;
  margin:                 0 2px;
  padding:                    0;
  display:         inline-block;
  width:                   50px;
  height:                  50px;
  text-align:            center;
  position:            relative;
  border-radius:           50px;
  border:        1px solid #fff;
    }

.pager .pagination li.pre,
.pager .pagination li.next{
  background:            #a3e4e4;
  color:                    #fff;
    }

.pager .pagination li a{
  vertical-align:            middle;
  position:                absolute;
  top:                            0;
  left:                           0;
  width:                       100%;
  height:                      100%;
  text-align:                center;
  display:                    table;
  text-decoration:             none;
  -webkit-transition: all 0.3s ease;
  -moz-transition:    all 0.3s ease;
  -o-transition:      all 0.3s ease;
  transition:        all  0.3s ease;
    }

.pager .pagination li.pre a,
.pager .pagination li.next a{
  color:                       #fff;
    }

.pager .pagination li a span{
  display:               table-cell;
  vertical-align:            middle;
    }

.pagination li a
{
    color: #333;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color:                                #fff;
  background:                        #dde68e;
  border-radius:                        10px;
  border-radius:                        50px;
  animation:         animScale 0.4s ease-out;
  transform-origin:                  50% 50%;
  -webkit-animation: animScale 0.4s ease-out;
  -webkit-transform-origin:          50% 50%;
  -moz-animation: animScale    0.4s ease-out;
  -moz-transform-origin:             50% 50%;
    }

@keyframes animScale {
  0% { transform: scale(0.8, 0.8); }
  40% { transform: scale(1.2, 1.2); }
  60% { transform: scale(1, 1); }
  80% { transform: scale(1.1, 1.1); }
  100% { transform: scale(1, 1); }
    }

@-webkit-keyframes animScale {
  0% { -webkit-transform: scale(0.8, 0.8); }
  40% { -webkit-transform: scale(1.2, 1.2); }
  60% { -webkit-transform: scale(1, 1); }
  80% { -webkit-transform: scale(1.1, 1.1); }
  100% { -webkit-transform: scale(1, 1); }
    }

@-moz-keyframes animScale {
  0% { -moz-transform: scale(0.8, 0.8); }
  40% { -moz-transform: scale(1.2, 1.2); }
  60% { -moz-transform: scale(1, 1); }
  80% { -moz-transform: scale(1.1, 1.1); }
  100% { -moz-transform: scale(1, 1); }
    }

/* global footer */

.global-footer{
    margin:     100px auto;
    padding-bottom: 20px;
    }

/* @media */
@media only screen and (max-width: 768px) {
    .center {
    float: none;
    width: 100%;
    overflow-x: visible;
    }
    .pager .pagination li{
    display: none;
    }
    .pager .pagination li.pre,
    .pager .pagination li.next{
    display:            inline-block;
    width:                      42px;
    height:                     42px;
    text-align:               center;
    margin:                   0 auto;
    }
    .pager .pagination li.pre a,
    .pager .pagination li.next a{
    width:                      100%;
    text-align:               center;
    }
    .following-feed-wrapper p {
    font-size: 14px; /* 12〜14px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #262626; 
    margin: 2px 0;
    }
}

/* ipad 横 */
/* iPadサイズではラベルを非表示に */
@media (max-width: 1000px) {
    .left {
        width: 15%;
        flex-shrink: 0; 
    }
    .center-and-right {
        width:85%;
    }
    .center {
        width:100%;
    }
    .right {
        width: 0;
    }
    .right-wrapper {
        display: none;
    }
    .icon-label-text {
        display: none;
    }
    .sub_title {
        padding-top: 90px;
    }
    
    li.logo {
        justify-content: center;
        justify-items: center;
        padding-left: 0;
    }
    .wrapper_circle {
        justify-content: center;
        justify-items: center;
        margin-left: 0;

    }
    .icon-label-text {
    display: none;
    }

    .left-icons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    }

    .icon-item {
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    }

    .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    }
    .web-info, .web-info a span{
        font-size: 12px;
    }
}
/* scroll bar */
/* スマホ・タブレット（例: 768px 以下）ではスクロールバーを出さない */
@media (max-width: 768px) {
    html, body {
    height: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    }

    .center-and-right {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    }
    /* Chrome, Safari */
    .center-and-right::-webkit-scrollbar {
    display: none;
    }

    /* Firefox */
    .center-and-right {
    scrollbar-width: none;
    -ms-overflow-style: none;
    }
}

/* スマホ */
@media  screen and (max-width: 600px){
    .articles-description h1 {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
    }

    .articles-description p {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 2px;
    }

    .articles-description small {
    font-size: 10px;
    color: #888; 
    }

    .left
    {
        display: none ;
    }
    .right
    {
        display: none ;
    }
    .center
    {
        width: 100%;
        margin-top: 60px;
        padding: 0;
    }
    .following-feed-wrapper {
        width:100%;
    }
    .mobile-nav
    {
        z-index: 10;
    }
    .favorite-title span {
        font-size: 15px;
    }
    .profile-bio {
        margin-right: 30px;
    }
    .following-feed h3 {
        font-size: 14px;
    }
}

/* スマホ（幅600px未満）専用のナビやUIパーツを、
大きな画面（タブレットやPC）では非表示 */
@media (min-width: 600px) {
    .mobile-nav-wrapper {
        display: none;
    }
    .mobile-nav {
        display: none;
    }
    .mobile-create-circle {
        display: none;
    }
}

/* --- レスポンシブ調整 Swiper--- */
@media screen and (max-width: 768px), (hover: none) and (pointer: coarse) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

/* Darkmode 自動切り替え */
@media (prefers-color-scheme: dark) {
    body:not(.dark-mode) {
    --main-color: #1da1f2;
    --hover-color: rgba(255, 255, 255, 0.04);
    --bg-color: #121212;
    --text-color: #f5f5f5;
    }

    body:not(.dark-mode) .mobile-nav-wrapper {
    background-color: #1e1e1e;
    }
    body:not(.dark-mode) .articles-icon-items-wrapper .tw i {
    color: #fff;
    }
    body:not(.dark-mode) .articles-icon-items-wrapper .fb i {
    color: #fff;
    }
    body:not(.dark-mode) .articles-hover i {
    color: #fff;
    }
    body:not(.dark-mode) .favorite-wrapper span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .users-wrapper span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-description p {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-description p small {
    color: #ddd;
    }
    body:not(.dark-mode) .mobile-nav {
    background: #1e1e1e;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
    }

    body:not(.dark-mode) .mobile-nav-link {
    color: #f5f5f5;
    }

    body:not(.dark-mode) .mobile-nav-icon {
    color: #f5f5f5;
    }

    body:not(.dark-mode) .mobile-nav-icon:hover,
    body:not(.dark-mode) .mobile-nav-icon:active {
    color: var(--main-color); 
    }
    body:not(.dark-mode) .mobile-nav {
    background: #1e1e1e;
    }
    body:not(.dark-mode) .following-feed-wrapper {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
    }
    /* body:not(.dark-mode) .following-feed-wrapper p {
        color: #f5f5f5;
    } */
    body:not(.dark-mode) .username a {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .snippet-text {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .read-more {
    color: #cdcbcb;
    }
    body:not(.dark-mode) .liked .liked_heart {
    color: var(--main-color);
    }
    body:not(.dark-mode) .articles-sum span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .info-wrapper strong {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .info-wrapper span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-item small {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .favorite-title span {
    color:#f5f5f5;
    }
    body:not(.dark-mode) .custom-swiper-button {
    background-color: gray;
    }
    body:not(.dark-mode) .left {
    border-right: 0.5px solid rgba(255, 255, 255, 0.1);
    }
    body:not(.dark-mode) .profile-description,
    body:not(.dark-mode) .following-feed-wrapper {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
    }
}