/* ==============================
   Header Logo CSS
   ============================== */
header#ikesudama {
  position: fixed;
  top: 0;
  z-index: 4649;
  width: 100%;
  background: #fff;
}

a.klogo {
  display: flex;
  align-items: center;
  height: calc(18px + 32px);
  padding: 16px 10px;
}

a.klogo img {
  display: block;
  max-height: 14px;
  width: auto;
  opacity: .57;
}

.none {
  display: none !important;
}

.activity-header {
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center; /* 縦方向の引き伸ばしを防ぐ */
  width: 100%;
}

/* activity-content が flex で縦伸びしないよう明示 */
.activity-item .activity-content {
  display: block;
}

.activity-header .activity-single-link {
  background: black;
  opacity: 1;
  color: #fff;
  text-decoration: none;
  padding: 0rem 0.75rem;
  border-radius: 1rem;
  margin-top: 0.5rem;
  position: relative;
  align-items: end;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
}

a.activitycardavatar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  top: 0.5rem;
  left: 0.5rem;
  text-decoration: none;
}

a.activitycardavatar .mav {
  display: block;
  width: 27px;
  height: 27px;
  border: solid #ddd 1px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

a.activitycardavatar .ac-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

:root {
  --color-primary: #006c84;
  --color-text: #101b1f;
  --color-tomato: #ed4e3b;
  --color-base: #e2e8e4;
  --color-surface: #ffffff;
  --color-accent: #6eb5c0;
  --color-muted: #566c78;

  --color-border: color-mix(in srgb,
      var(--color-text) 15%,
      var(--color-surface));
  --color-border-strong: color-mix(in srgb,
      var(--color-text) 30%,
      var(--color-surface));
  --color-card: color-mix(in srgb, var(--color-base) 85%, var(--color-surface));
  --color-button-bg: var(--color-tomato);
  --color-button-text: var(--color-surface);
  --color-link: #179194;
  --color-link-hover: var(--color-tomato);
  --color-positive-bg: color-mix(in srgb,
      var(--color-primary) 18%,
      var(--color-surface));
  --color-positive-border: color-mix(in srgb,
      var(--color-primary) 40%,
      var(--color-surface));
  --color-negative-bg: color-mix(in srgb,
      var(--color-accent) 18%,
      var(--color-surface));
  --color-negative-border: color-mix(in srgb,
      var(--color-accent) 40%,
      var(--color-surface));
  --color-overlay-strong: color-mix(in srgb,
      var(--color-text) 80%,
      transparent);
  --color-overlay: color-mix(in srgb, var(--color-text) 45%, transparent);
  --color-overlay-light: color-mix(in srgb, var(--color-text) 30%, transparent);
}

/* ==============================
   イベントフォーム関連
   ============================== */
.css-event-form,
.css-events-admin {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

/* ==============================
   イベントカードリスト
   ============================== */
.em-event-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.em-event-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: #fff;
  /* border: 1px solid #e5e5e5; */
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin: 0;
}

.em-event-card.past {
  opacity: 0.6;
}

.em-event-card__thumb-link {
  flex-shrink: 0;
  width: 200px;
  display: block;
}

.em-event-card__thumb {
  width: 200px;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f0f0f0;
}

.em-event-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.em-event-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.em-event-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}


.em-event-card__title a {
  text-decoration: none;
  color: inherit;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color 0.35s ease;
}

/* 常時表示のグレー下線 */
.em-event-card__title a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
}

/* ホバーで左から伸びるダーク下線 */
.em-event-card__title a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-text);
  transition: width 0.35s ease;
}

.em-event-card__title a:hover {
  color: var(--color-text);
}

.em-event-card__title a:hover::after {
  width: 100%;
}

.em-event-card__date {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.75rem 0 0;
}

.em-event-card__time {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: #444;
  margin-top: -.2345rem;
}

.em-event-card__location {
  font-size: 0.9rem;
  color: #555;
  margin: 0.6rem 0 0;
  line-height: 1.6;
}

.em-event-card__actions {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.em-event-card__btn {
  display: inline-block;
  padding: 2px 15px 1px;
  border-radius: 9999px;
  background: darkgrey;
  color: #fff !important;
  text-decoration: none;
  font-size: 0.7rem;
  cursor: pointer;
  border: none;
}

.em-event-card__btn:hover {
  background: #444;
  color: #fff !important;
}

/* イベントカード内h3：#primary h3の margin:3rem 0 2rem !important を上書き
   特異度: #primary h3.em-event-card__title = 1-1-1 > #primary h3 = 1-0-1 */
#primary h3.em-event-card__title {
  font-size: 1.25rem !important;
  font-weight: 700;
  margin: 0.25rem 0 0 !important;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .em-event-cards {
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .em-event-card {
    flex-direction: column;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0.25rem 1rem;
    gap: 0.75rem;
  }

  .em-event-card__thumb-link,
  .em-event-card__thumb {
    width: 100%;
  }

  .em-event-card__date {
    font-size: 0.9rem;
  }

  .em-event-card__actions {
    padding-top: 0.75rem;
  }
}

/* ==============================
   イベント詳細ページ（single-event）
   ============================== */
.cls-single-event-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem 2rem;
}

/* 左カラム */
.cls-single-event__left {
  flex-shrink: 0;
  width: 300px;
}

/* チラシスライダー */
.cls-flyer-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f0f0f0;
}

.cls-flyer-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cls-flyer-slide.active {
  opacity: 1;
}

/* ジャンルタグ */
.cls-event-genre-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 1px 12px 0px;
  background: var(--color-text);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.6rem;
}

/* 右カラム */
.cls-single-event__right {
  flex: 1;
  min-width: 0;
}

/* タイトル */
.cls-event-title {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

/* サブタイトル */
.cls-event-subtitle {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

/* 区切り線 */
.cls-event-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0.75rem 0 1.25rem;
}

/* メタセクション共通 */
.cls-event-meta-section {
  margin-bottom: 1.25rem;
}

/* ラベル（開催日時 etc.） */
.cls-event-meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 0.2rem;
  letter-spacing: 0.04em;
}

/* 日付 */
.cls-event-date-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 0.15rem;
}

/* 時間 */
.cls-event-time-value {
  font-size: 0.95rem;
  color: var(--color-primary);
  margin: -0.5rem 0 0 0;
  font-weight: bold;
}

/* 会場名 */
.cls-event-location-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.1rem;
}

.cls-event-location-addr {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

/* 料金 */
.cls-event-price {
  font-size: 0.95rem;
  margin: 0;
}

/* 曲目リスト */
.cls-event-songs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cls-event-songs li {
  font-size: 0.9rem;
  padding: 0.1rem 0;
  color: var(--color-text);
}

.cls-event-songs li::before {
  content: '・';
  color: var(--color-accent);
}

/* イベント詳細本文 */
.cls-event-content {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* 主催テーブル */
.cls-event-organizer-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
  width: 100%;
  border: none
}

.cls-event-organizer-table th {
  width: 3.5em;
  padding: 0;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
  border: none;
  font-size: .6rem;
}

.cls-event-organizer-table td {
  padding: 0;
  color: var(--color-text);
  border: none;
  font-size: .6rem;
}

/* YouTube */
.cls-event-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #222;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1.25rem 0;
}

.cls-event-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* イベント公式情報ボタン */
.cls-event-url-wrap {
  margin: 1.25rem 0;
}

.cls-event-url-btn {
  display: inline-block;
  padding: 0.6rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.cls-event-url-btn:hover {
  background: var(--color-link-hover);
  color: #fff;
}

/* お問い合わせ */
.cls-event-contact {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

.cls-event-contact p {
  margin: 0.2rem 0;
}

.cls-event-contact a {
  color: var(--color-primary);
}

/* ライトボックス */
.cls-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}

.cls-lightbox.is-open {
  display: block;
}

.cls-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.cls-lightbox__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.cls-lightbox__close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  z-index: 9001;
}

.cls-lightbox__images {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-height: 90vh;
}

.cls-lightbox__images img {
  max-height: 90vh;
  max-width: 45vw;
  object-fit: contain;
  border-radius: 0.25rem;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .cls-single-event-layout {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem 1.5rem;
  }

  .cls-single-event__left {
    width: 100%;
  }

  .cls-flyer-slider {
    max-width: 1280px;
  }

  .cls-lightbox__images {
    flex-direction: column;
    gap: 1rem;
  }

  .cls-lightbox__images img {
    max-width: 90vw;
    max-height: 45vh;
  }
}

/* ==============================
   マップ関連
   ============================== */
.em.em-location-where.has-map .em-location-map-container,
.em.em-location-where.has-map div.em-location-data .em-location-map-404,
.em.em-location-where.has-map div.em-location-data .em-location-map-content {
  max-width: 100%;
  aspect-ratio: 3 / 2;
}

/* ==============================
   ボタン関連
   ============================== */
.em.pixelbones.input .button.button-primary,
.em.pixelbones.input button.button-primary,
.em.pixelbones.input input[type="submit"].button-primary,
.em.pixelbones.input input[type="reset"].button-primary,
.em.pixelbones.input input[type="button"].button-primary,
.em.pixelbones .input .button.button-primary,
.em.pixelbones .input button.button-primary,
.em.pixelbones .input input[type="submit"].button-primary,
.em.pixelbones .input input[type="reset"].button-primary,
.em.pixelbones .input input[type="button"].button-primary,
.em.pixelbones .button.button-primary.input,
.em.pixelbones button.button-primary.input,
.em.pixelbones input[type="submit"].button-primary.input,
.em.pixelbones input[type="reset"].button-primary.input,
.em.pixelbones input[type="button"].button-primary.input {
  color: var(--color-button-text) !important;
  background-color: var(--color-button-bg) !important;
  border: none !important;
  font-size: 0.8rem !important;
  padding: 0.75rem 3rem !important;
  overflow: visible !important;
  height: auto !important;
  margin: 3rem auto;
  display: block;
}

/* ==============================
   メッセージ・画像・アバター関連
   ============================== */
div#message.info p {
  text-align: center;
  font-size: 12px;
}

div#event-image {
  border: dotted var(--color-border) 1.5px;
  border-radius: 1rem;
  overflow: hidden;
}

ul#activity-stream {
  margin: 3vw;
  padding: 0;
}

.em i {
  color: var(--color-accent);
  font-weight: bold;
}

.spam-activity {
  display: none;
}

.pageavatar {
  background: var(--color-accent);
  max-width: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.kettei {
  border: 0.5px solid var(--color-surface);
  font-size: .9rem;
  padding: 6px 2rem;
  border-radius: 2.75rem;
  background: var(--color-tomato);
  color: var(--color-surface);
  margin: 3rem 0;
}

div#item-body .profile {
  padding: 0 1.5rem;
}

.profile-group-section {
  border-top: 1px solid #ddd;
  padding-top: 2rem;
}

.ppap {
  margin: 5vw;
  padding: 4rem 0 0;
  margin-bottom: 0;
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ppap-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  transition: color 0.15s, border-color 0.15s;
}

.ppap-edit:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.ppap-edit svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
  flex-shrink: 0;
}

.profile-edit-avatar-section {
  /* display: flex; */
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}

.profile-edit-avatar-section .kettei {
  margin: 0;
}

.profile-edit-avatar-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
  white-space: nowrap;
  margin: 2rem 0;
}

.profile-edit-avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 2.22rem;
}

.profile-edit-avatar-img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  display: block;
}

/* 演奏楽器タグ（プロフィール表示） */
.profile-instrument-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-instrument-tag {
  display: inline-block;
  padding: 1px 0.7rem;
  border: 1px solid var(--color-text);
  border-radius: 9999px;
  font-size: 0.7rem;
  color: var(--color-text);
  line-height: 1.8;
}

.profile-bio p {
  margin: 0 0 0.5rem;
  line-height: 1.8861;
}

.yameta {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-left: 0.5rem;
  text-decoration: none;
}

.pageavatar img {
  display: block;
}

button#cls-insert-image-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  border: none;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.4rem 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

button#cls-insert-image-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

div#whats-new-textarea {
  position: relative;
  max-width: calc(100% - 2rem);
  display: block;
  margin: 0 auto;
}

.cls-composer-title-row {
  margin: 0.25rem 0 1rem;
}

.cls-composer-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.cls-activity-date-picker {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.cls-activity-date-picker__icon {
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
}

#cls-activity-date-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
}

.cls-composer-title-input {
  display: block;
  width: 100%;
  max-width: calc(100% - 2rem);
  margin: 0 auto 1.6rem !important;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.cls-composer-title-input::placeholder {
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  font-weight: 400;
}

.cls-composer-title-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.cls-composer {
  position: relative;
  min-height: 220px;
  max-height: 50vh;
  overflow-y: auto;
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 3.2rem 1.2rem 1.2rem 1.8rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.cls-composer:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.cls-composer:empty:before,
.cls-composer.cls-is-empty:before {
  content: attr(data-placeholder);
  position: absolute;
  top: 3.2rem;
  left: 1.8rem;
  right: 1.2rem;
  color: var(--color-muted);
  opacity: 0.75;
  pointer-events: none;
}

.cls-composer img {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 320px;
  border-radius: 0.75rem;
  margin: 0.35rem 0.15rem;
}

.cls-composer-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.cls-composer p,
.cls-composer h3 {
  margin: 0 0 0.6em;
}

.cls-composer p:last-child,
.cls-composer h3:last-child {
  margin-bottom: 0;
}

.cls-composer h3 {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}

.cls-composer hr {
  border: none;
  border-top: 2px dotted var(--color-border-strong, var(--color-border));
  margin: 1em 15%;
}

/* ＋ボタン（空の段落で表示、Medium風） */
#cls-composer-plus {
  position: absolute;
  left: 0.5rem;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-muted);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
  margin-top: 0.25rem;
}

#cls-composer-plus svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#cls-composer-plus:hover {
  /* transform: rotate(180deg); */
  color: red;
}

#cls-composer-plus-menu {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 8.5rem;
}

#cls-composer-plus-menu[hidden] {
  display: none;
}

#cls-composer-plus-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}

#cls-composer-plus-menu button:hover {
  background: var(--color-card);
}

/* URL埋め込み入力ポップオーバー */
#cls-composer-embed-input {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
  width: min(360px, 92vw);
}

#cls-composer-embed-input[hidden] {
  display: none;
}

#cls-composer-embed-input input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  box-sizing: border-box;
}

#cls-composer-embed-input input:disabled {
  opacity: 0.6;
}

.cls-composer-embed-input__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cls-composer-embed-input__status {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-right: auto;
}

#cls-composer-embed-input .cls-composer-embed-input__row button {
  border: none;
  background: none;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
}

#cls-composer-embed-input .cls-composer-embed-input__row [data-embed-go] {
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
}

#cls-composer-embed-input .cls-composer-embed-input__row [data-embed-go]:disabled {
  background: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}

#cls-composer-embed-input [data-embed-cancel] {
  color: var(--color-muted);
}

/* コンポーザー内の埋め込みプレビュー */
.cls-composer-embed-wrap {
  position: relative;
  display: block;
  margin: 0.6em 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--color-card);
}

.cls-composer-embed-preview {
  max-width: 100%;
  overflow: hidden;
}

.cls-composer-embed-preview iframe,
.cls-composer-embed-preview embed,
.cls-composer-embed-preview object {
  max-width: 100%;
  width: 100% !important;
}

.cls-composer-embed-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--color-overlay-strong, rgba(16, 27, 31, 0.6));
  color: var(--color-surface);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.cls-composer-embed-wrap:hover .cls-composer-embed-remove {
  display: flex;
}

/* 選択範囲バブル（見出しトグル、Medium風） */
#cls-composer-bubble {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  background: var(--color-text);
  border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

#cls-composer-bubble[hidden] {
  display: none;
}

#cls-composer-bubble button {
  border: none;
  background: none;
  color: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

#cls-composer-bubble button:hover {
  color: var(--color-primary);
}

.cls-composer-img-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-overlay-strong, rgba(16, 27, 31, 0.6));
  color: var(--color-surface);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.cls-composer-img-wrap:hover .cls-composer-img-remove {
  display: flex;
}

.cls-composer-hint {
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-muted);
  margin: 0.6rem 0 0;
}

img {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==============================
   アクティビティアイテム・アバター関連
   ============================== */
.mas-i {
  background: var(--color-card);
  animation: none;
}

main#primary {
  min-height: 90vh;
  position: relative;
  top: 5.5rem;
  margin-bottom: 4rem;
  /* padding: 2rem; */
}

footer#colophon {
  padding: 2rem;
  background: none;
  text-align: center;
}

.site-footer__sns {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__sns-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.site-footer__sns-link:hover {
  opacity: 1;
}

.site-info {
  font-size: 10px;
  letter-spacing: 0.14rem;
  color: var(--color-text);
  opacity: 0.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.site-footer__nav a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__sep {
  opacity: 0.4;
}

.activity-inner img {
  margin: 1.5rem 0;
  height: auto;
  display: block;
}

li.load-more {
  list-style-type: none;
}

li.load-more a {
  list-style-type: none;
  display: block;
  background: var(--color-base);
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  text-decoration: none;
  color: var(--color-muted);
}

/* Infinite scroll: 「さらに読み込む」を非表示にして自動読み込み */
#activity-stream.is-infinite-scroll .load-more {
  display: none;
}

#hibi2026-activity-infinite-sentinel {
  padding: 1.25rem 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  opacity: 0.8;
}

#hibi2026-activity-infinite-sentinel::before {
  content: "スクロールで続きを読み込みます";
  display: block;
}

#hibi2026-activity-infinite-sentinel.is-loading::before {
  content: "読み込み中…";
}

#hibi2026-activity-infinite-sentinel.is-hidden {
  display: none;
}

/* Masonry適用前の「左上に固まる一瞬」を隠す: JSより先にCSSで opacity:0 にする */
#activity-stream {
  opacity: 0;
}

#activity-stream.masonry-ready {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #activity-stream.masonry-ready {
    transition: none;
  }
}

@media (max-width: 600px) {

  /* モバイルはmasonry不使用なので即表示（JSがmasonry-readyを付ける前でも） */
  #activity-stream {
    opacity: 1 !important;
  }
}

#activity-stream.masonry-active {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

.gazodake img {
  width: 100%;
  height: auto;
  margin: 0 0 0 0 !important;
  padding: 0 !important;
}

.gazodake p {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}

.activity-item.mas-i {
  background: #fff;
  position: absolute;
  list-style-type: none;
  box-shadow: 0px 13px 28px rgba(25, 25, 25, 0.1);
  transition: 0.03s ease-in-out;
  border-radius: 1rem;
}

.mas-i .activity-avatar img,
.mas-i .acomment-avatar img {
  max-width: 20px;
  border-radius: 100%;
  max-height: 20px;
  overflow: hidden;
  margin: 16px 0 0 0;
}

.activity-avatar,
.acomment-avatar {
  display: flex;
  align-items: center;
}

.activity-inner,
.acomment-content {
  padding: 4.75rem 2rem 1rem 2rem;
  /* font-size: 0.89401rem; */
}

#activity-stream .has-background .activity-meta a:hover {
  background: pink;
  filter: none;
  border-radius: 1rem;
}

.activity-avatar a.activity-user-link,
.acomment-avatar a.activity-user-link {
  margin-top: 8px;
  margin-left: 5px;
  font-size: 10.5px;
  text-decoration: none;
  color: var(--color-text);
}

.activity-single-link {
  font-size: 10.5px;
  opacity: 0.5;
  vertical-align: middle;
  text-align: right;
  color: var(--color-primary);
  margin-left: auto;
  padding-top: 8px;
  padding-right: 0.25rem;
}

#activity-stream .activity-meta a,
#activity-stream .acomment-options a {
  overflow: hidden;
  width: 2.484rem;
  display: inline-block;
  height: 28px;
  opacity: 0.6;
  left: 5px;
  position: relative;
  margin: 1rem 0 0.5rem 0;
}

/* アクションアイコン共通ベース */
#activity-stream .activity-meta a.acomment-reply:before,
#activity-stream .activity-meta a.view:before,
#activity-stream .acomment-options a.acomment-reply:before,
#activity-stream .activity-meta a.fav:before,
#activity-stream .activity-meta a.unfav:before,
#activity-stream .activity-meta a.delete-activity:before,
#activity-stream .activity-meta a.acomment-delete:before,
#activity-stream .activity-meta a.delete-activity-single:before,
#activity-stream .acomment-options a.acomment-delete:before,
#activity-stream .activity-meta a.spam-activity:before,
#activity-stream .acomment-options a.spam-activity-comment:before {
  content: "";
  display: block;
  height: 32px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center 6px;
}

/* アイコン個別指定 */
#activity-stream .activity-meta a.acomment-reply:before,
#activity-stream .activity-meta a.view:before,
#activity-stream .acomment-options a.acomment-reply:before {
  background-image: url(../img/comment-dots.svg);
}

#activity-stream .activity-meta a.fav:before {
  background-image: url(../img/star.svg);
}

#activity-stream .activity-meta a.unfav:before {
  background-image: url(../img/star-fill.svg);
}

#activity-stream .activity-meta a.delete-activity:before,
#activity-stream .activity-meta a.acomment-delete:before,
#activity-stream .activity-meta a.delete-activity-single:before,
#activity-stream .acomment-options a.acomment-delete:before {
  background-image: url(../img/trash.svg);
}

#activity-stream .activity-meta a.spam-activity:before,
#activity-stream .acomment-options a.spam-activity-comment:before {
  background-image: url(../img/spam.svg);
  background-size: 14px 14px;
}

.friendship-button .friendship-button.add:before {
  content: "";
  display: inline-block;
  height: 13px;
  background-image: url(../img/user-add.svg);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center 1px;
  width: 15px;
  position: relative;
  top: 1px;
  opacity: 0.4;
  margin-right: 0.23rem;
}

div#item-header {
  max-width: 1600px;
  padding: 0 2rem;
  transition: 0.15s all ease-in;
}

div#item-header.scrolled {
  position: fixed;
  z-index: 893893;
  top: 0;
  left: 40px;
  height: 50px;
  /* klogoと高さ統一 */
  padding: 0 0.5rem;
  /* 縦paddingなし・flexで中央寄せ */
  display: flex;
  align-items: center;
}

div#post-mention {
  display: none !important;
}

#item-header-cover-image #item-buttons div a {
  display: block;
  background: var(--color-surface);
  padding: 0.2rem 1rem;
  border: 0.5px solid var(--color-border);
  border-radius: 2rem;
  text-decoration: none;
  font-size: 13px;
  color: var(--color-text);
}

a.proficon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s, height 0.2s;
}

a.proficon .mav,
a.proficon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrolled a.proficon {
  width: 23px;
  height: 23px;
}

#item-header.scrolled a.proficon,
.bp-nouveau #item-header.scrolled a.proficon {
  width: 23px;
  height: 23px;
  position: static;
  /* top: 2px ハックを廃止 */
}

#item-header #item-header-cover-image #item-buttons div {
  top: 0;
  /* ハック解除 */
}

.bp-nouveau #item-header {
  max-width: 1600px;
  padding: 1rem 2rem 0 2rem;
  transition: 0.15s all ease-in;
}

.bp-nouveau #item-header.scrolled {
  position: fixed;
  z-index: 893893;
  top: 0;
  left: 40px;
  height: 50px;
  /* klogoと高さ統一 */
  padding: 0 0.5rem;
  /* 縦paddingなし */
  display: flex;
  align-items: center;
}

.bp-nouveau #item-header-cover-image #item-buttons div a {
  display: block;
  background: var(--color-surface);
  padding: 0.2rem 1rem;
  border: 0.5px solid var(--color-border);
  border-radius: 2rem;
  text-decoration: none;
  font-size: 13px;
  color: var(--color-text);
}

.profile-visibility-inline {
  margin-bottom: 4rem;
}

div#item-buttons {
  margin-top: -5px;
}

.bp-nouveau #item-header b.activity-user-link {
  font-size: .7rem !important;
  margin-left: 0.6rem;
  display: inline-flex;
  align-items: center;
  position: static;
  /* top: 4px ハック廃止 */
}

.bp-nouveau #item-header #item-header-cover-image #item-buttons div {
  top: 0;
  /* ハック解除 */
}

.activity-permalink #buddypress #activity-stream li {
  max-width: 100% !important;
  width: 800px !important;
  display: block !important;
  position: relative !important;
  margin: 3rem auto;
  transform: none !important;
}

button#image-only-button {
  background: var(--color-primary);
  border: none;
  font-size: 0.75rem;
  color: var(--color-surface);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  margin: 1rem;
}

.acomment-content {
  padding-top: 0 !important;
}

.activity-permalink .has-background .activity-meta {
  /* background: var(--color-overlay) !important; */
  border-radius: 0.75rem 0.75rem 0 0 !important;
}

.activity-permalink .activity-comments {
  border-radius: 0 0 0.75rem 0.75rem !important;
}

.has-background .activity-comments.mieru,
.has-background.has-comments .activity-comments {
  height: auto;
  overflow: visible;
  /* background: var(--color-overlay); */
  border-radius: 0.75rem;
  padding: 0 1rem;
}

/* ユーザー名とリンクのマージン */
.activity-avatar b.activity-user-link {
  margin-right: 1rem;
}

a.itemlinks,
a.itemlinks:visited,
a.itemlinks:hover {
  color: var(--color-text) !important;
}

a.itemlinks {
  font-size: 11px;
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.35s ease;
  margin-left: .895rem
}

.cls-follow-count {
  font-weight: 700;
}

/* グレーの下線（常時） */
a.itemlinks::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
}

/* var(--color-text)の下線が左から右へ伸びる */
a.itemlinks::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.35s ease;
}

a.itemlinks:hover {
  color: var(--color-text);
}

a.itemlinks:hover::after {
  width: 100%;
}

.activity-permalink .has-background .activity-comments.mieru label.bp-screen-reader-text {
  color: var(--color-text) !important;
}

.has-background .acomment-options {
  filter: invert(1);
}

.activity-meta {
  display: flex;
  flex-flow: wrap;
  padding: 0 0 0.5rem 0.4em !important;
  margin-top: .1rem;
}

.has-background .activity-content .activity-inner {
  display: none;
}

/* 
.activity.activity_update.activity-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px; 
    padding: 20px; 
} */
img.misquer {
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: -33; */
  width: 100%;
  height: auto;
  max-height: 10000px;
}

.activity.activity_update.activity-item.has-background {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* min-height: 600px; 画像のみの投稿に適用 */
  /* padding: 20px; コンテンツが見えるように */
}

.activity.activity_update.activity-item.has-background .activity-inner {
  min-height: 45px;
}

.has-background .activity-inner p img {
  opacity: 0;
  display: none !important;
}

.activity-inner p:empty {
  display: none;
  /* 空の<p>タグを非表示 */
}

.has-background {
  position: relative;
  overflow: hidden;
}

.has-background .activity-avatar {
  background: #fff;
  border-radius: 1rem;
}

.has-background .activity-avatar,
.activity-meta {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1.2rem;
  padding: 7px 7px 0px 8px;
  border: solid 0.5px #f8f8f8;
}

.activity-meta {
  padding: 0.5rem;
}

#activity-stream .has-background .activity-meta a {
  filter: grayscale(1);
}

.ac-reply-avatar .avatar {
  max-width: 26px;
  border-radius: 100%;
  max-height: 26px;
}

#activity-stream .no-comments .activity-comments {
  display: none;
}

#activity-stream .has-comments .activity-comments form.ac-form {
  display: none;
}

.activity-comments,
.just-posted .activity-comments,
.ac-form {
  padding: 0;
  /* height: 0;
    overflow: hidden; */
  transition: height 0.3s ease;
  /* スムーズなアニメーション（任意） */
}

.activity-comments .ac-reply-content .bp-screen-reader-text {
  font-size: 10px;
  color: var(--color-muted);
  display: block;
  margin: 0.5rem;
}

.activity-comments .ac-reply-content textarea.ac-input {
  border: 0.5px solid var(--color-border);
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.7rem;
}

.has-comments .activity-comments,
.has-comments .just-posted .activity-comments {
  height: auto;
  overflow: visible;
  transition: height 0.3s ease;
  /* スムーズなアニメーション（任意） */
}

.activity-comments.mieru,
.activity-comments.mieru .ac-form,
.has-comments .activity-comments {
  height: auto;
  overflow: visible;
  padding: 10px 1.5rem;
  /* background: #eee; */
  border-radius: 0.75rem;
}

.activity-comments.mieru textarea {
  border-radius: 0.75rem;
  margin: 0.25rem;
  width: calc(100% - 0.5rem);
  border: 1px solid var(--color-border);
  padding: 0.4rem;
  font-size: 0.8rem;
}

.activity-comments.mieru label.bp-screen-reader-text {
  color: var(--color-muted);
  font-size: 0.6rem;
  margin: 0 0.25rem;
}

.activity-comments ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.acomment-content {
  font-size: 0.85rem;
  opacity: 0.976;
}

#whats-new-submit .kettei {
  margin: 1rem;
}

div#whats-new-content {
  padding: 2rem;
}

/* .activity-image {
    max-width: 100%;
    height: auto;
} */
#whats-new-messages.updated {
  background: var(--color-positive-bg);
  padding: 10px;
  border: 1px solid var(--color-positive-border);
}

#whats-new-messages.error {
  background: var(--color-negative-bg);
  padding: 10px;
  border: 1px solid var(--color-negative-border);
}

#activity-stream p {
  font-size: 0.869rem;
  margin: 0.25rem 0 1.5rem 0;
}

#item-header-cover-image #item-buttons div {
  display: inline-block;
  font-size: 0.7852rem;
  margin-left: 1rem;
  position: relative;
  top: 7px;
}

.em.pixelbones .em-location-map-container p {
  margin: 0 0 5px !important;
  line-height: 168% !important;
  font-size: 12px !important;
}

#primary .em .input .filepond--drop-label {
  font-size: 12px !important;
  margin: 0.5rem auto !important;
  display: block;
  text-align: center;
  line-height: 2rem !important;
}

.input.em-location-data-url,
.multi-day-event-info {
  display: none !important;
}

#primary h3 {
  font-weight: bold !important;
  font-size: 1rem !important;
  margin: 3rem 0 2rem !important;
  color: #333;
}

.profile-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

.profile-table {
  display: flex;
  flex-direction: column;
}

.profile-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 2rem 0 2rem;
  border-bottom: 1px solid #f0f0f0;
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-cell-label {
  font-weight: 600;
  color: var(--color-text);
}

.profile-cell-value {
  color: var(--color-text);
  word-break: break-word;
}

.profile-cell-label p,
.profile-cell-value p {
  margin: 0;
}

.profile-sns-label {
  display: inline-block;
  font-weight: 700;
  margin-right: 0.25rem;
}

.profile-sns-value {
  margin-right: 0.5rem;
}

.profile-cell-value a {
  margin-right: 0.35rem;
}

.profile-sns-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.profile-sns-icon.sns-x {
  color: #333;
}

.profile-sns-icon.sns-youtube {
  color: #ff0000;
}

.profile-visibility-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-visibility-option {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  color: var(--color-muted);
}

.profile-visibility-inline ul {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
}

.profile-visibility-inline li {
  margin: 0;
}

.field-visibility-label {
  margin: 1rem 0 0.35rem !important;
  color: var(--color-muted);
}

#profile-edit-form .wp-editor-tabs,
#profile-edit-form .wp-editor-tools,
#profile-edit-form .quicktags-toolbar,
#profile-edit-form .mce-toolbar-grp,
#profile-edit-form .mce-statusbar,
#profile-edit-form .mce-tinymce {
  display: none !important;
}

#profile-edit-form textarea.wp-editor-area {
  display: block !important;
  width: 100%;
  min-height: 8rem;
}

#profile-edit-form .field-visibility-settings-toggle,
#profile-edit-form .field-visibility-settings-notoggle,
#profile-edit-form .field-visibility-settings legend {
  font-size: 0.75rem;
}

#profile-edit-form .profile-cell-value>label,
#profile-edit-form .profile-cell-value>legend {
  display: none;
}

/* チェックボックス・ラジオ: ピル型スタイル */
.checkbox-options,
.radio-options {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-options label.option-label:hover,
.radio-options label.option-label:hover {
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: #fff;
  font-weight: bold;
}

.checkbox-options label.option-label,
.radio-options label.option-label {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.7rem 0;
  border: 1px solid #d8d8d8;
  border-radius: 9999px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.7rem;
  margin: 0.2rem;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.checkbox-options label.option-label:has(input:checked),
.radio-options label.option-label:has(input:checked) {
  background: var(--color-text);
  color: #fdfdfd;
  font-weight: bold;
}

.checkbox-options input[type="checkbox"],
.radio-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}

/* 可視性ラジオボタン（div.radio > label 構造）もピル型に */
#profile-edit-form .radio label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.7rem 0;
  border: 1px solid var(--color-text);
  border-radius: 9999px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.7rem;
  margin: 0.2rem;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

#profile-edit-form .radio label:has(input[type="radio"]:checked) {
  background: var(--color-text);
  color: #fdfdfd;
}

#profile-edit-form .radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}

#profile-edit-form .profile-cell-value fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 0.5px solid #aaa;
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  /* text-indent: 1.1111rem; */
}

input#cls-event-search-input {
  text-indent: 1.111rem;
}

textarea {
  border-radius: 0.75rem;
}

.wp-editor-area {
  font-family: auto !important;
  font-size: 1rem !important;
  padding: 1rem !important;
  margin: 0 !important;
  line-height: 150%;
  border: 0.5px solid #aaa;
  outline: 0;
  display: block;
  resize: vertical;
  box-sizing: border-box;
}

.wp-editor-container {
  clear: both;
  border: 1px solid #ddd;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.profile-row div {
  padding: 0;
  font-size: small;
}

#profile-edit-form .kettei.actpost {
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
}

/* ==============================
   アクティビティカレンダー関連
   ============================== */
/* ▼▼▼ ここからカレンダー部分 ▼▼▼ */

/* カレンダー全体の枠・レイアウト */
.bp-activity-calendar {
  width: 100%;
  max-width: 300px;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.7rem;
}

/* カレンダーのセル（曜日・日付） */
.bp-activity-calendar th,
.bp-activity-calendar td {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--color-border);
}

/* 曜日ヘッダーのスタイル */
.bp-activity-calendar th {
  background: var(--color-base);
  color: var(--color-text);
  font-weight: bold;
}

/* アクティブな日付セル（イベントがある日など） */
.bp-activity-calendar td.active {
  background: var(--color-primary);
}

/* アクティブセル内のリンク */
.bp-activity-calendar td.active a {
  color: var(--color-surface);
  text-decoration: none;
  display: block;
}

/* 空セル（何もない日） */
.bp-activity-calendar td.empty {
  background: var(--color-base);
}

/* カレンダーのナビゲーション（前月・次月など） */
.calendar-nav {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
}

.calendar-nav a {
  text-decoration: none;
  color: var(--color-link);
  font-weight: bold;
  cursor: pointer;
}

.calendar-nav a:hover {
  color: var(--color-link-hover);
}

div#bp-activity-calendar-container {
  display: inline-block;
}

/* ▲▲▲ ここまでカレンダー部分 ▲▲▲ */

/* 投稿内 YouTube / 外部動画 iframe をレスポンシブ化（16:9固定） */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 0.5rem;
  margin: 1.25rem 0;
}

.entry-content a,
.acomment-content a {
  color: var(--color-link);
  text-decoration: none;
}

.activity-inner a:hover,
.ac-reply-content a:hover,
.entry-content a:hover,
.acomment-content a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* アクティビティ本文のみアンダーライン */
.activity-inner a {
  text-decoration: underline;
}

.activity-inner a:hover {
  text-decoration: underline;
}

/* ==============================
   その他・調整用
   ============================== */
#bp-ajax-loader {
  display: none;
  text-align: center;
  margin: 10px 0;
}

.wakegi,
#subnav {
  display: none;
  /* 仮消し */
}

/* ==============================
   フローティングPOST/Photoボタン & 全画面フォーム
   ============================== */
#floating-action-buttons {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

#show-post-form:before {
  content: "POST";
  font-size: 7px;
  position: absolute;
  color: var(--color-surface);
  bottom: 5px;
}

#show-photo-form:before {
  content: "PHOTO";
  font-size: 7px;
  position: absolute;
  color: var(--color-surface);
  bottom: 5px;
}

#show-calendar-modal:before {
  content: "CAL";
  font-size: 7px;
  position: absolute;
  color: var(--color-surface);
  bottom: 5px;
}

.fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-surface);
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-photo,
.fab-post,
.fab-calendar {
  background: var(--color-primary);
}

/* SVGを白に統一 */
#floating-action-buttons img {
  filter: brightness(0) invert(1) !important;
}

.fab:hover {
  filter: brightness(0.9);
}

#fullscreen-calendar-modal .calendar-modal-content {
  height: auto !important;
  width: auto !important;
}

#fullscreen-post-form,
#fullscreen-calendar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-overlay-light);
  z-index: 191989869998;
  display: none;
  align-items: center;
  justify-content: center;
}

#fullscreen-post-form form,
#fullscreen-calendar-modal .calendar-modal-content {
  background: var(--color-surface);
  border-radius: 1rem;
  padding: 1rem 1rem;
  /* max-width: 480px; */
  width: 95vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  position: relative;
  height: 95vh;
}

#fullscreen-post-form .kettei.actpost {
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
}

#modal-close {
  position: absolute;
  top: 32px;
  right: 48px;
  z-index: 10001;
}

#close-modal {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-muted);
  transition: color 0.2s;
}

#close-modal:hover {
  color: var(--color-accent);
}

div#template-notices p {
  position: fixed;
  left: 0;
  bottom: 0;
  background: var(--color-muted);
  color: var(--color-surface);
  font-size: 0.7rem;
  border-radius: 0 1rem 0 0;
  padding: 0.5rem 1rem 0.5rem 1rem !important;
  margin: 0;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  will-change: transform, opacity;
  animation: hibi2026-template-notice-toast-in 0.16s ease-out both,
    hibi2026-template-notice-toast-out 0.4s ease-in 3s forwards;
}

@keyframes hibi2026-template-notice-toast-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hibi2026-template-notice-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  to {
    opacity: 0;
    transform: translateY(24px);
    visibility: hidden;
  }
}

div#item-body {
  /* padding: 5vw; */
  max-width: 100%;
  margin: 1rem auto;
}

/* #item-body内ではstream自身のmargin 3vwは不要（5vwが既に確保されている） */
div#item-body ul#activity-stream {
  margin: 0;
}

/* EM イベントフォームの確認・エラー通知 */
.cls-event-form .statusnotice {
  margin-bottom: 1.5rem;
}

.cls-event-form .em-notice-success {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #edfaf3;
  border-left: 4px solid #2ecc71;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a5c38;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.12);
}

.cls-event-form .em-notice-success::before {
  content: "✓";
  font-size: 1.1rem;
  flex-shrink: 0;
  color: #2ecc71;
}

.cls-event-form .em-notice-error {
  background: #fef0f0;
  border-left: 4px solid var(--color-tomato);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #7a1a1a;
}

@media (max-width: 600px) {
  .activity-item.mas-i {
    margin: 2rem auto !important;
    position: relative !important;
    transform: none !important;
  }
}

/* EM フォーム内 input / legend / uploader を他フォームと統一 */
input.flatpickr-input,
.em-time-input {
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.em-time-range fieldset legend {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
  border: none !important;
}

.em-uploader-label {
  padding: 6px 16px !important;
  background: var(--color-tomato) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* EM flatpickrカレンダー：レイアウトは触らず色・余白だけ統一 */
.flatpickr-calendar {
  background: #fff !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
  border: none !important;
  font-family: inherit !important;
}

/* 月ナビ */
.flatpickr-months {
  background: transparent !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid #eee;
}

.flatpickr-month {
  background: transparent !important;
  color: #333 !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--color-primary, #285876) !important;
}

.flatpickr-current-month,
.flatpickr-current-month select,
.flatpickr-current-month input.numInput {
  color: #333 !important;
  font-weight: bold !important;
}

.flatpickr-current-month select,
.flatpickr-current-month input.numInput {
  background: transparent !important;
  border: none !important;
}

/* 曜日 */
.flatpickr-weekday {
  color: #555 !important;
  font-weight: bold !important;
  background: transparent !important;
}

/* 日付セル */
.flatpickr-day {
  border-radius: 4px !important;
}

.flatpickr-day.today {
  color: var(--color-primary, #285876) !important;
  font-weight: bold !important;
  border-color: var(--color-primary, #285876) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--color-primary, #285876) !important;
  border-color: var(--color-primary, #285876) !important;
  color: #fff !important;
}

.flatpickr-day.inRange {
  background: color-mix(in srgb, var(--color-primary, #285876) 15%, #fff) !important;
  box-shadow: none !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled) {
  background: var(--color-base, #ebebeb) !important;
}



.singleeventtitle {
  max-width: 100%;
  /* タイムラインと統一 */
  margin: 4rem 0;
  padding: 0 5vw;
}

.singlepadding {
  padding-top: 2rem !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 1.5rem auto;
  max-width: 960px;
}

.cls-location-single-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.cls-location-card {
  margin-bottom: 0;
}

.cls-location-map {
  margin-top: 1rem;
  width: 100%;
  line-height: 0;
}

.cls-location-map .em-location-map-container {
  width: 100% !important;
}

.cls-location-map iframe {
  display: block;
  width: 100%;
}

.cls-location-guide {
  margin-top: 2rem;
  padding: 0 1.5rem;
  line-height: 1.8;
}

.cls-location-guide h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--color-primary);
}

.cls-location-guide h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.2rem 0 0.4rem;
}

.cls-location-guide p {
  margin: 0 0 0.8rem;
}

/* profile-card 内に入ったときは profile-row スタイルに揃える */
.cls-location-card .cls-location-guide {
  margin-top: 0;
  padding: 0;
  line-height: 1.8;
  padding-bottom: 1rem;
  font-size: small;
}


.cls-location-card .cls-location-guide h2 {
  font-size: inherit;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  padding: 2rem 0 0.35rem;
  border-bottom: none;
  border-top: 1px solid #f0f0f0;
}

.cls-location-card .cls-location-guide p {
  /* margin: 0; */
  color: var(--color-text);
  word-break: break-word;
}

.cls-location-card .cls-location-guide p+p {
  margin-top: 0.6rem;
}

.cls-location-upcoming-events {
  margin-top: 2rem;
  padding: 0 1rem 1rem;
}

.cls-location-upcoming-events h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

/* ロケーションページの今後のイベントカードはやや小さめ */
.cls-location-event-card .em-event-card__thumb-link,
.cls-location-event-card .em-event-card__thumb {
  width: 120px;
}

/* #primary h3（1-0-1）より特異度が高い 1-2-1 で上書き */
#primary .cls-location-event-card h3.em-event-card__title {
  font-size: 0.88rem !important;
  margin: 0 0 0.25rem !important;
}
.cls-location-event-card .em-event-card__title a { font-size: 0.88rem; }
.cls-location-event-card .em-event-card__date    { font-size: 0.82rem; margin-top: 0.4rem; }
.cls-location-event-card .em-event-card__time    { font-size: 0.75rem; }
.cls-location-event-card .em-event-card__btn     { font-size: 0.72rem; padding: 0.35rem 0.9rem; }

.cls-event-list-date {
  font-size: 0.8rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── 開催場所マップ：EM内部要素を親に合わせて100%表示 ── */
.cls-location-map>div>div,
.cls-location-map>div>#em-map,
.cls-location-map>div iframe,
.cls-location-map>div>div[style] {
  width: 100% !important;
  height: 100% !important;
}

/* ── コンサート詳細ボタン ── */
.em-event-card__btn--detail {
  background: var(--color-primary, #8b6914);
  color: #fff !important;
  border-color: var(--color-primary, #8b6914);
}

.em-event-card__btn--detail:hover {
  opacity: 0.85;
}

/* プロフィールページ内のイベントタブ */
.cls-event-profile-tabs {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 1.25rem;
}

/* ==============================
   イベントフォロー
   ============================== */
.cls-event-follow-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.cls-event-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 2rem;
  background: cornflowerblue;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.cls-event-follow-btn:hover,
.cls-event-follow-btn.is-following {
  background: var(--color-primary);
  color: #fff;
}

.cls-event-follow-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cls-event-follower-count-text {
  font-size: 0.60451150151515rem;
  color: var(--color-muted, #777);
}

.cls-event-followers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
  align-items: center;
}

.cls-event-follower__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: block;
  transition: transform 0.15s;
}

.cls-event-follower__avatar:hover img {
  transform: scale(1.15);
  position: relative;
  z-index: 1;
}

.cls-event-follower__more {
  font-size: 0.78rem;
  color: var(--color-muted, #888);
  padding-left: 0.25rem;
}

/* ==============================
   イベントコメント
   ============================== */
.cls-event-comments-section {
  max-width: 780px;
  margin: 2.5rem auto 0;
  padding: 0 5vw 3rem;
}

.cls-event-comments-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--color-text);
}

.cls-event-comment-form-wrap {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.cls-event-comment-form__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.cls-event-comment-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cls-event-comment-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.cls-event-comment-textarea:focus {
  border-color: var(--color-primary);
}

.cls-event-comment-form__footer {
  display: flex;
  justify-content: flex-end;
}

.cls-event-comment-submit {
  padding: 0.4rem 1.1rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.cls-event-comment-submit:hover {
  opacity: 0.85;
}

.cls-event-comment-login {
  font-size: 0.9rem;
  color: var(--color-muted, #666);
  margin-bottom: 1rem;
}

.cls-event-comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cls-event-comment-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.cls-event-comment__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.cls-event-comment__body {
  flex: 1;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

.cls-event-comment__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.cls-event-comment__author {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.cls-event-comment__author:hover {
  text-decoration: underline;
}

.cls-event-comment__date {
  font-size: 0.75rem;
  color: var(--color-muted, #888);
}

.cls-event-comment__text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text);
}

.cls-event-comment__text p {
  margin: 0;
}

/* ==============================
   イベント検索・絞り込みUI
   ============================== */
.cls-event-search-wrap {
  padding: 1rem 5vw 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* テキスト検索 */
.cls-event-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cls-event-search__icon {
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  height: 16px;
  margin-top: 12px;
  margin-bottom: auto;
  color: var(--color-muted, #888);
  pointer-events: none;
  display: block;
}

.cls-event-search__input {
  width: 100%;
  padding: 0.6rem 2.5rem 0.6rem 2.25rem;
  text-indent: 1rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 2rem;
  font-size: 0.9rem;
  background: #fff;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.cls-event-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.cls-event-search__clear {
  position: absolute;
  right: 0.65rem;
  top: 0;
  bottom: 0;
  height: 1.5rem;
  margin-top: 8px;
  margin-bottom: auto;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: var(--color-muted, #888);
  cursor: pointer;
  padding: 0 0.3rem;
}

.cls-event-search__clear:hover {
  color: var(--color-text);
}

/* 地域ボタン */
.cls-event-region-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0;
}

.cls-event-region__label {
  font-size: 0.75rem;
  color: var(--color-muted, #666);
  white-space: nowrap;
  margin-right: 0.25rem;
}

.cls-event-region__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cls-event-region__btn,
.cls-event-pref__btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 2rem;
  background: #fff;
  color: var(--color-text);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.cls-event-region__btn:hover,
.cls-event-pref__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cls-event-region__btn.active,
.cls-event-pref__btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 都道府県ボタン */
.cls-event-pref-wrap {
  padding-top: 0.25rem;
}

.cls-event-pref__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* 件数表示 */
.cls-event-result-count {
  padding: 0.3rem 5vw 0;
  font-size: 0.8rem;
  color: var(--color-muted, #666);
  margin: 0;
}

/* 検索結果なし */
.cls-event-search__empty {
  padding: 3rem 5vw;
  text-align: center;
  color: var(--color-muted, #888);
  font-size: 0.9rem;
}

/* ==============================
   スケルトンローディング
   ============================== */
@keyframes cls-shimmer {
  0% {
    background-position: -600px 0;
  }

  100% {
    background-position: 600px 0;
  }
}

.cls-skeleton-box {
  border-radius: 0.4rem;
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 600px 100%;
  animation: cls-shimmer 1.4s infinite linear;
}

.cls-event-skeleton__card {
  display: flex;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  margin: 0;
  border-radius: 1rem;
  background: #fff;
}

.cls-skeleton-box--thumb {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 210 / 297;
  border-radius: 0.5rem;
}

.cls-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.cls-skeleton-box--title {
  height: 1.2rem;
  width: 70%;
}

.cls-skeleton-box--date {
  height: 1rem;
  width: 45%;
}

.cls-skeleton-box--location {
  height: 0.9rem;
  width: 60%;
}

.cls-skeleton-box--btn {
  height: 2rem;
  width: 6rem;
  margin-top: auto;
  border-radius: 2rem;
}

@media (max-width: 600px) {
  .cls-event-search-wrap {
    padding: 0.75rem 4vw 0.5rem;
  }

  .cls-event-skeleton__card {
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
  }

  .cls-skeleton-box--thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
}

/* ── 開催場所詳細リンク ── */
.cls-event-location-detail-link {
  text-align: right;
  margin: 7px 0 0;
  font-size: 10px;
}

.cls-event-location-detail-link a {
  color: var(--color-muted, #566c78);
  text-decoration: none;
  text-decoration: underline;
}

.cls-event-location-detail-link a:hover {
  text-decoration: underline;
}

/* ── パンくずナビ ── */
.cls-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-muted, #888);
  padding: 1rem 1.5rem;
  background: #f5f3f2;
  border-top: 6px solid #f5f3f2;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.cls-breadcrumb__link {
  color: var(--color-muted, #888);
  text-decoration: none;
}

.cls-breadcrumb__link:hover {
  text-decoration: underline;
}

.cls-breadcrumb__sep {
  margin: 0 0.3em;
  color: #ccc;
}

.cls-breadcrumb__current {
  color: var(--color-text, #333);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── イベントアーカイブ フィルタータブ＋ソート ── */
.cls-event-filter-wrap {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
  /* タイムラインと統一 */
  margin: 1rem 0 0;
  padding: 0 5vw;
  /* #item-body と同じ余白 */
  border-bottom: 2px solid var(--color-border, #e0e0e0);
}

.cls-event-filter {
  display: flex;
  gap: 0;
  flex: 1;
}

.cls-event-filter__tab,
.cls-event-filter__tab:visited,
.cls-event-filter__tab:hover {
  color: var(--color-text) !important;
}

.cls-event-filter__tab {
  padding: 0.55rem 0.9rem;
  font-size: 11px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.cls-event-filter__tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

.cls-event-sort {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: -2px;
  font-size: 11px;
  /* タイムラインタブと統一 */
  color: var(--color-muted, #566c78);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--color-border, #e0e0e0);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--color-base, #f5f5f5);
  transition: background 0.2s, color 0.2s;
}

.cls-event-sort:hover {
  background: #e8e8e8;
  color: var(--color-text, #333);
}

.cls-event-sort__icon {
  font-size: 0.75rem;
  line-height: 1;
}

@media (max-width: 600px) {

  /* 5vw が小さい画面ではそのまま効くため override 不要 */
  .cls-event-filter__tab {
    padding: 0.5rem 0.6rem;
  }

  .cls-event-sort {
    padding: 0.35rem 0.5rem;
  }
}

/* ── アーカイブページ h1 ── */
.page-header {
  margin: 0;
  padding: 0;
}

.page-header .page-title {
  max-width: 100%;
  /* タイムラインと統一 */
  margin: 2.5rem 0 1.5rem;
  padding: 0 5vw;
  /* #item-body と同じ余白 */
  font-size: 1.75rem;
  font-weight: 900;
}

/* ── 統一ページネーション ── */
.cls-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin: 2rem auto;
  width: 100%;
}

.cls-pagination a {
  color: var(--color-text, #333);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
}

.cls-pagination a:hover {
  text-decoration: underline;
}

/* BPページ件数を非表示 */
.pag-count {
  display: none !important;
}

/* BPコンテナをリセット */
#pag-top {
  display: none;
}

#pag-bottom {
  display: block;
  text-align: center;
}

.pagination-links {
  display: block;
}

@media (max-width: 600px) {

  /* ヘッダー＋パンくず下のメインオフセット */
  main#primary {
    top: 6rem;
  }

  /* パンくず：モバイルでは横パディングを小さく */
  .cls-breadcrumb {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* アーカイブh1 */
  .page-header .page-title {
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem;
    /* padding は 5vw のまま（モバイルでも適切） */
  }

  /* イベント詳細タイトル */
  .singleeventtitle {
    margin: 2rem 0 1rem;
  }
}


.profile-group-anchor-nav a,
.subsubsub a {
  color: #555;
  font-size: .8rem;
  display: inline-block;
  margin-right: 0.5rem;
  text-decoration: none;
}

.profile-group-anchor-nav a:hover,
.subsubsub a:hover {
  color: rgb(119, 30, 30);
}

.profile-group-anchor-nav a:after,
.subsubsub a:after {
  display: block;
  content: "";
  border-bottom: dashed 1px #aaa;
}

.subsubsub {
  font-size: 0;
  /* &nbsp;|&nbsp; テキストノードを非表示 */
}

.admin-events-filter {
  display: inline;
  /* div → inline で同じ行に */
  font-size: 0;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid #ddd;
}

.admin-events-filter a {
  font-size: 0.8rem;
}

.admin-events-filter a:last-child {
  /* display: none; */
  /* My イベントを非表示 */
}

a.em-button.button.add-new-h2 {
  background: #ed4e3b;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: .5rem 2.5rem;
  display: inline-block;
  margin: 1rem 0;
  border-radius: 5rem;
  font-size: .8rem !important;
}

p.search-box input {
  font-size: .6rem !important;
}

p.search-box {
  margin: 1.5rem 0 0 0;
}

/* ==============================
   ヘッダーナビゲーション（右寄せ）
   ============================== */
.cls-header-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  /* klogoと同じ高さで串を通す */
  padding-right: 2.8rem;
  /* ハンバーガー分の余白 */
}

/* scrolled時のitem-header内の横並びを整える */
div#item-header.scrolled .activity-avatar,
.bp-nouveau #item-header.scrolled .activity-avatar {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.cls-header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.cls-header-nav a {
  font-size: 0.61rem;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}

.cls-header-nav a:hover {
  background: var(--color-base);
}

/* 「コンサートを告知」ボーダーボタン */
.cls-header-nav .cls-nav-cta {
  background: var(--color-tomato);
  color: #fff;
  margin: 0 .4rem;
}

.cls-header-nav .cls-nav-cta:hover {
  opacity: 0.85;
}

/* ==============================
   ハンバーガーボタン（コンパクト）
   ============================== */
.cls-hamburger {
  position: fixed;
  top: 7px;
  /* (50px header - 36px button) / 2 = 7px でヘッダー中央 */
  right: 0.75rem;
  z-index: 10002;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
}

.cls-hamburger__line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.cls-hamburger.is-open .cls-hamburger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.cls-hamburger.is-open .cls-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.cls-hamburger.is-open .cls-hamburger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==============================
   オフキャンバスオーバーレイ
   ============================== */
.cls-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cls-offcanvas-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ==============================
   オフキャンバスパネル
   ============================== */
.cls-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(300px, 88vw);
  background: var(--color-surface);
  z-index: 10001;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 4rem 1.5rem 2.5rem;
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cls-offcanvas.is-open {
  transform: translateX(0);
}

/* プロフィール行 */
.cls-offcanvas__profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: opacity 0.15s;
}

.cls-offcanvas__profile:hover {
  opacity: 0.75;
}

.cls-offcanvas__profile img,
.cls-offcanvas__profile .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cls-offcanvas__profile span {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-text);
}

/* ナビリンク群 */
.cls-offcanvas__nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cls-offcanvas__nav a {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.7rem;
  border: none;
  border-radius: 0.4rem;
  transition: background 0.15s;
}

.cls-offcanvas__nav-icon {
  width: auto;
  height: 16px;
  margin-right: 0.35rem;
  flex-shrink: 0;
  opacity: 0.65;
}

.cls-offcanvas__nav a:hover {
  background: var(--color-base);
}

/* コンサート一覧の上に区切り */
.cls-offcanvas__nav a.cls-offcanvas__nav-sep {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* 管理者専用リンク */
.cls-offcanvas__nav a.cls-offcanvas__admin-link {
  color: #1d9bf0;
  font-weight: 600;
}
.cls-offcanvas__nav a.cls-offcanvas__admin-link:hover {
  background: #e8f4fd;
}

/* CTA・認証ボタン群 */
.cls-offcanvas__cta,
.cls-offcanvas__auth {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.cls-offcanvas__btn-tomato {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  background: #ed4e3b;
  color: #fff !important;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  transition: opacity 0.15s;
}

.cls-offcanvas__btn-tomato:hover {
  opacity: 0.85;
}

.cls-offcanvas__btn-outline {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text) !important;
  text-decoration: none;
  font-size: 0.7rem;
  transition: background 0.15s;
}

.cls-offcanvas__btn-outline:hover {
  background: var(--color-base);
}

/* コンサートを告知ボーダーボタン（ヘッダーと同スタイル） */
.cls-offcanvas__btn-border {
  display: block;
  text-align: center;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text) !important;
  text-decoration: none;
  font-size: 0.7rem;
  transition: background 0.15s;
}

.cls-offcanvas__btn-border:hover {
  background: var(--color-base);
}

/* ログアウト（フローティングボタンと被らないようナビ直後に配置） */
.cls-offcanvas__logout {
  display: block;
  text-align: left;
  font-size: 0.7rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
}

.cls-offcanvas__logout:hover {
  color: var(--color-text);
}

/* ==============================
   タブレット以下: ヘッダー内メンバーメニュー
   ============================== */
@media (max-width: 768px) {

  /* --- scrolled状態: 元通り非表示＋アバターのklogoとの重なり防止 --- */

  /* scrolled時はあっぷしてほしいさメンバー名・リンクを非表示（アバターのみ表示） */
  div#item-header.scrolled a.itemlinks,
  .bp-nouveau #item-header.scrolled a.itemlinks,
  div#item-header.scrolled b.activity-user-link,
  .bp-nouveau #item-header.scrolled b.activity-user-link {
    display: none !important;
  }

  /* klogoと重ならないよう margin-left を確保 */
  div#item-header.scrolled .activity-avatar,
  .bp-nouveau #item-header.scrolled .activity-avatar {
    margin-left: 0px; /*なんなのよもぅ*/
  }

  /* --- 非scrolled状態: 名前が改行しないよう2行レイアウト --- */

  /* activity-avatar を折り返し可能に
     → 1行目: アバターアイコン + 名前 / 2行目: itemlinks */
  div#item-header:not(.scrolled) .activity-avatar,
  .bp-nouveau #item-header:not(.scrolled) .activity-avatar {
    flex-wrap: wrap;
    align-items: center;
  }

  /* 名前が途中で折り返さないように */
  div#item-header:not(.scrolled) b.activity-user-link,
  .bp-nouveau #item-header:not(.scrolled) b.activity-user-link {
    white-space: nowrap;
  }

  /* #item-buttons を2行目に展開 */
  div#item-header:not(.scrolled) #item-buttons,
  .bp-nouveau #item-header:not(.scrolled) #item-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.1rem 0 0.15rem;
    margin-top: 1rem;
  }

  /* itemlinks の左マージンを解除（2行目で左揃えにする） */
  div#item-header:not(.scrolled) a.itemlinks,
  .bp-nouveau #item-header:not(.scrolled) a.itemlinks {
    margin-left: 0;
  }

  /* コンサート一覧は非表示、コンサートを告知だけ残す */
  .cls-header-nav a:not(.cls-nav-cta) {
    display: none;
  }
}

/* ==============================
   タイムライン切り替えタブ
   ============================== */
.cls-timeline-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 3rem;
}

.cls-timeline-tab,
.cls-timeline-tab:visited,
.cls-timeline-tab:hover,
.cls-timeline-tab.active {
  color: var(--color-text) !important;
}

.cls-timeline-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  font-size: 11px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.cls-timeline-tab.active {
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.cls-timeline-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base);
  color: var(--color-muted);
  font-size: 0.65rem;
  font-weight: 400;
  border-radius: 9999px;
  padding: 0 0.4rem;
  min-width: 1.4em;
  line-height: 1.6;
}

/* /stream/ ページ: BuddyPress標準タブ（すべてのメンバー/Following/メンション）を非表示 */
body.directory.activity .item-list-tabs.activity-type-tabs {
  display: none;
}

/* ==============================
   認証ページ共通（ログイン・新規登録）
   ============================== */

/* ページ全体：ヘッダーオフセットを無効化して縦中央 */
.cls-auth-page#primary {
  top: 0 !important;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--color-base);
}

.cls-auth-wrap {
  width: 100%;
  max-width: 420px;
}

.cls-auth-wrap--wide {
  max-width: 680px;
}

/* カード */
.cls-auth-card {
  background: var(--color-surface);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.09);
}

/* ロゴ */
.cls-auth-logo img {
  max-height: 30px;
  width: auto;
  display: block;
  margin: 0 auto 2.5rem;
}

/* 通知（ログアウト完了など） */
.cls-auth-notice.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: #166534;
  margin-bottom: 1.5rem;
}

/* エラー通知 */
.cls-auth-notice.error {
  background: var(--color-negative-bg);
  border: 1px solid var(--color-negative-border);
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

/* フォーム内フィールド間隔 */
.cls-auth-form .cls-form-row {
  margin-bottom: 1.25rem;
}

/* 送信ボタン */
.cls-auth-submit {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  margin-top: 2rem;
  background: var(--color-tomato);
  color: #fff;
  border: none;
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.cls-auth-submit:hover {
  opacity: 0.88;
}

/* サブリンク（パスワード忘れ・新規登録） */
.cls-auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.cls-auth-links .cls-auth-links__sep {
  display: none;
  /* 区切り文字を非表示 */
}

.cls-auth-links a {
  color: var(--color-primary);
  text-decoration: none;
}

/* 新規登録リンクだけアンダーライン */
.cls-auth-links a:last-of-type {
  text-decoration: underline;
}

.cls-auth-links a:hover {
  opacity: 0.75;
}

/* フロントページ（ロゴ＋ログイン｜新規登録） */
.cls-front-card {
  text-align: center;
}

.cls-front-logo img {
  margin-bottom: 2rem;
}

.cls-front-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.cls-front-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.cls-front-links a:hover {
  opacity: 0.8;
}

.cls-front-links__sep {
  color: var(--color-border-strong, var(--color-border));
}

/* 新規登録ページ専用 */
.cls-register-card {
  max-width: 680px;
}

/* ===== ログイン・新規登録フォームのinputをイベントフォームと統一 ===== */
/* イベントフォームの実スタイル: border:1px solid #ccc / border-radius:4px / padding:10px 12px / font-size:15px */
.cls-register-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
.cls-register-form select,
.cls-register-form textarea,
.cls-auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]) {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: border-color 0.2s;
}

.cls-register-form input:focus,
.cls-register-form select:focus,
.cls-register-form textarea:focus,
.cls-auth-form input:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
}

.cls-register-form textarea {
  border-radius: 4px !important;
  resize: vertical;
}

/* ラベルスタイルもイベントフォームと統一 */
.cls-register-form .cls-label,
.cls-auth-form .cls-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: bold !important;
  margin-bottom: 10px !important;
  color: #444 !important;
}

.cls-register-form .cls-label.required::after,
.cls-auth-form .cls-label.required::after {
  content: '必須';
  display: inline-block;
  background: #c00;
  color: #fff;
  font-size: 11px;
  font-weight: normal;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* フォームrow間隔 */
.cls-register-form .cls-form-row,
.cls-auth-form .cls-form-row {
  margin-bottom: 1.5rem !important;
}

.cls-register-section {
  margin-bottom: 2rem;
}

.cls-register-section__title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--color-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  margin: 0 0 1rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.cls-register-submit {
  text-align: center;
  padding-top: 1rem;
}

/* セクション区切り線 */
.cls-register-sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

.cls-register-login-link {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.cls-register-login-link a {
  color: var(--color-primary);
  text-decoration: none;
}

/* xProfile フィールドのラベルを cls-label スタイルに */
.cls-register-form .editfield label,
.cls-register-form .editfield legend {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.cls-register-form .editfield fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ==============================
   未ログイン向けログイン促進モーダル
   ============================== */
.cls-login-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cls-login-modal[hidden] {
  display: none;
}

.cls-login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cls-login-modal__box {
  position: relative;
  background: var(--color-surface);
  border-radius: 1rem;
  padding: 2rem 1.75rem 1.5rem;
  width: min(320px, 90vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.cls-login-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-muted);
  line-height: 1;
  padding: 0.2rem 0.5rem;
}

.cls-login-modal__close:hover {
  color: var(--color-text);
}

.cls-login-modal__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.cls-login-modal__desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}

.cls-login-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

nav.profile-group-anchor-nav {
  padding: 1rem 2rem;
}

/* フォロワーをメインナビから非表示（タブで代替） */
#item-nav li#members-followers {
  display: none !important;
}

/* フォロー・フォロワーページの subnav（並び替えドロップダウン等）を非表示 */
body.following #subnav,
body.followers #subnav {
  display: none !important;
}

/* profile-card 内のリスト余白を詰める */
.cls-follow-card {
  margin: 1.5rem;
  padding: 0 1.5rem;
}

.cls-follow-card #members-list {
  margin: 0;
}

/* ==============================
   フォロー / フォロワー リスト（BP Legacy HTML）
   ============================== */
.dir-list.follow #members-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各メンバー行：横並びフレックス */
.dir-list.follow #members-list li {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.dir-list.follow #members-list li:first-child {
  border-top: none;
}

.dir-list.follow #members-list li:last-child {
  border-bottom: none;
}

/* アバター */
.dir-list.follow .item-avatar {
  flex-shrink: 0;
}

.dir-list.follow .item-avatar img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 名前エリア */
.dir-list.follow .item {
  flex: 1;
  min-width: 0;
}

.dir-list.follow .item-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.dir-list.follow .item-title a {
  color: var(--color-text);
  text-decoration: none;
}

.dir-list.follow .item-title a:hover {
  color: var(--color-primary);
}

/* 最終アクティブ時間 */
.dir-list.follow .item-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted, #888);
  margin-top: 0.2rem;
}

.dir-list.follow .item-title .update,
.dir-list.follow .clear {
  display: none !important;
}

/* ボタンエリア */
.dir-list.follow .action {
  flex-shrink: 0;
}

.dir-list.follow .action a {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text) !important;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.dir-list.follow .action a:hover {
  background: var(--color-base);
}

/* ==============================
   アクティビティ 空表示
   ============================== */
.cls-activity-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted, #888);
}

.cls-activity-empty__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.2rem;
}

.cls-activity-empty__hints {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.2rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  font-size: 0.88rem;
}

.cls-activity-empty__hints li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cls-hint-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.cls-activity-empty__sub {
  font-size: 0.82rem;
  margin-top: 0.5rem;
}

/* === アップロード楽観UI === */
.cls-uploading-placeholder {
  overflow: hidden;
}

.cls-upload-preview {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

.cls-upload-preview img {
  width: 100%;
  display: block;
  border-radius: 1rem;
}

.cls-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  border-radius: 1rem;
}

.cls-upload-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  overflow: hidden;
}

.cls-upload-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* ── メンバーイベントページ: トップページと同じ2カラムグリッド ── */
.events-admin-list .em-event-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.events-admin-list .em-event-card .em-event-card__title a { font-size: 0.83rem; }
.events-admin-list .em-event-card .em-event-card__date    { font-size: 0.78rem; }
.events-admin-list .em-event-card .em-event-card__time    { font-size: 0.75rem; }
.events-admin-list .em-event-card .em-event-card__location { font-size: 0.75rem; }
.events-admin-list .em-event-card .em-event-card__btn     { font-size: 0.72rem; padding: 0.4rem 0.9rem; }
@media (max-width: 1140px) {
  .events-admin-list .em-event-cards { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 600px) {
  .events-admin-list .em-event-card .em-event-card__thumb-link,
  .events-admin-list .em-event-card .em-event-card__thumb { width: 100%; }
}
/* ── Linkshare 広告スロット ── */
.cls-linkshare-ad {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  overflow: hidden;
}
.cls-linkshare-ad img,
.cls-linkshare-ad a img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ── 記事投稿アクティビティ（new_blog_post）レイアウト ── */
.cls-act-posted {
  margin: 0 0 0.35rem;
}
.cls-act-post {
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
.cls-act-post__title {
  margin: 0 0 0.2rem;
  font-weight: 600;
  line-height: 1.4;
}
.cls-act-post__title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cls-act-post__excerpt {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.cls-act-title {
  margin: 0 0 0.4rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  padding: 2rem 0;
}

.cls-act-title a {
  color: inherit;
  text-decoration: none;
}

.cls-act-title a:hover {
  text-decoration: underline;
}

/* ── 日付フィルター ── */
.cls-event-date-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.cls-event-date-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cls-event-date__cal-icon {
  position: absolute;
  left: 0.75rem;
  top: 35%;
  transform: translateY(-50%);
  width: auto;
  height: 45px;
  opacity: 0.55;
  pointer-events: none;
  flex-shrink: 0;
  margin-left: -0.5rem;
}

.cls-event-date__input {
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  text-indent: 2rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 2rem;
  font-size: 0.85rem;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  min-width: 148px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}

.cls-event-date__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.cls-event-date__clear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-muted, #888);
  cursor: pointer;
  padding: 0 0.15rem;
}

.cls-event-date__clear:hover {
  color: var(--color-text);
}

/* AJAX結果エリアの上マージン */
#cls-event-ajax-results,
#cls-top-ajax-results,
#cls-top-events-original {
  margin-top: 2rem;
}

/* アーカイブページのイベントカード：横余白 */
#cls-event-original-results,
#cls-event-ajax-results,
#cls-event-skeleton {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── 絞り込み状態バー（pillと件数） ── */
.cls-filter-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 5vw;
  flex-wrap: wrap;
}

.cls-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.cls-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px 2px 10px;
  background: var(--color-base, #ebebeb);
  color: var(--color-muted, #566c78);
  border-radius: 9999px;
  font-size: 0.65rem;
  white-space: nowrap;
  line-height: 1.6;
}

.cls-filter-pill__x {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-muted, #888);
  cursor: pointer;
  margin-left: 1px;
}

.cls-filter-pill__x:hover {
  color: var(--color-text);
}

.cls-filter-count {
  font-size: 0.72rem;
  color: var(--color-muted, #566c78);
  white-space: nowrap;
  margin-left: auto;
}

/* ── 会場検索ページ ── */
.cls-venue-search-page {
  padding: 0 5vw 3rem;
  max-width: 860px;
  margin: 0 auto;
}

.cls-venue-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cls-venue-pref-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cls-venue-pref-select {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 2rem;
  font-size: 0.85rem;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
  transition: border-color 0.2s;
}

.cls-venue-pref-select:focus {
  border-color: var(--color-primary);
}

.cls-venue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.cls-venue-card {
  background: var(--color-surface);
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.cls-venue-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.cls-venue-card__body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cls-venue-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.cls-venue-card__name a {
  color: var(--color-text);
  text-decoration: none;
}

.cls-venue-card__name a:hover {
  color: var(--color-primary);
}

.cls-venue-card__addr {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

.cls-venue-card__btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 2rem;
  text-decoration: none;
  text-align: center;
  align-self: flex-start;
  transition: opacity 0.2s;
}

.cls-venue-card__btn:hover {
  opacity: 0.85;
}

/* ========== パスワード変更フォーム (settings/general) ========== */
.cls-settings-general-form .cls-settings-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.cls-settings-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #444;
}

.cls-settings-input {
  width: 100%;
  max-width: 400px;
  padding: 0.6rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.cls-settings-input:focus {
  outline: none;
  border-color: var(--color-primary, #c0392b);
  background: #fff;
}

.cls-settings-lostpw {
  font-size: 0.8rem;
  color: #888;
  text-decoration: underline;
  align-self: flex-start;
}

.cls-settings-lostpw:hover {
  color: var(--color-primary, #c0392b);
}

#pass-strength-result {
  min-height: 1.2em;
}
/* ========== /パスワード変更フォーム ========== */

/* ========== 公開範囲設定 (settings/privacy) ========== */
.cls-settings-privacy-lead {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 1.2rem;
}

.cls-settings-privacy-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cls-settings-privacy-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.cls-settings-privacy-option:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.cls-settings-privacy-option input {
  margin-top: 0.2rem;
}

.cls-settings-privacy-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cls-settings-privacy-option__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.cls-settings-privacy-option__desc {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
}
/* ========== /公開範囲設定 ========== */

/* ========== ブロックリンク ========== */
.cls-block-link {
  font-size: 11px;
  color: var(--color-muted);
  text-decoration: underline;
  margin-left: 0.895rem;
}

.cls-block-link:hover {
  color: var(--color-tomato, #ed4e3b);
}

.cls-block-link--active {
  color: var(--color-tomato, #ed4e3b);
}
/* ========== /ブロックリンク ========== */

/* ========== ブロック中のユーザー一覧 (settings/blocked-users) ========== */
.cls-blocked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cls-blocked-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
}

.cls-blocked-list__item .mav img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cls-blocked-list__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.cls-blocked-list__unblock {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: underline;
  white-space: nowrap;
}

.cls-blocked-list__unblock:hover {
  opacity: 0.8;
}
/* ========== /ブロック中のユーザー一覧 ========== */

/* ========== カテゴリ・アーカイブ カード（CSS columns） ========== */
.cls-cat-masonry-wrap {
  padding: 0.75rem 1.5rem 2.5rem;
  box-sizing: border-box;
}

/* CSS columns で masonry 風レイアウト */
.cls-cat-masonry {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 3;
  column-gap: 16px;
}

/* カード — break-inside:avoid でカラムをまたがない */
.cls-post-card {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
}

.cls-post-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  transform: translateY(-2px);
}

/* カード全体リンク化（カテゴリ・スライダー内のみ） */
.cls-cat-masonry .cls-post-card__title a::after,
.cls-article-slider-track .cls-post-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cls-cat-masonry .cls-post-card__author,
.cls-cat-masonry .cls-post-card__date,
.cls-article-slider-track .cls-post-card__author,
.cls-article-slider-track .cls-post-card__date {
  position: relative;
  z-index: 2;
}

.cls-post-card__thumb-link {
  display: block;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.cls-post-card__thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.cls-post-card:hover .cls-post-card__thumb {
  transform: scale(1.03);
}

.cls-post-card__body {
  padding: 0.9rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cls-post-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.cls-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.cls-post-card__excerpt {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  overflow: hidden;
}

.cls-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0f0f0;
}

.cls-post-card__author {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #555;
  text-decoration: none;
}

.cls-post-card__author img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.cls-post-card__author:hover { color: var(--color-primary, #c0392b); }

.cls-post-card__date {
  font-size: 0.72rem;
  color: #999;
  white-space: nowrap;
}

/* 1200px未満は2列 */
@media (max-width: 1199px) {
  .cls-cat-masonry { columns: 2; }
}

/* 600px未満は1列 */
@media (max-width: 600px) {
  .cls-cat-masonry-wrap { padding: 0.5rem 1rem 1.5rem; }
  .cls-cat-masonry { columns: 1; }
}
/* ========== /カテゴリ・アーカイブ カード（CSS columns） ========== */

/* ========== トップページ 最新記事スライダー ========== */
.cls-top-articles-section {
  padding: 3.5rem 0 4rem;
  background: var(--color-base, #ebebeb);
}

.cls-article-slider-outer {
  width: 100%;
  overflow: hidden;
}

.cls-article-slider-track {
  display: flex;
  align-items: stretch; /* 全カード同じ高さ */
  will-change: transform;
}

.cls-article-slider-item {
  flex-shrink: 0;
  /* 幅はJSが付与 */
}

/* スライド用カード：高さ100%で均一化 */
.cls-post-card--slide {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* サムネイル：固定高さでアスペクト統一 */
.cls-post-card--slide .cls-post-card__thumb-wrap {
  overflow: hidden;
  flex-shrink: 0;
  height: 150px;
}

.cls-post-card--slide .cls-post-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cls-post-card--slide:hover .cls-post-card__thumb {
  transform: scale(1.04);
}

/* ボディが残り高さを埋める → metaが常に下端へ */
.cls-post-card--slide .cls-post-card__body {
  flex: 1;
  justify-content: flex-start; /* space-between は使わない */
}

/* metaのみ margin-top:auto で下端に固定 */
.cls-post-card--slide .cls-post-card__meta {
  margin-top: auto;
}

/* タイトルは最大2行クランプ */
.cls-post-card--slide .cls-post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* 抜粋は最大3行 */
.cls-post-card--slide .cls-post-card__excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
/* ========== /トップページ 最新記事スライダー ========== */

/* ========== アクティビティ個別ページ: 前後ナビ & 同日投稿リスト ========== */
.cls-activity-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 1.5rem auto 0;
  padding: 3rem 0.5rem;
}

.cls-activity-nav__item {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.15s;
}

.cls-activity-nav__item:hover {
  border-color: var(--color-primary);
}

.cls-activity-nav__next {
  text-align: right;
  margin-left: auto;
}

.cls-activity-nav__label {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.cls-activity-nav__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}


.cls-same-day {
  max-width: 460px;
  margin: 2rem auto 0;
  padding: 0 0.5rem;
}

.cls-same-day__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

.cls-same-day__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cls-same-day__item a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.cls-same-day__item a:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cls-same-day__item .mav img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cls-same-day__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cls-same-day__author {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
}

.cls-same-day__item-title {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ========== /アクティビティ個別ページ: 前後ナビ & 同日投稿リスト ========== */

/* ========== ブロック中プロフィールの表示ブロック画面 ========== */
.cls-standalone-blocked {
  margin: 0;
}

/* 実データは一切含まない、装飾用のダミーレイアウト（ぼかして背景として使う） */
.cls-blocked-skeleton {
  max-width: 480px;
  margin: 0 auto;
  padding: 5rem 1.5rem 2rem;
  filter: blur(9px);
  user-select: none;
  pointer-events: none;
}

.cls-blocked-skeleton__header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.cls-blocked-skeleton__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-border-strong, #ccc);
  flex-shrink: 0;
}

.cls-blocked-skeleton__line {
  height: 1rem;
  border-radius: 0.5rem;
  background: var(--color-border-strong, #ccc);
}

.cls-blocked-skeleton__line--name {
  width: 40%;
}

.cls-blocked-skeleton__card {
  height: 180px;
  border-radius: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

.cls-blocked-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-base, #ebebeb) 55%, transparent);
}

.cls-blocked-overlay__card {
  max-width: 360px;
  width: 100%;
  background: var(--color-surface);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.cls-blocked-overlay__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

.cls-blocked-overlay__desc {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 1.75rem;
}

.cls-blocked-overlay__button {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 2rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.cls-blocked-overlay__button:hover {
  opacity: 0.88;
}
/* ========== /ブロック中プロフィールの表示ブロック画面 ========== */

/* ========== トップページ ポエム ========== */
.cls-front-poem {
  max-width: 420px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  text-align: center;
}

.cls-front-poem__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 1.75rem;
}

.cls-front-poem__body p {
  font-size: 0.9rem;
  line-height: 2;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

.cls-front-poem__body p:last-child {
  margin-bottom: 0;
  color: var(--color-text);
  font-weight: 600;
}
/* ========== /トップページ ポエム ========== */