: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;
}

/* Datil Icon color */
/* 通常モード */
.articles-icon-items-wrapper .tw i {
  color: #000;
}
.articles-icon-items-wrapper .fb 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, 
body.dark-mode .articles-icon-right i {
    color: #f5f5f5;
}
body.dark-mode .articles-description p {
    color: #f5f5f5;
}
body.dark-mode .articles-description p small {
    color: #ddd;
}
body.dark-mode .favorite-wrapper span {
  color: #f5f5f5;
}
body.dark-mode .users-wrapper span {
    color: #f5f5f5;
}
body.dark-mode .mobile-center-name {
    color: #f5f5f5;
}
/* 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;
    }

/* h3 */
body.dark-mode .header-name h3 {
    color: #f5f5f5;
}
/* user profile cade */
body.dark-mode .user_profile_card h3 a {
    color: #f5f5f5;
}
body.dark-mode .user_profile_card small {
    color: #f5f5f5;
}
body.dark-mode .user_profile_card p {
    color: #f5f5f5;
}
body.dark-mode .user_profile_btn {
    background-color: var(--main-color);
}
/* category */
body.dark-mode .categories h2 {
    color: #f5f5f5;
}
/* user name */
body.dark-mode .articles-caption-inline .username a {
        color: #f5f5f5;
    }
/* snippet text */
body.dark-mode .articles-caption-inline .snippet-text {
    color: #f5f5f5;
}
/* read-more */
body.dark-mode .articles-caption-inline .read-more {
    color: #cdcbcb;
}
/* like */
body.dark-mode .liked .liked_heart {
    color: var(--main-color);
}
/* 下線 */
body.dark-mode .following-feed-wrapper {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
}
/* user profile li */
body.dark-mode .user_profile_card li {
    color: #f5f5f5;
}
/* comment */
body.dark-mode .comment.author-comment {
    color: #f5f5f5;
}
body.dark-mode .comment.user-comment {
    color: #f5f5f5;
}
body.dark-mode .comment_wrapper p {
    color:#f5f5f5;
}
body.dark-mode .comment-bg {
        background:#121212;
    }

body.dark-mode .user-comment-text-box {
    background: #2a2a2a;
    }

body.dark-mode .user-comment-text-box:after {
    border-right: 20px solid #2a2a2a;
    }

body.dark-mode .author-comment-text-box {
    background: #355e3b; /* 落ち着いた緑系 */
    }

body.dark-mode .author-comment-text-box:after {
    border-left: 20px solid #355e3b;
    }

body.dark-mode .user-comment-text-box a,
    .author-comment-text-box a {
    color: #8ab4f8; /* Googleのdarkモードのリンク色風 */
    }

body.dark-mode .write-new textarea {
    background: #1e1e1e;
    color: #ddd;
    border-bottom: 0.5px solid #444;
    }

body.dark-mode .write-new img {
    background: #444;
    }

body.dark-mode .fa-lg {
    color: #ccc;
    }
body.dark-mode .comment-delete-btn-2 button i {
    color: gray;
    }

body.dark-mode .write-new button {
    background-color: var(--main-color);
    color: #fff;
    }

body.dark-mode .write-new span {
    color: #aaa;
    }
/* book mark p */
body.dark-mode .bookmark-snippet p {
    color: #1e1e1e;
}
/* login h4 (or) */
body.dark-mode .social-line h4 {
    color: var(--main-color);
}
/* user profile bio */
body.dark-mode .users-item-bio p {
    color: #f5f5f5;
}
/* pagenation */
body.dark-mode .pager .pagination li a span {
    color:#f5f5f5;
}
/* follow is follow page */
body.dark-mode .users-card:hover {
  background-color: #444;
}
body.dark-mode .followed-note {
    color: #9c9391;
}
body.dark-mode .user-bio {
    color: #f5f5f5;
}
/* password reset p */
body.dark-mode .password-reset-wrapper p {
    color:#f5f5f5;
}
body.dark-mode .password_reset {
    color:#f5f5f5;
}
/* search username */
body.dark-mode .hover-user-trigger {
    color: #f5f5f5;
}
/* privacy p */
body.dark-mode .privacy p {
    color: #f5f5f5;
}
/* Hover Card */
body.dark-mode .hover-profile-card {
    background-color: #2a2a2a;
}
body.dark-mode .hover-profile-bio {
    color: #f5f5f5;
}
body.dark-mode .hover-profile-follow {
    color: #ccc;
}
body.dark-mode .follow-count {
    color: #fff;
}
body.dark-mode .hover-user-trigger {
    color: #f5f5f5;
}
/* profile edit icon */
body.dark-mode .column_3 i {
    color: var(--main-color);
}
/* swiper side button */
body.dark-mode .custom-swiper-button {
    background-color: gray;
}
/* create form icon */
body.dark-mode .form_group i {
    color: var(--main-color);
}
/* edit article */
body.dark-mode .site-form,
body.dark-mode .site-form input[type="text"],
body.dark-mode .site-form input[type="email"],
body.dark-mode .site-form input[type="url"],
body.dark-mode .site-form textarea,
body.dark-mode .site-form select {
    background-color: #2c2c2c;
    color: #f5f5f5;
}
/* Tag  */
.dark-mode .hashtag-modal-content {
  background: #1e1e1e;
  color: #eee;
}
/* notification */
.dark-mode .notification_wrapper .drop-down {
    background: #1e1e1e;
    border: 1px solid #444;
}
.dark-mode .notification_wrapper .drop-down .notify_item {
    border-bottom: 0.5px solid #a09e9e;
}
/* Dark mode 用の色上書き */
.dark-mode .notification_wrapper .drop-down .notify_item .unread p,
.dark-mode .notification_wrapper .drop-down .notify_item .unread p a {
    color: #f5f5f5;
}
.dark-mode .notification_wrapper .drop-down .notify_item .read .notify_time,
.dark-mode .notification_wrapper .drop-down .notify_item .read p,
.dark-mode .notification_wrapper .drop-down .notify_item .read p a {
    color: rgb(86, 84, 84);
}
/* about */
body.dark-mode .about_wrapper {
    background: #121212;
}
body.dark-mode .about_content p {
    color: #e0e0e0;
}
body.dark-mode .about_box {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

body.dark-mode .about_box:hover {
    background: rgba(255, 255, 255, 0.05); /* optional override */
}
/* end-message circle */
body.dark-mode .gradient-border-inner {
    background: var(--bg-color);
}
/* form label e.g. bio and website */
body.dark-mode .site-form label{
    color:                 #f5f5f5;
    }
/* search */
body.dark-mode .search-wrapper {
    background-color: #333;
}

/* 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);
}

/* 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;
    margin-top: 20px;
}
.empty-message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    text-align: center;
}


/* 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-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-profile-container .fa-info-circle
{
    color: var(--main-color) ;
}

/* 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);
    overflow: hidden;
}

.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-center-name
{
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 900;
    color:rgb(20, 23, 26);
}


/* 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 {
    display: flex;
    margin-top: 10px;
    margin-bottom: 23px;
}

/* left icons */
/* 左ナビ全体 */
.left {
  width: 20%;
  flex-shrink: 0;
  padding: 1rem;
  overflow-y: auto;
}
/*（スクロールしても追従） */
/* left icons wrapper */
.left-icons-wrapper {
    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 style */

.center {
    width: 60%;
    padding: 1rem;
    flex-shrink: 0;
}

.center-header {
    display: flex ;
    padding-top: 10px;
    padding-bottom: 10px;
}

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

.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 {
    margin-left: 20px;
    display: flex ;
    justify-content: center ;
    justify-items: center ;
    align-items: center ;
}

.header-name h3 {
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 26px;
    color:rgb(20, 23, 26);
}

.header-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex ;
    justify-content: center ;
    justify-items: center ;
    align-items: center ;
}

.header-icon-circle:hover {
    background: var(--hover-color);
    border-radius: 50px;
}

.header-icon i {
    color: var(--main-color) ;
}

.darkmode-wrapper {
    display: flex;
    margin-left: auto;
    align-items: center; /* 中央揃え（縦方向） */
    padding-right: 10px; /* 任意の余白 */
}

/* right style */

.right {
    /*background: ghostwhite;*/
    width: 20%;
    height: auto;
    display: flex ;
    float:right;
}


/* content */

/* articles */
.username a {
    font-size: 16px;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.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 .following-feed-wrapper .following-articles > li {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 2px;
    text-decoration: none;
}

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

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

.articles-item p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 550; /* Usernameを少し太く */
    line-height: 1.4;
    color: #262626;
    margin: 0;
}

.articles-item p small {
    font-weight: 400;
    font-size: 12px;
    color: #8e8e8e; 
    margin-left: 4px;
}

.following-articles
{
    padding-left: 8px;
    padding-top: 2px;
}

.articles-thumb {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.articles-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* Swiper */
.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;
}
/* --- SWiper 矢印ボタンスタイル --- */
/* ボタンの共通スタイル */
.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;
}

/* --- Swiper pagination スタイル --- */
/* Swiper pagenation */
/* スワイパーのページネーションを nav の下に隠す */
.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;
}


/* articles description */
/* 基本レイアウト */
.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;
}

/* search box (main と 同じ) */
.articles-icon {
    display: flex;
    justify-content: space-between;  /* 左右に分ける */
    align-items: center;
    margin: 10px;
}
.articles-icon-left ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.articles-icon-wrapper {
    display: flex;
    align-items: center;
    height: 50px;
}

.articles-icon-wrapper i,
.articles-icon-right i {
    font-size: 23px;
    color: gray;
}

/* hover user profile */
.hover-user-trigger {
    color: #333;
}
.hover-wrapper {
  position: relative;
  display: inline-block;
}

.hover-profile-card {
  display: none;
  position: absolute;
  z-index: 999;
  width: 250px;
  background: white;
  border: 0.5px solid #ccc;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- 表示制御用クラス（JSで付与）--- */
.hover-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* --- プロフィール画像 --- */
.hover-profile-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 2px;
}
/* フォローボタンを画像の右横に配置 */
.hover-profile-follow-btn form {
  margin-left: 8px;
}

.follow-button {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 16px;
  border: 0.5px solid #ccc;
  background-color: black;
  cursor: pointer;
  transition: all 0.2s ease;
}

.follow-button .follow-text {
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* ✅ フォロー中（白背景） */
.follow-button.is-following {
  background-color: white;
  border: 1px solid #ccc;
}

.follow-button.is-following .follow-text {
  color: black;
}

/* articles icons */

.icon-items
{
    color: gray ;
}

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

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

.articles-hover {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.articles-hover:hover {
    background: rgba(71, 157, 255, 0.12);
}

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

.edit-circle:hover
{
    background: rgba(24, 218, 28, 0.14);
}
/* counts */
.articles-sum
{
    display: inline-block;
    justify-content: center ;
    align-items: center ;
    margin-left: 3px;
    font-size: 14px;
    color: gray;
}

/* comment */
.comment-section {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 全コメント共通 */
.comment-bg
{
    background:  #E5EDF1;    
    display: flex;
    flex-direction: column; /* ← 縦並び */
    max-height: 300px; /* ← 高さ調整 */
    overflow-y: auto;  /* ← 縦スクロールを有効にする */
    padding-right: 5px; /* スクロールバーで内容が隠れないように */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
.comment-bg::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.comment-bg::-webkit-scrollbar {
    width: 6px;
}
.comment-bg::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}


.comment {
    margin-bottom: 24px;
    margin-top: 10px;
}

/* 吹き出しとアバターを横並び */
/* 横並びにする */
.comment-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.self-comment-row {
    justify-content: flex-end; /* ✅ 右寄せ */
    margin-right: 6px;
}

.bubble {
    margin-right: 10px;
    padding: 6px 12px;
    border-radius: 18px;
    position: relative;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 80%;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 色分け */
.other-comment .bubble {
    background-color: #fff;
}
.my-comment .bubble {
    background-color: #dcf8c6;
}

/* 吹き出し矢印 */
.other-comment .bubble::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -15px;
    border: 12px solid transparent;
    border-right-color: #fff;
}
.my-comment .bubble::before {
    content: "";
    position: absolute;
    top: 3px;
    right: -15px;
    border: 12px solid transparent;
    border-left-color: #dcf8c6;
}

/* アバター＋名前＋時刻（縦並び） */
.avatar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 4px;
    width: 70px;
}
.avatar-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-wrapper a {
    background:  #E5EDF1;
}
.meta-row {
    display: flex;
    gap: 6px;
    color: #888;
    margin-top: 4px;
    margin-left: 2px;
}
.meta-username {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}
.meta-time {
    padding-top: 4px;
    font-size: 0.7rem;
    color: #aaa;
}
.meta-row.self-meta {
    justify-content: flex-end;
    margin-right: 10px;
}


/* comment text area */
.write-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.write-new textarea {
    background:                  #fff;
    border:                        none;
    border-bottom:    0.5px solid #dbdbdb;
    color:                         #666;
    font-family: 'Open Sans' sans-serif;
    font-size:                      1em;
    height:                       80px;
    transition:       border-color 0.3s;
    width:                         100%;
    appearance:                    none;
    -webkit-appearance:            none;
    -moz-appearance:               none;
    padding:                  15px 20px;
    line-height:                   1.75;
    letter-spacing:              0.05em;
    box-sizing: border-box;
    }

.write-new textarea:focus{
    outline:                       none;
}

.write-new img {
    border-radius:        50%;
    background:       #eeeeee;
    width:               50px;
    height:              50px;
    overflow:          hidden;
    text-align:        center;
    }

.comment-btn-wrapper
{
    display: flex ;
    justify-content: space-between;
    margin:0px auto;
    justify-items: center ;
    align-items: center ;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.write-new button
{
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--main-color);
    color:               #fff;
    font-weight:         bold;
    cursor:           pointer;
    padding: 13px;
    font-size: 16px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-left: 10px;
}


.write-new button:hover
{
    opacity:0.7;
}

.write-new label,
.write-new .errorlist{
    display: none;
    }

.write-new span{
    position:   relative;
    top:            12px;
    font-size:      12px;
    }

/* スマホ対応 */
@media (max-width: 600px) {
  .user-comment-text-box,
  .author-comment-text-box {
    max-width: 90%;
    font-size: 13px;
  }

  .write-new,
  .comment-btn-wrapper,
  .write-new textarea {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .write-new textarea {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  body {
    overflow-x: hidden; /* ページ全体の横スクロール防止 */
    }
}
@media (max-width: 600px) {
  .write-new textarea,
  .write-new input,
  .write-new button {
    font-size: 16px !important;
  }
}
@media (max-width: 600px) {
  .comment-btn-wrapper {
    display: flex;
    justify-content: space-between; /* ← 右寄せに */
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }

  .write-new button {
    width: auto;              /* ← 広がりすぎ防止 */
    margin-left: auto;        /* ← 右寄せ */
    margin-top: 0;
    padding: 10px 16px;
    font-size: 14px;
  }

  .write-new img {
    width: 40px;
    height: 40px;
  }
}
/* Comment Card */
.comment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 16px;
    margin-right: 3px;
    margin-left: 3px;
}

.comment-card {
    padding: 12px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

.comment-user-top {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.comment-user-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.comment-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.comment-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}

.comment-username {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.comment-text p {
    font-size: 13px;
    line-height: 1.4;
    color: #444;
    margin: 0;
}

/* hashtag */
.hashtag-link {
    color: #007bff;
    text-decoration: none;
}

.hashtag-link:hover {
    text-decoration: underline;
}

/* categories */
.categories_wrapper{
    margin:                              0;
    padding:                             0;
    }

.categories{
    text-align:                    center;
    }

.categories h2 {
    display:                  inline-block;
    text-transform:              uppercase;
    font-size:                        30px;
    padding-bottom:                   6px;
    margin-top:                       40px;
    color: #333;
    font-weight: 800;
    }


.categories h4{
    display:                  inline-block;
    font-size:                        30px;
    color:                            #fff;
    position:                     relative;
    bottom:                           10px;
    z-index:                             1;
    opacity:                           0.4;
    }

.cen {
    width: 100%;
    overflow:                      hidden;
    padding:                         3px;
    }


.category {
    display:                 inline-block;
    width:                  calc(100% /5);
    margin:             1px -2px 1px -2px;
    padding:                         20px;
    box-sizing:                border-box;
    cursor:                       pointer;
    transition:                      0.4s;
    background: var(--main-color);
    border-radius:                   10px;
    margin-left:                     4px;
    }
.category_select_label {
    padding-left: 10px;
}

.category:hover
{
    opacity: 0.7;
}

.category h5 {
    font-size:            14px;
    text-transform:  uppercase;
    font-weight:           500;
    color:                #fff;
    margin:                  0;
    line-height: 2;
    }

.category_description{
    display:   flex;
    height:    60px;
    }

.category_description p {
    color:              white;
    font-size:           10px;
    font-weight:          500;
    margin:            0 auto;
    letter-spacing:       1.7;
    word-break:      keep-all;
    }

/* Search */
.searchs {
    display: flex;
    justify-content: center; 
    width: 100%; 
    padding-top: 10px;       
}
.search-wrapper {
    border-radius: 20px;
    border-top: 0.5px solid #efefef;
    border-bottom: 0.5px solid #efefef;
    border-left: 0.5px solid #efefef;
    border-right: 0.5px solid #efefef;
    width: 60%;
    background-color: #fff;
    display: flex;
    flex-direction: column; /* ← 縦並び */
    max-height: 730px; /* ← 高さ調整 */
    overflow-y: auto;  /* ← 縦スクロールを有効にする */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
.search-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.global-tag p {
    font-size: 0.75em;
    color: gray;
}
.search-box-wrapper {
    position: sticky;
    z-index: 999;
    background-color: #2b2b2b;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
}
.search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 必須: 親幅に応じて中央に */
}

.simple-search-form {
    position: relative;
    width: 100%;
    max-width: 300px;
}


.simple-search-form input[type="text"] {
    width: 100%;
    padding: 10px 36px 10px 12px;
    font-size: 14px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background-color: #fafafa;
    color: #262626;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.simple-search-form input[type="text"]:focus {
    border-color: #a8a8a8;
    background-color: #fff;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8e8e8e;
    pointer-events: none;
}
.search-footer {
    padding-bottom: 20px;
}

/* Loader animation */
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  min-height: 100px;
  width: 100%;
  position: relative;
  text-align: center;
}

.spinner {
  width: 24px;
  height: 24px;
  animation: IGCoreSpinnerSpin12 1.2s steps(12) infinite;
}

/* アニメーション定義 */
@keyframes IGCoreSpinnerSpin12 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Spinner SVG の中央配置 */
#loader svg.custom-style {
  width: 50px;
  height: 50px;
  animation: IGCoreSpinnerSpin12 1.2s steps(12) infinite;
}
/* end-message circle-check */
.end-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.gradient-border {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #FFF720 10%, #3CD500 100%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gradient-border-inner {
    width: 98%;
    height: 98%;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.end-circle-check {
    display: flex;  /* ← 必須！ */
    align-items: center;
    justify-content: center;
    font-size: 30px;

    /* テキストにグラデーション */
    background: linear-gradient(135deg, #FFF720 10%, #3CD500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 下の「これ以上ありません」メッセージ */
.end-message {
  font-size: 0.9em;
  color: #777;
  margin-top: 10px;
}

/* gallery */
    .masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5px;
    }
    .masonry-item {
    position: relative;
    overflow: hidden;
    height: 300px; /* ✅ 固定 or 制限をかける（お好みで調整） */
    }

    .masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ 高さをはみ出さずに中央からトリミング */
    display: block;
    }

    .link_box {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    padding: 6px;
    }

    .link_box a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    pointer-events: auto;
    }

    .link_box i {
    color: #f5f5f5;
    font-size: 16px;
    padding-right: 6px;
    pointer-events: none;
    }

    .link_box a {
    text-decoration: none;
    color: inherit;
    pointer-events: auto; /* ←クリックは可能に */
    }

    .link_box a:hover,
    .link_box a:focus,
    .link_box a:active {
    text-decoration: none;
    color: inherit;
    opacity: 1; /* 明示的にhover時のopacityも変えない */
    }

/* タブレット（中サイズ）では1カラムあたり180px〜 */
@media (max-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* スマホ（小サイズ）では1カラムあたり140px〜 */
@media (max-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* 極小デバイス（例: iPhone SE）では1カラムあたり100px〜 */
@media (max-width: 480px) {
  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* Bookmark*/
.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 1rem;
}

.bookmark-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ✅ 上下に要素を分ける */
  height: 260px;                   /* ✅ カード高さを固定（お好みで調整） */
  padding: 1rem;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.bookmark-username {
  font-size: 1.1rem;
  color: #1e1e1e;
  margin-bottom: 0.5rem;
}

.bookmark-snippet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1; /* ✅ 余白を埋める */
}

.bookmark-snippet p {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* ✅ 最大4行まで表示 */
  -webkit-box-orient: vertical;
}

.bookmark-snippet a {
  margin-top: auto; /* ✅ 下に固定する */
  display: inline-block;
  font-size: 0.85rem;
  padding: 6px 12px;
  background: #32373c;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  width: 60%;
  text-align: center;
}


/* profile card */

.user_profile_card {
  box-shadow: 0 2.8px 2.2px rgba(0,0,0,.02),
    0 6.7px 5.3px rgba(0,0,0,.028),
    0 12.5px 10px rgba(0,0,0,.035),
    0 22.3px 17.9px rgba(0,0,0,.042),
    0 41.8px 33.4px rgba(0,0,0,.05),
    0 100px 80px rgba(0,0,0,.07);
  max-width:                           380px;
  margin:                               auto;
  margin-bottom:                       180px;
  text-align:                         center;
  position:                         relative;
  top:                                  80px;
  word-wrap:                      break-word;
  border-radius: 20px;
    }

.user_profile_card img {
    width: 100%;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
}

.user_profile_card h3 {
    font-size:    2em;
    margin-bottom: 10px;
    color: #383838;
    }

.user_profile_card ul{
    font-size:               0;
    margin:               10px;
    }

.user_profile_card li{
    display:        inline-block;
    padding:                   0;
    margin:                    0;
    color:                  gray;
    font-size:              12px;
    font-weight: 400;
    width:                   35%;
    text-transform:    uppercase;
    }

.user_profile_bio {
    color:                        grey;
    font-size:                    14px;
    line-height:                  1.75;
    letter-spacing:             0.05em;
    text-align:                   center;
    margin-left:                   6px;
    margin-right: 5px;
    }

.user_profile_card form {
    font-family:    'lato';
    border:           none;
    outline:             0;
    display:  inline-block;
    padding:           8px;
    cursor:        pointer;
    width:            100%;
    font-size:        18px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    }
.user_profile_card form:hover {
    opacity:           0.7;
  }

.follow-text {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #f5f5f5;
}

.user_profile_website {
    padding:        12px;
    }

.user_profile_website a {
    text-decoration:  none;
    font-size:        12px;
    }


/* users follower following */

.users-wrapper {
  margin-top: 60px;
}

.users-card {
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.users-card:hover {
  background-color: #f5f8fa;
}

.user-main-row {
  display: flex;
  align-items: flex-start;
}

.user-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info-follow-following {
  margin-left: 12px;
  flex: 1;
}

.user-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-name {
  font-weight: bold;
  font-size: 15px;
  margin: 0;
}

.followed-note {
  font-size: 12px;
  color: #555;
  margin: 2px 0;
}

.user-bio {
  font-size: 14px;
  color: #333;
  margin: 4px 0 0 0;
  word-break: break-word;
}

/* follow button */
.follow-form {
    display: flex;
    justify-content: flex-end;
}
.follow-button {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 16px;
  border: 0.5px solid #ccc;
  background-color: black;
  cursor: pointer;
  transition: all 0.2s ease;
}

.follow-button .follow-text {
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* ✅ フォロー中（白背景） */
.follow-button.is-following {
  background-color: white;
  border: 1px solid #ccc;
}

.follow-button.is-following .follow-text {
  color: black;
}

/* website */
.user-website-link {
    word-break: break-all;
    color: #6495ED;
    font-style: normal;  /* 通常のフォント */
    font-weight: normal;
}

.users-item-btn {
    align-self: flex-end;
    margin-top: 8px;
}

.round-button {
    display: inline-block;
    background-color:var(--main-color);
    color: white;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 999px; /* 丸み */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.round-button:hover {
    background-color: #75b0ef;
}

.users-item-text
{
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    word-wrap: break-word;
    line-height: 1.3125;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    color: #333;
}

/* liked user */
.liked-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 16px;
    justify-items: center;
    padding: 10px;
}

.img-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
    transition: transform 0.2s;
}

.img-circle:hover {
    transform: scale(1.05);
}

/* about */
.about {
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue LT, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}

.about_wrapper {
    display: flex;
    justify-content: center;
    align-self: center;
    min-height: 100vh;
    background: #fff;
    margin-top: 20px;
}

.about_container {
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(100px, auto);
    margin: 0px;
    grid-auto-flow: dense;
    grid-gap: 10px;
}

.about-description {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.about_content p {
    text-align: left;
    line-height: 1.75;
    letter-spacing: 0.04em;
    font-size: 16px;
    color: #14171a;
}

.about_box {
    background-color: #fff;
    padding: 20px;
    display: grid;
    font-size: 20px;
    place-items: center;
    text-align: center;
    transition: 0.5s;
    border: 1px solid #C0C0C0;
}

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


.about_box span {
    position: relative;
    max-width: 100px;
    font-size: 30px;
    color: var(--main-color);
    font-weight: 700;
    line-height: 2;
    word-break: break-word;
}

.about_box:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
}
.about_box:nth-child(2) {
    grid-column: span 1;
    grid-row: span 3;
}
.about_box:nth-child(4) {
    grid-column: span 1;
    grid-row: span 3;
}
.about_box:nth-child(5) {
    grid-column: span 2;
    grid-row: span 1;
}

@media(max-width: 991px) {
    .about_container {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
        grid-template-rows: minmax(auto, auto);
    }
    .about_box {
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

/* privacy policy */
.h1-wrapper {
    display: flex;
    flex-direction: column;   /* 縦に並べる */
    align-items: center;      /* 水平方向に中央寄せ */
    justify-content: center;  /* 垂直方向に中央寄せ（必要に応じて） */
    text-align: center;       /* テキストを中央揃えに */
    padding: 20px;
}

.privacy h2 {
    text-align:             center;
    margin:              30px auto;
    font-weight:900;
    }

.privacy-description
{
    display:flex;
    justify-content: center ;
    justify-items: center ;
    align-items: center ;
}

.privacy p{
    width:                     80%;
    margin:                 0 auto;
    line-height:               1.5;
    letter-spacing:         0.05em;
    font-size:               0.9em;
    display: flex ;
    justify-content: center ;
    color: #333;
    }



/* site-form User profile edit */
label[for="id_email"],
label[for="id_username"] {
    display: none;
}
.form-group-row {
    display: flex;
    gap: 20px; /* スペース調整 */
    justify-content: space-between;
    flex-wrap: wrap; /* 画面が狭くなったときに折り返し可 */
    text-align: center;
}

.form-group-row .form_group {
    flex: 1 1 45%; /* 幅を均等にする or 調整可能 */
    box-sizing: border-box;
}
.site-form {
    box-shadow: 0 2.8px 2.2px rgba(0,0,0,.02),
    0 6.7px 5.3px rgba(0,0,0,.028),
    0 12.5px 10px rgba(0,0,0,.035),
    0 22.3px 17.9px rgba(0,0,0,.042),
    0 41.8px 33.4px rgba(0,0,0,.05),
    0 100px 80px rgba(0,0,0,.07);
    background:          #fff;
    margin:             3em auto;
    padding:               0 1em;
    max-width:             100%;
    padding-top: 18px;
    }

.site-form input, .site-form textarea {
    display:              block;
    padding:               10px;
    background-color:   #fff;
    color:              #383838;
    border:  0.5px solid  #333;
    border-radius:          4px;
    font-size:              1em;
    letter-spacing:      0.05em;
    position:          relative;
    width:                 100%;
    max-width:            600px;
    box-sizing:      border-box;
    -webkit-transition: all .3s;
    transition:         all .3s;
    outline:               none;
    margin: 20px auto;
    }


.site-form input:focus, .site-form textarea:focus, .site-form select:focus{
    box-shadow: 0 0 4px  #AEC4E5;
    border:   1px solid  #AEC4E5;
    }


.site-form label{
    color:                 #333;
    }


.site-form select{
    -webkit-appearance:  none;
    -moz-appearance:     none;
    appearance:          none;
    }


.form_group label{
    position:        relative;
    font-size: 12px;
    }

.form_group small{
    position:        relative;
    top:                 20px;
    }

.column_1 input{
    background-color: #fff;
    color:            #383838;
    border:               0.5px solid  #333;
    border-radius:        4px;
    font-size:            1em;
    letter-spacing:    0.05em;
    }

.column_1 label{
    position: relative;
    }

.column_2 textarea{
    background-color:#fff;
    color:           #383838;
    border: 0.5px solid #333;
    border-radius:       4px;
    font-size:           1em;
    letter-spacing:   0.05em;
    width:              100%;
    max-width:         600px;
    box-sizing:   border-box;
    }

.column_2 label{
    position: relative;
    }

.form_group small{
    position:   relative;
    top:          -0.1px;
    }

.site-form h3{
    font-family: 'Roboto', sans-serif;
    text-align:                center;
    padding:                     20px;
    }

.icon_helptext{
    position:   relative;
    margin:    10px auto;
    font-size:      12px;
    }

.site-form a {
    color:       #383838;
    }

.site-form span{
    display: none;
    }


#thumb-clear_id {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.site-form p:nth-of-type(3) label:nth-of-type(2){
    display:         none;
    }
/* create-form image preview */
#preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
  max-width: 100%;
}

#preview .preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* clear */

.clear {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央揃え */
    gap: 8px; /* チェックボックスとラベルの間の余白 */
}

.clear-input input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.clear-label p {
    margin: 0;
    font-size: 14px; /* 必要に応じて調整 */
}

.clear-label p
{
    color: #fff;
    width: 120px;
    font-weight: 600;
    background: var(--main-color);
    display: flex ;
    justify-content: center ;
    justify-items: center ;
    align-items: center ;
    border-radius: 20px;
    padding-top: 2px;
}

/* login container */
.form-container {
    display: flex;
    align-items: center;      /* 垂直方向中央 */
    justify-content: center;  /* 水平方向中央 */
    height: 100vh;            /* ビューポート全体の高さ */
    padding: 0;               /* 上下余白不要 */
    margin: 0;
}

/* Nwe Form Layout */

.form-wrapper{
    box-shadow: 0 2.8px 2.2px rgba(0,0,0,.02),
    0 6.7px 5.3px rgba(0,0,0,.028),
    0 12.5px 10px rgba(0,0,0,.035),
    0 22.3px 17.9px rgba(0,0,0,.042),
    0 41.8px 33.4px rgba(0,0,0,.05),
    0 100px 80px rgba(0,0,0,.07);
    background:          #fff;
    padding: 2em 1.5em;
    width: 100%;
    max-width: 400px; /* 適度な最大幅 */
    border-radius: 8px;
    box-sizing: border-box;
    }

.form-wrapper h2{
    text-align:             center;
    padding:                 1em 0;
    color: #333;
    }

.site-form-new{
    padding:               0;
    }

.form-item{
    margin-bottom:          0.75em;
    width:                    100%;
    }

.form-item input{
    background:                 #fff;
    border:                        none;
    border-bottom:    2px solid #e9e9e9;
    color:                         #666;
    font-family: 'Open Sans' sans-serif;
    font-size:                      1em;
    height:                        50px;
    transition:       border-color 0.3s;
    width:                         100%;
    }

.form-item input:focus{
    border-bottom:    2px solid #c0c0c0;
    outline:                       none;
    }

.form-item textarea{
    background:                 #fff;
    border:                        none;
    border-bottom:    2px solid #e9e9e9;
    color:                         #666;
    font-family: 'Open Sans' sans-serif;
    font-size:                      1em;
    height:                        250px;
    transition:       border-color 0.3s;
    width:                         100%;
    appearance:                    none;
    -webkit-appearance:            none;
    -moz-appearance:               none;
    }

.custom-textarea {
    padding-left: 1em;
}

.form-item textarea:focus{
    border-bottom:    2px solid #c0c0c0;
    outline:                       none;
    }
/* user input */
.username-wrapper {
    width: 100%;
    margin-bottom: 1em;
}

.username-wrapper input[type="text"] {
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--form-bg, #fff);
    color: var(--form-text, #333);
    transition: border-color 0.3s, background-color 0.3s;
}

.username-wrapper input:focus {
    border-color: #888;
    outline: none;
}

.form-error {
    color: red;
    font-size: 0.85em;
    margin-top: 0.3em;
    display: block;
}

/* password input */
.password-reset-wrapper {
    display: flex;
    flex-direction: column;   /* 縦に並べる */
    align-items: center;      /* 水平方向に中央寄せ */
    justify-content: center;  /* 垂直方向に中央寄せ（必要に応じて） */
    text-align: center;       /* テキストを中央揃えに */
    min-height: 20vh;         /* 高さ調整：必要に応じて */
}
/* password reset */
.password-reset-wrapper h1 {
    font-size: 1.8em;
    margin-bottom: 1rem;
}

.password_reset {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #333;
    line-height: 1.5;
}

.password-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1em;
}
.form-container-password {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vh;
    padding: 0;
    margin: 0;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100%;
    padding: 0.75em 2.8em 0.75em 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--form-bg, #fff);
    color: var(--form-text, #333);
    transition: border-color 0.3s, background-color 0.3s;
}

.password-wrapper input:focus {
    border-color: #888;
    outline: none;
}

.password-icon-wrapper {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 1.1em;
    transition: color 0.3s;
}

.password-icon-wrapper:hover {
    color: #333;
}

.form-error {
    color: red;
    font-size: 0.85em;
    margin-top: 0.3em;
    display: block;
}

/* edit submit button */
.button-panel {
    width: 100%;
    margin: 2em 0 0;
    text-align: center; /* これで中の input を中央揃え */
}

.button-panel input {
    display: inline-block;
}

.button-panel .button-new {
    background:           var(--main-color);
    border:                            none;
    color:                           #fff;
    cursor:                         pointer;
    height:                            50px;
    font-family:    'Open Sans', sans-serif;
    font-size:                        1.2em;
    letter-spacing:                  0.05em;
    text-align:                      center;
    text-transform:               uppercase;
    transition: background 0.3s ease-in-out;
    width:                             100%;
    }

.button-panel .button-new:hover {
    background:                     #92d1d9;
    }
.button-panel .button-new-color {
    background:#333;
    border:                            none;
    color:                           #fff;
    cursor:                         pointer;
    height:                            50px;
    font-family:    'Open Sans', sans-serif;
    font-size:                        1.2em;
    letter-spacing:                  0.05em;
    text-align:                      center;
    text-transform:               uppercase;
    transition: background 0.3s ease-in-out;
    width:                             100%;
    }

.button-panel .button-new-color:hover{
    /* background: #00dba0; */
    background: gray;
    }

/* password reset */

.password_reset{
    text-align:              center;
    line-height: 1.7;
    color: #333;
    font-size: 18px;
    font-weight: 800;
    }

.password_reset.ja
{
    font-size: 15px;
    font-weight: 500;
}

/* category select form */

.category_wrapper{
    position:     relative;
    width:            100%;
    margin:       2em auto;
    text-align:     center;
    }
.category_form{
    position:                     relative;
    background-color:          transparent;
    width:                            100%;
    padding:              10px 10px 10px 0;
    border-radius:                       0;
    border:                           none;
    border-bottom:       2px solid #e9e9e9;
    color:                            #666;
    font-family:   'Open Sans', sans-serif;
    font-size:                        14px;
    letter-spacing:                 0,05em;
    }

.category_form:focus{
    outline:                           none;
    border-bottom:       2px solid  #c0c0c0;
    }

.category_wrapper .category_form{
    appearance:                       none;
    -webkit-appearance:               none;
    -moz-appearance:                  none;
    }

.category_wrapper select::-ms-expand{
    display:                          none;
    }

.category_wrapper:after{
    position:                       absolute;
    top:                                18px;
    right:                              10px;
    width:                                 0;
    height:                                0;
    padding:                               0;
    content:                              '';
    border-left:       6px solid transparent;
    border-right:      6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.3);
    pointer-events:                     none;
    }

.category_select_label{
    color:                          #adacac;
    font-family:    'Open Sans', sans-serif;
    font-size:                         16px;
    font-weight:                     normal;
    position:                      absolute;
    pointer-events:                    none;
    left:                                 0;
    top:                               10px;
    transition:               0.2s ease all;
    }

.category_form:focus ~ .category_select_label, .category_form:valid ~
.category_select_label{
    top:                -20px;
    transition: 0.2s ease all;
    font-size:           12px;
    color:            #c0c0c0;
    }

.category_select_bar{
    position:        relative;
    display:            block;
    width:               100%;
    }

.category_select_bar:before, .category_select_bar:after{
    content:                  '';
    height:                  2px;
    width:                     0;
    bottom:                  1px;
    position:           absolute;
    background:          #c0c0c0;
    transition:    0.2s ease all;
    }

.category_select_bar:before {
    left:                   50%;
    }

.category_select_bar:after {
    right:                  50%;
    }

.category_form:focus ~ .category_select_bar:before,
.category_form:focus ~ .category_select_bar:after {
    width:                   50%;
    }

.category_highlight {
    position:           absolute;
    top:                     25%;
    left:                      0;
    pointer-events:         none;
    opacity:                 0.5;
    }

/* progress bar */

.p_container {
  width:         auto;
  padding-top:    0px;
  padding-right:  0px;
  padding-left:   0px;
  margin-right:  auto;
  margin-left:   auto;
 }

@media (min-width: 280px) {
  .p_container {
    max-width: 360px;
  }
}

@media (min-width: 380px) {
  .p_container {
    max-width: 360px;
  }
}

@media (min-width: 480px) {
  .p_container {
    max-width: 460px;
  }
}

@media (min-width: 576px) {
  .p_container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .p_container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .p_container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .p_container {
    max-width: 1140px;
  }
}

.progress {
  display:      -ms-flexbox;
  display:             flex;
  height:            1.5rem;
  overflow:          hidden;
  font-size:           1rem;
  background-color: #e9ecef;
  border-radius:    0.25rem;
  max-width:          370px;
}

.progress-bar {
  display:       -ms-flexbox;
  display:              flex;
  -ms-flex-direction: column;
  flex-direction:     column;
  -ms-flex-pack:      center;
  justify-content:    center;
  color:              #fff;
  text-align:         center;
  white-space:        nowrap;
  background-image: linear-gradient(120deg, #91e9fd 0%, #5188fb 100%);;
  transition: width 0.6s ease;
}

/* edit profile */
.profile-container {
    display: flex;
    justify-content: center; /* 横方向中央揃え */
    padding: 20px;
}

.profile-wrapper {
    width: 100%;
    max-width: 600px;        /* 幅を少し狭くする */
    padding: 20px;
    box-sizing: border-box;
}

/* スマホ対応（小さい画面向け） */
@media screen and (max-width: 768px) {
    .profile-wrapper {
        padding: 10px;
        max-width: 95%;
    }
}
.site-form-wrapper {
    padding-top: 36px;
}
.profile {
    text-align: -webkit-right;
    margin-top: 20px;
    position: relative;
}

.profile-bg-wrapper {
    position: relative;
    width: 100%;
    height: 200px;  /* 明示的に高さを指定 */
    overflow: visible; /* はみ出し表示を許可 */
}

.profile-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-circle {
    position: absolute;
    bottom: -75px; /* はみ出し量を大きく */
    left: 20%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid white;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);  /* 影をつけて浮かせる感じに */
    z-index: 10;
}

.img-cover2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* user Email */
.user-email {
    margin-top: 5px;
    padding-right: 40px;
}

/* Sucess massage */
.prof-messages{
    background:    #fff;
    border-radius:                4px;
    margin-top: 20px;
    }

.prof-messages li {
    font-family: 'Roboto', sans-serif;
    color: var(--main-color);
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0;
    font-size: 1.3em;
    text-align: center;
    line-height: 1.75;
    letter-spacing: 0.05em;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    font-weight: 700;
}


.prof-messages ul{
    margin  : 0;
    padding : 0;
    }

.profile_website{
    margin:            10px 0;
    padding:           10px 0;
    position:        relative;
    top:                 20px;
    }


/* profile account delete button */

.profile-account-delete {
    display:               block;
    position:           relative;
    width:                  50px;
    height:                 50px;
    text-decoration:        none;
    color:                  var(--main-color);
    background:          #fff;
    border-radius:          50%;
    border: 1px solid #3CD500;
    font-size:              16px;
    float:                 right;
    top:                    21px;
    right:                   6px;
    z-index:                  11;
    }

.profile-account-delete i
{
    padding-left: 6px;
}

.profile-account-delete:hover{
    cursor: pointer;
    -webkit-align:  profile-account-delete    0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    -moz-animation: profile-account-delete-btn 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation:      profile-account-delete-btn 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

@-webkit-keyframes profile-account-delete-btn {
  0% {
         -webkit-transform: scale(0.85);
                 transform: scale(0.85);
     }
  100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
       }
  }

@-moz-keyframes profile-account-delete-btn {
  0% {
         -webkit-transform: scale(0.85);
                 transform: scale(0.85);
     }
  100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
       }
  }

@keyframes profile-account-delete-btn {
  0% {
        -webkit-transform: scale(0.85);
                 transform: scale(0.85);
     }
  100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
       }
  }


/* social login */

.social-line {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.social-line-text {
    width: 40px;
    height: 40px;
    color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Google login */

.login-social .social.google {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #3c4043;
    font-weight: 500;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 18px;
    font-family: "Roboto", "Segoe UI", Meiryo, sans-serif;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.login-social .social.google:hover {
    background-color: #f7f8f8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.login-social .social.google i {
    font-size: 18px;
    margin-right: 12px;
    color: #4285f4; /* Googleブルー */
}

.login-social .social-text {
    display: inline-block;
}
.login-social a.social:hover{
    opacity:            .8;
    text-decoration:  none;
    }

@media (max-width: 600px){
    .login-social .social span.social-text
    {
        font-size:   16px;
        padding-left: 4px;
    }
}


/* form footer */

.form-logout-footer
{
    text-align: center ;
    position: relative ;
    top: 20px;
}

.form-logout-footer button
{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.form-logout-footer button p
{
    font-size: 15px;
    font-weight: 400;
    color:  #8c8c8c;
    transition:     border-color 0.3s;
}

.form-logout-footer button p:hover
{
    border-bottom: 1px dotted #8c8c8c;
}


.form-footer {
  font-size:                    1em;
  padding:                    2em 0;
  text-align:                center;
    }

.form-footer p
{
   padding-top: 30px;
}

.form-footer a {
  color:                    #8c8c8c;
  text-decoration:             none;
  transition:     border-color 0.3s;
    }

.form-footer a:hover {
  border-bottom: 1px dotted #8c8c8c;
    }

.form-footer button {
    float:                     left;
    position:              relative;
    top:                        0px;
    background:             #fff;
    }
.form-footer button i {
    color: black;
}

.helptext, .helptext ul{
    margin    : 0 auto;
    color     : #ee8d88;
    font-size : 0.9em;
    display   : block;
    }

.errorlist li{
    padding:           10px;
    list-style-type:   none;
    color:          #ff5722;
    opacity:            0.5;
    }

.form_group{
    margin:           30px auto;
    }

input[type="file"]{
    display:               none;
    }
.column_3 i {
    font-size: 20px;
}

#input-label {
    margin:            8px auto;
    display:       inline-block;
    padding:          0.3em 1em;
    text-decoration:       none;
    color:    var(--main-color);
    border: 1px solid   var(--main-color);
    border-radius:          4px;
    transition:             .4s;
    font-weight: 600;
    padding: 10px;
    font-size: 12px;
    }

#input-label:hover {
    background : var(--main-color);
    color      : #fff;
    font-weight: 600;
    }

#input-label::after{
    content:         "Pick";
    font-size:           12px;
    }

#input-label.changed::after{
    content:             "";
    }

.note-max-images {
    color: orange;
    font-size  : 0.85em;
    margin-top : 12px;
    margin-left: 10px;
}

/* user background button animation */

#input-label-bg {
    margin:            8px auto;
    display:       inline-block;
    padding:          0.3em 1em;
    text-decoration:       none;
    color:    var(--main-color);
    border: 1px solid   var(--main-color);
    border-radius:          4px;
    transition:             .4s;
    font-weight: 600;
    padding: 10px;
    font-size: 12px;
    }

#input-label-bg:hover {
    background : var(--main-color);
    color      : #fff;
    font-weight: 600;
    }

#input-label-bg::after{
    content:         "Pick";
    font-size:           12px;
    }

#input-label-bg.changed::after{
    content:             "";
    }

.filename{
    font-size:         10px;
    margin:            16px;
    padding:           10px;
    position:      relative;
    top:               12px;
    }

.filenameTwo{
    font-size:         10px;
    margin:            16px;
    padding:           10px;
    position:      relative;
    top:               12px;
    }

/* 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;
    }

.pager .pagination li a
{
    color: #333;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color:                                #fff;
  background:              var(--main-color);
  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); }
    }


@media only screen and (max-width: 768px){
  .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;
  }

}

/* notification box */

.article_detail_author_img{
    background:       #eeeeee;
    width:               50px;
    height:              50px;
    overflow:          hidden;
    border-radius:        50%;
    border: 2px solid #eeeeee;
    position:        relative;
    top:                  0px;
    z-index:                1;
    }

.img-cover{
    display:         inline;
    margin:          0 auto;
    height:            100%;
    widows:            auto;
    }

/* Notification */
.notification_wrapper_all{
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin:                             0;
    padding:                            0;
    box-sizing:                border-box;
    }

.notification_wrapper{
    max-width:                      500px;
    margin:                  0 auto;
    }

.notification_wrapper .notification_icon { 
    position:      relative;
    width:             50px;
    height:            50px;
    font-size:         32px;
    margin:          0 auto;
    text-align:      center; 
    color: var(--main-color);
    }
.notification_wrapper .drop-down button a:hover {
  color: #f5f5f5;       
  text-decoration: none;     /* 下線を付けない */
  background-color: transparent; /* 背景がついていたら消す */
}

.notification_wrapper .drop-down {
    box-shadow: 0 2.8px 2.2px rgba(0,0,0,.02),
                0 6.7px 5.3px rgba(0,0,0,.028),
                0 12.5px 10px rgba(0,0,0,.035),
                0 22.3px 17.9px rgba(0,0,0,.042),
                0 41.8px 33.4px rgba(0,0,0,.05),
                0 100px 80px rgba(0,0,0,.07);
    background: #fafafa;
    margin: 1em auto;
    padding: 0 1em;
    max-width: 370px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.notification-list-scrollable {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
}
.notification-list-scrollable::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
}

.notify-actions {
    padding-bottom: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.notification-scroll-box {
    max-height: 500px; /* ← スクロール領域の高さを制限 */
    overflow-y: auto;
    padding: 0.5em 0;
}

/* スクロールバー見た目調整 */
.notification-scroll-box::-webkit-scrollbar {
    width: 6px;
}
.notification-scroll-box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}


.notification_wrapper .drop-down .notify_item {
    display:                    flex;
    align-items:              center;
    padding:                  10px 0;
    border-bottom: 1px solid #dbdaff;
    }


.notification_wrapper .drop-down .notify_item:last-child {
    border-bottom: 0px;
    }

.notification_wrapper .drop-down .notify_item .notify_img {
    margin-right: 15px;
    }
/* Read */
.notification_wrapper .drop-down .notify_item .read {
    width:  70%;
    color: #bbb;
    }
.notification_wrapper .drop-down .notify_item .read p a {
    color: #bbb;
    }
 
/* Unread */ 
.notification_wrapper .drop-down .notify_item .unread {
    width: 70%;
    }

.notification_wrapper .drop-down .notify_item .unread p a {
    color: #333;
    }
/* read unread 共通 */
.notification_wrapper .drop-down .notify_item .read .notify_time,
.notification_wrapper .drop-down .notify_item .unread .notify_time {
    color:  #c5c5a6;
    font-size: 12px;
    }


/* notification speech bubble */

.notification_wrapper .drop-down:before{
    content:                 "";
    position:          absolute;
    top:                  -30px;
    left:                   50%;
    transform: translateX(-50%);
    border:          15px solid;
    border-color: transparent transparent #fafafa transparent
    }

/* notification button */

.notification_wrapper .drop-down button {
    padding:          10px;
    width:             49%;
    box-sizing: border-box;
    border:           none;
    font-size:        16px;
    font-weight:      bold;
    margin-top:       20px;
    cursor:        pointer;
    }

.notification_wrapper .drop-down button a {
    text-decoration: none;
    color:           #fff;
    }

.notification_wrapper .drop-down button:nth-child(1) {
    background: #333;
    }

.notification_wrapper .drop-down button:nth-child(2){
    background: var(--main-color);
    }

.notification_wrapper .drop-down button:nth-child(1):hover {
    background: gray;
    }
.notification_wrapper .drop-down button:nth-child(2):hover {
    background: gray;
    }

.notification_wrapper .drop-down button .fas {
    font-size:     20px;
    font-weight:   bold;
    }

/* notification message */

.notification_wrapper .drop-down h4{
    padding:              16px;
    text-align:         center;
    color:rgb(20, 23, 26);
    line-height:           1.7;
    letter-spacing:     0.05em;
    }



/* 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;
}

.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;
}

/* Search page */


/* global footer */

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

/* ios button  reset */

.site-form-new input[type="submit"],
.site-form input[type="submit"] {
    appearance        : none;
    -webkit-appearance: none;
     border-radius    :    0;
    }

/* Edit Article Styles */

.edit-article-wrapper {
    max-width: 600px;
    margin: 2em auto;
    padding: 2em 1.5em;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.edit-article-title-input {
    font-size: 1em;
    padding: 0.7em 1em;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 1em;
}

.edit-article-form {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.edit-article-item {
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.edit-article-label {
    font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin-bottom: 0.2em;
    color: #333;
    font-size: 1em;
}

.edit-article-body-textarea {
    font-size: 16px;
    padding: 1em;
    width: 100%;
    min-height: 200px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 1em;
    line-height: 1.7;
    height: 100px;
    resize: vertical; /* 必要ならリサイズ許可 */
}


.edit-article-helptext {
    font-size: 0.95em;
    color: #888;
    margin: 0;
}

.edit-article-error {
    color: tomato;
    font-size: 0.95em;
}

.edit-article-category-select {
    font-size: 1.2em;
    padding: 0.7em 1em;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 1em;
    background: #fafbfc;
}

.edit-article-slug-note {
    color: tomato;
    font-size: 0.95em;
    margin-top: 0.5em;
}

.edit-article-button-panel {
    text-align: center;
    margin-top: 2em;
}

.edit-article-submit {
    background: #00acee;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.8em 2.5em;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-article-submit:hover {
    background: #008bb9;
}

.edit-article-footer {
    text-align: center;
    margin-top: 1em;
}
.edit-article-footer a {
    color: #333;
}

.edit-article-home-link {
    color: #00acee;
    text-decoration: underline;
    font-size: 1em;
}

/* edit 用の image preview layout */
.edit-article-image-formset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;  /* ✅ 左詰め */
    align-items: flex-start;
    align-content: flex-start;
}

.article-image-form-block {
    width: calc(20% - 4px);  /* ✅ 固定幅に変更 */
    max-width: calc(20% - 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 8px;
    min-height: 130px;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 10px;
}

/* ✅ スマホ対応（横2列 × 縦3列） */
@media screen and (max-width: 600px) {
    .article-image-form-block {
        width: calc(50% - 4px);   /* ✅ 固定幅 */
        max-width: calc(50% - 4px);
    }
}
/* preview */
.article-image-preview {
    width: 100%;               /* ブロック全体に広げる */
    height: 100px;             /* ✅ 高さを固定 */
    object-fit: cover;         /* 画像を枠内にフィットさせる */
    border-radius: 6px;
    border-bottom: 1px solid #ccc;
    background-color: #f9f9f9;
}

/* ファイルボタン */

.custom-file-button {
  margin-top: 6px;
  font-size: 12px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
}

/* ラベルやチェックボックス */
/* 親ラッパー */
/* アップロードボタンを中央揃え */
.input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* 実際の input を透明にして上に重ねる */
.file-upload-label input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}


/* カスタムボタン */
.custom-file-button {
    display: inline-block;
    padding: 6px 12px;
    background-color: #333;
    border-radius: 6px;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 8px;
}
.custom-file-button:hover {
    background-color: rgb(99, 86, 86);
}
 /* Delete チェックボックスも中央揃え */
.delete-checkbox-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  min-height: 32px;  /* ✅ Deleteラベルの高さに合わせる */
}

.delete-checkbox-wrapper label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}
.delete-checkbox-wrapper span {
    color: #888;
}
/* image urlをhidden */
.article-image-form-block a {
    display: none !important;
}

/* category Bar */
.edit-article-category-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  background-image: url("data:image/svg+xml,%3Csvg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.edit-article-category-select:focus {
  border-color: #007BFF;
  outline: none;
}

/* Edeit */

.article-image-form-block p {
    font-size: 0.9em;
    color: #de9929;
    margin-top: 8px;
}

.clear-checkbox {
    font-size: 0.8em;
    color: #c00;
    margin-top: 4px;
}

.clear-checkbox {
    font-size: 0.8em;
    color: #c00;
    margin-top: 4px;
}

.thumb-upload-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
}

.thumb-upload-btn {
    display: inline-block;
    background: #00acee;
    color: #fff;
    padding: 0.5em 1.2em;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0.5em;
    font-weight: bold;
    transition: background 0.2s;
}
.thumb-upload-btn:hover {
    background: #008bb9;
}
.thumb-upload-input {
    display: none;
}
.thumb-clear-group {
    margin-top: 0.5em;
    font-size: 0.95em;
    color: #888;
}
.thumb-preview {
    border-radius: 6px;
    border: 1px solid #eee;
}

/* Tag */
.hashtag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    padding: 6px;
}

.tag-thumb-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}
/* avater & article body */
.user-info {
  margin-left: 12px;
  flex: 1;
  padding-bottom: 10px;
}

.user-info-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.user-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.article-body-scrollable {
    max-height: 230px;
    overflow-y: auto;
    line-height: 1.6;
    padding-right: 8px;
    padding-left: 12px;
    margin-bottom: 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}

/* modal */
/* モーダル外枠 */
.hashtag-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

/* 中身 */
.hashtag-modal-content {
    display: flex;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    gap: 10px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;  /* 内容が多くてもはみ出さない */
    box-sizing: border-box;
    position: relative; /* 相対位置にして閉じるボタンを配置 */
}

.left-info {
  width: 30%;
  min-width: 270px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px; /* アイコンと名前の間隔 */
  margin-bottom: 10px;
}

.user-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}
.hashtag-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}
/* swiper */
.modal-swiper {
  width: 100%;
  max-width: 600px;
  height: 100%;         /* ✅ 高さを明示的に指定 */
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  background: #000;      /* ✅ 背景を指定すると高さ確認しやすい */
}

.modal-swiper .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  height: 100%;          /* ✅ wrapperも親に合わせる */
  box-sizing: content-box;
}

.modal-swiper .swiper-slide {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  height: 100%;          /* ✅ 各スライドも高さ確保 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-swiper .swiper-slide img {
  width: 100%;
  height: 100%;          /* ✅ 画像もピッタリに揃える */
  object-fit: cover;
  border-radius: 4px;
}

.modal-swiper .swiper-wrapper {
  flex-wrap: nowrap !important;     /* 横並び維持 */
  box-sizing: content-box !important;  /* ✅ Swiperのデフォルトに戻す */
}

/* ✅ ボタンは swiper-container (.modal-swiper) 内で絶対配置 */

.modal-swiper-button {
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 246, 246, 0.971);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #666666ab;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  /* ✅ 縦方向に影響を与えるプロパティは削除 */
  line-height: normal;
}
.modal-swiper-button span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.modal-swiper-button i {
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  color: gray;
}

/* 左ボタン：画像の左端 */
.swiper-button-prev.modal-swiper-button {
  left: 10px;
}


/* 右ボタン：画像の右端 */
.swiper-button-next.modal-swiper-button {
  right: 10px;
}
/* end message */
.hashtag-grid-end-message {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 中央揃え */
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
}

.end-message {
    color: #666;
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}
/* tagpage left-info の下に right-info */
@media (max-width: 768px) {
  .hashtag-modal-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .left-info {
    width: 100%;
    min-width: auto; /* 下にスペースを追加 */
  }
  .right-info {
    width: 100%;
    min-width: auto;
  }

  .modal-swiper {
    height: 240px; /* 適宜調整 */
  }
  .hashtag-modal-close {
    display: none !important; /* モバイルでは閉じるボタンを非表示 */
  }
  .modal-swiper-button {
    display: none !important;
  }
}
/* @media */
/* ipad 横 */
/* iPadサイズではラベルを非表示に */
@media (max-width: 1000px) {
    .center {
        width:100%;
    }
    .left {
        display: none;
    }
    .right {
        display: none;
    }
    .right-wrapper {
        display: none;
    }
    .sub_title {
        padding-top: 90px;
    }
    .icon-label-text {
        display: none;
    }
    li.logo {
        justify-content: center;
        justify-items: center;
        padding-left: 0;
    }
    .wrapper_circle {
        justify-content: center;
        justify-items: center;
        margin-left: 0;
    }
    .left-icons-wrapper {
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    .icon-item {
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    }
    .web-info, .web-info a span{
        font-size: 12px;
    }
    .category h5 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .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;
    }
    .user_profile_card
    {
        box-shadow: none ;
        max-width:60%;
    }
    .edit-article-title-input,
    .edit-article-body-textarea {
    font-size: 0.75em;  /* 12px ÷ 16px（基準） = 0.75em */
    line-height: 1.5;
    }
    .edit-article-category-select {
        font-size:0.75em;
    }
    .search-wrapper {
        width: 100%;
    }
}
/* gallery */
/* スマホ用（画面幅が768px以下） */
@media screen and (max-width: 768px) {
    .category {
        width: calc(50% - 10px);  /* 2列にする */
    }
}
/* 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) {
    .edit-article-body-textarea {
        font-size: 16px;
    }
    .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;
    }
    .mobile-nav
    {
        z-index: 10;
    }
    .form-wrapper
    {
        box-shadow: none ;
        max-width: 90%;
    }
    .site-form
    {
        box-shadow:none;
    }
    .following-feed-wrapper
    {
        width: 100%;
    }
    .center-header
    {
        display: none ;
    }
    .about_box span
    {
        font-size:30px;
    }
    .privacy h2
    {
        font-size:16px;
    }
    .profile-account-delete
    {
        z-index:1;
    }
    .password_reset.ja
    {
        font-size: 11px;
    }
    .form-wrapper
    {
        margin:3em auto;
    }
        .users-box
    {
        width: 100%;
    }
    .bookmark-grid {
    grid-template-columns: repeat(2, 1fr);
    }
    .tag-thumb-img {
        height: 260px;
    }
    .masonry-item {
        height: 260px;
    }
}

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

/* ✅ モバイル用調整 */
@media (max-width: 480px) {
  .edit-article-category-select {
    font-size: 0.95rem;
    padding: 14px 38px 14px 14px;
  }
}
/* 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, 
    dody:not(.dark-mode) .articles-icon-right i {
    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) .favorite-wrapper span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .users-wrapper span {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .mobile-center-name {
    color: #f5f5f5;
    }
    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 p {
        color: #f5f5f5;
    } */
    body:not(.dark-mode) .user_profile_card h3 a {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .user_profile_card small {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .user_profile_card p {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .user_profile_btn {
    background-color: var(--main-color);
    }
    body:not(.dark-mode) .categories h2 {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .categories h1 {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-caption-inline .username a {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-caption-inline .snippet-text {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .articles-caption-inline .read-more {
    color: #cdcbcb;
    }
    body:not(.dark-mode) .liked .liked_heart {
    color: var(--main-color);
    }
    body:not(.dark-mode) .following-feed-wrapper {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
    }
    body:not(.dark-mode) .header-name h3 {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .users-box {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* ごく薄い白線 */
    }
    body:not(.dark-mode) .user_profile_card li {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .bookmark-snippet p {
    color: #1e1e1e;
    }
    body:not(.dark-mode) .social-line h4 {
    color: var(--main-color);
    }   
    body:not(.dark-mode) .users-item-bio p {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .pager .pagination li a span {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .users-card:hover {
    background-color: #444;
    }
    body:not(.dark-mode) .followed-note {
    color: #9c9391;
    }
    body:not(.dark-mode) .user-bio {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .password-reset-wrapper p {
    color:#f5f5f5;
    }
    body:not(.dark-mode) .password_reset {
    color:#f5f5f5;
    }
    body:not(.dark-mode) .hover-user-trigger {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .privacy p {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .hover-profile-card {
    background-color: #2a2a2a;
    }
    body:not(.dark-mode) .hover-profile-bio {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .hover-profile-follow {
    color: #ccc;
    }
    body:not(.dark-mode) .follow-count {
    color: #fff;
    }
    body:not(.dark-mode) .column_3 i {
    color: var(--main-color);
    }
    body:not(.dark-mode) .form_group i{
        color: var(--main-color);
    }
    body:not(.dark-mode) .custom-swiper-button {
    background-color: gray;
    }
    body:not(.dark-mode) .hashtag-modal-content {
    background: #1e1e1e;
    color: #eee;
    }
    body:not(.dark-mode) .notification_wrapper .drop-down {
    background: #1e1e1e;
    border: 1px solid #444;
    }
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item {
    border-bottom: 0.5px solid #a09e9e;
    }
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item .unread p,
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item .unread p a {
    color: #f5f5f5;
    }
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item .read .notify_time,
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item .read p,
    body:not(.dark-mode) .notification_wrapper .drop-down .notify_item .read p a {
    color: rgb(86, 84, 84);
    }
    body:not(.dark-mode) .about_wrapper {
    background: #121212;
    }
    body:not(.dark-mode) .about_content p {
    color: #e0e0e0;
    }
    body:not(.dark-mode) .about_box {
    background-color: #1e1e1e;
    border: 1px solid #333;
    }

    body:not(.dark-mode) .about_box:hover {
    background: rgba(255, 255, 255, 0.05); /* optional override */
    }
    body:not(.dark-mode) .gradient-border-inner {
    background: var(--bg-color);
    }
    body:not(.dark-mode) .site-form label {
    color:                 #f5f5f5;
    }
    body:not(.dark-mode) .search-wrapper {
    background-color: #333;
    }
}

/* Create form */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .form-wrapper {
    background: #1e1e1e;
    color: #f1f1f1;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    }

    .form-wrapper h2 {
    color: #f1f1f1;
    }

    .form-item input,
    .form-item textarea,
    select.category_form {
    background: #2c2c2c;
    color: #f1f1f1;
    border-bottom: 2px solid #555;
    }
    .form-item input, 
    .form-item textarea, 
    select.category_form {
    border-bottom: 0.5px solid #555;
    }
    .form-item input:focus,
    .form-item textarea:focus {
    border-bottom: 2px solid #888;
    outline: none;
    }

    .form-item .helptext,
    .form-item span,
    .form-item small,
    .form-footer p a {
    color: #aaa;
    }

    /* カテゴリセレクトのスタイル */
    .category_wrapper label,
    .category_wrapper select,
    .category_wrapper .category_select_label {
    color: #f1f1f1;
    }

    #input-label {
    background: #333;
    color: #f1f1f1;
    }

    .note-max-images {
    color: #ccc;
    }

    .button-new-color {
    background: #444;
    color: #fff;
    border: none;
    }
    .button-new-color:hover {
    background: #666;
    }
}

/* profile edit */
@media (prefers-color-scheme: dark) {
    .site-form {
    background-color: #1e1e1e;
    color: #f1f1f1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
    }

    .site-form h3,
    .site-form label,
    .site-form p,
    .site-form span,
    .site-form a {
    color: #f1f1f1;
    }
    /* edit */
    .edit-article-wrapper {
    background: #2c2c2c;
    }
    /* テキスト入力・セレクト・テキストエリア */
    .site-form input[type="text"],
    .site-form input[type="url"],
    .site-form input[type="email"],
    .site-form textarea,
    .site-form select {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border: 1px solid #444;
    }

    .site-form input[type="text"]:focus,
    .site-form input[type="url"]:focus,
    .site-form input[type="email"]:focus,
    .site-form textarea:focus,
    .site-form select:focus {
    border-color: #888;
    outline: none;
    }

    /* ヘルプテキストやエラー */
    .site-form .helptext,
    .site-form span {
    color: #bbbbbb;
    }

    /* アップロードボタン */
    #input-label,
    #input-label-bg {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    }

    /* チェックボックスとラベル */
    .clear-input input[type="checkbox"] {
    accent-color: #888;
    }

    .clear-label label p {
    color: #ccc;
    }

    /* ボタン */
    .button-new-color {
    background: #444;
    color: #fff;
    border: none;
    }

    .button-new-color:hover {
    background: #666;
    }

    /* ログアウト/退会ボタン */
    .form-logout-footer button,
    .profile-account-delete {
    background-color: #2c2c2c;
    color: #f5f5f5;
    border: 0.5px solid #3333;
    }

    .form-logout-footer button:hover,
    .profile-account-delete:hover {
    background-color: #400;
    }

    .form-footer a {
    color: #aaa;
    }
}
/* login */
@media (prefers-color-scheme: dark) {
  :root {
    --form-bg: #1e1e1e;
    --form-text: #f5f5f5;
  }
}

/* comment box  */
/* === 🌙 Dark Mode 対応 === */
@media (prefers-color-scheme: dark) {
    body:not(.dark-mode) .following-feed-wrapper p {
        color: #f5f5f5;
    }
    body:not(.dark-mode) .bubble p {
        color: #333;
    }
}
@media (prefers-color-scheme: dark) {
    .comment.author-comment {
    color: #f5f5f5;
    }
        .comment.user-comment {
    color: #f5f5f5;
    }
    .comment-bg {
        background:#121212;
    }
    .user-comment-text-box {
    background: #2a2a2a;
    }

    .user-comment-text-box:after {
    border-right: 20px solid #2a2a2a;
    }

    .author-comment-text-box {
    background: #355e3b; /* 落ち着いた緑系 */
    }

    .author-comment-text-box:after {
    border-left: 20px solid #355e3b;
    }

    .user-comment-text-box a,
    .author-comment-text-box a {
    color: #8ab4f8; /* Googleのdarkモードのリンク色風 */
    }

    .write-new textarea {
    background: #1e1e1e;
    color: #ddd;
    border-bottom: 0.5px solid #444;
    }

    .write-new img {
    background: #444;
    }

    .fa-lg {
    color: #ccc;
    }

    .comment-delete-btn-2 button i {
    color: gray;
    }

    .write-new button {
    background-color: var(--main-color);
    color: #fff;
    }

    .write-new span {
    color: #aaa;
    }
}
/* edit article */
@media (prefers-color-scheme: dark) {
    /* edit article */
    .site-form,
    .site-form input[type="text"],
    .site-form input[type="email"],
    .site-form input[type="url"],
    .site-form textarea,
    .site-form select {
    background-color: #2c2c2c;
    color: #f5f5f5;
}
}
/* comment box  */
/* === 🌙 Dark Mode 対応 === */
@media (prefers-color-scheme: dark) {
    .comment-bg {
        background:#121212;
    }
    .meta-username {
        color: #f5f5f5;
    }
    .avatar-wrapper a,
    .comment-bg {
        background:#121212;
    }

    .write-new textarea {
    background: #1e1e1e;
    color: #ddd;
    border-bottom: 0.5px solid #444;
    }

    .write-new img {
    background: #444;
    }

    .fa-lg {
    color: #ccc;
    }

    .write-new button {
    background-color: var(--main-color);
    color: #fff;
    }

    .write-new span {
    color: #aaa;
    }
}