@charset 'utf-8';
/*---------------------------
 フォームエラー関連
---------------------------*/
* {
	box-sizing: border-box;
}
.error-border {
    border: 2px solid #e43f24;
}
div[class^=err_].error-visible {
    display: block;
    color: #e43f24;
    font-size: .9em;
    margin-top: 4px;
    font-weight: 600;
}
/* ===========================
   ARM 固定ページ共通スタイル
   （参加フォーム / 参加状況など）
   =========================== */

/* カラートークン（ヘッダー未読込でも動くようにフォールバック付き） */
:root{
  --arm-bg: var(--arm-bg, #ffffff);
  --arm-fg: var(--arm-fg, #0f172a);
  --arm-muted: var(--arm-muted, #64748b);
  --arm-border: var(--arm-border, #e2e8f0);
  --arm-primary: var(--arm-primary, #2563eb);
  --arm-primary-ghost: var(--arm-primary-ghost, rgba(37,99,235,.08));
  --arm-card: var(--arm-card, #ffffff);
}

/* レイアウトの余白と見出し */
#primary.content-area{
  padding: clamp(16px, 3vw, 28px);
}
.entry-header{
  margin: 8px 0 20px;
}
.entry-title{
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--arm-fg);
  margin: 0;
}

/* パンくず（> 区切りでミニマルに） */
#breadcrumb{
  border-bottom: 1px solid var(--arm-border);
  margin-bottom: 18px;
}
#breadcrumb .cont{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  list-style: none; margin: 0;
  color: var(--arm-muted);
  font-size: 13px;
}
#breadcrumb .cont li{display:flex; align-items:center; gap:8px;}
#breadcrumb .cont li + li::before{
  content: "›";
  opacity: .6;
}
#breadcrumb a{
  color: var(--arm-muted);
  text-decoration: none;
}
#breadcrumb a:hover{ color: var(--arm-fg); }

/* 記事カードのベース（影と角丸で“今っぽく”） */
article.type-page .entry-content{
  background: var(--arm-card);
  border: 1px solid var(--arm-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(16px, 3vw, 28px);
}

/* ========== 参加フォーム ========== */
.arm-rsvp-form{
  max-width: 720px;
  margin: 0 auto;
}
.arm-rsvp-form h3{
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 18px;
  color: var(--arm-fg);
  font-weight: 700;
}

/* フォームの行レイアウト */
.arm-rsvp-form form{
  display: grid;
  gap: 16px;
}
.arm-rsvp-form p{ margin: 0; }

/* ラベル */
.arm-rsvp-form label{
  font-weight: 600;
  color: var(--arm-fg);
}

/* テキスト・パスワード・セレクト・テキストエリア */
.arm-rsvp-form input[type="text"],
.arm-rsvp-form input[type="password"],
.arm-rsvp-form select,
.arm-rsvp-form textarea{
  margin-top: 6px;
  width: 100%;
  border: 1px solid var(--arm-border);
  border-radius: 12px;
  background: #fff;
  color: var(--arm-fg);
  padding: 12px 14px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
}
.arm-rsvp-form textarea{ min-height: 96px; resize: vertical; }

/* フォーカス（青いリング） */
.arm-rsvp-form input:focus,
.arm-rsvp-form select:focus,
.arm-rsvp-form textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--arm-primary), #000 0%);
  box-shadow: 0 0 0 4px var(--arm-primary-ghost);
}

/* ラジオボタン（アクセントカラー） */
.arm-rsvp-form input[type="radio"]{
  accent-color: var(--arm-primary);
  transform: translateY(1px);
}
.arm-rsvp-form [name="status"] + span{ font-weight: 600; } /* 余白調整用の保険 */

/* ラジオラベルを並べて間隔を広く */
.arm-rsvp-form label input[type="radio"]{
  margin-right: 6px;
}
.arm-rsvp-form p:nth-of-type(3){
  display: flex; flex-wrap: wrap; gap: 10px 16px;
}

/* 送信ボタン（ふわっと浮く） */
.arm-rsvp-form button[type="submit"]{
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--arm-primary), #000 0%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--arm-primary) 92%, #fff 8%), color-mix(in oklab, var(--arm-primary) 86%, #000 14%));
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: 0 12px 24px rgba(37,99,235,.22), 0 1px 0 rgba(255,255,255,.4) inset;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.arm-rsvp-form button[type="submit"]:hover{
  filter: saturate(115%);
  box-shadow: 0 14px 28px rgba(37,99,235,.26), 0 1px 0 rgba(255,255,255,.4) inset;
}
.arm-rsvp-form button[type="submit"]:active{
  transform: translateY(1px);
}

/* 入力検証（HTMLの:invalidを活用：軽く赤枠） */
.arm-rsvp-form input:invalid,
.arm-rsvp-form select:invalid{
  border-color: #fca5a5; /* red-300 */
}
.arm-rsvp-form input:invalid:focus,
.arm-rsvp-form select:invalid:focus{
  box-shadow: 0 0 0 4px rgba(248,113,113,.18); /* red-400 ghost */
}

/* ========== レスポンシブ & 細かな調整 ========== */
@media (max-width: 640px){
  article.type-page .entry-content{
    padding: 16px;
    border-radius: 14px;
  }
  .arm-rsvp-form p:nth-of-type(3){
    gap: 8px 12px;
  }
}

/* ===========================
   ARM カレンダーページ用スタイル
   （HTMLはそのままでOK）
   =========================== */

/* 色トークン（ヘッダーが未読込でも動くようフォールバック） */
:root{
  --arm-fg: #0f172a;        /* 文字 */
  --arm-muted: #64748b;     /* 薄い文字 */
  --arm-border: #e2e8f0;    /* 枠線 */
  --arm-primary: #2563eb;   /* アクセント */
  --arm-ghost: rgba(37,99,235,.08);
  --arm-bg: #fff;
}

/* ページ全体の余白 */
#primary.content-area{ padding: clamp(16px,3vw,28px); }
.entry-title{ font-weight:800; letter-spacing:.01em; }

/* ===== パンくず（軽量・今っぽく） ===== */
#breadcrumb{ border-bottom: 1px solid var(--arm-border); margin-bottom: 18px; }
#breadcrumb .cont{
  display:flex; gap:8px; padding:8px 0; list-style:none; margin:0; color:var(--arm-muted); font-size:13px;
}
#breadcrumb .cont li{ display:flex; align-items:center; gap:8px; }
#breadcrumb .cont li + li::before{ content:"›"; opacity:.6; }

/* ===== カレンダー枠 ===== */
.arm-calendar{
  background: var(--arm-bg);
  border: 1px solid var(--arm-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(14px,2.4vw,20px);
  overflow: hidden; /* 角丸に沿わせる */
}

/* 見出し（年月） */
.arm-calendar > h3{
  margin: 0 0 12px;
  font-size: clamp(18px,2.2vw,22px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--arm-fg);
  display: flex; align-items: center; justify-content: center;
}

/* ===== テーブルの土台をリセット ===== */
.arm-calendar table{
  width: 100%;
  border-collapse: separate;      /* 角丸に沿わせつつ */
  border-spacing: 0;
  background: #fff;
  /* スマホで横スクロールに切り替える（可読性優先） */
  min-width: 760px;               /* 1セルの幅を確保 */
}
.arm-calendar{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ヘッダ行（曜日） */
.arm-calendar thead th{
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  color: var(--arm-muted);
  font-weight: 700;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 10px 0;
  border-bottom: 1px solid var(--arm-border);
}

/* 日曜・土曜の色 */
.arm-calendar thead th:nth-child(1),
.arm-calendar tbody td:nth-child(1) > div:first-child{ color:#ef4444; } /* 日 */
.arm-calendar thead th:nth-child(7),
.arm-calendar tbody td:nth-child(7) > div:first-child{ color:#3b82f6; } /* 土 */

/* セル */
.arm-calendar tbody td{
  width: 14.2857%;
  vertical-align: top !important;
  border-right: 1px solid var(--arm-border);
  border-bottom: 1px solid var(--arm-border);
  padding: 10px 10px 12px;
  background: #fff;
}
.arm-calendar tbody tr:last-child td{ border-bottom: 0; }
.arm-calendar tbody td:last-child{ border-right: 0; }

/* 日付番号（既存の <div style="font-weight:bold"> を活かして装飾） */
.arm-calendar tbody td > div:first-child{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 10px;
  background: #f1f5f9;  /* slate-100 */
  color: inherit;
  font-weight: 800 !important;
  font-size: 13px;
  margin-bottom: 8px;
}

/* 予定リスト */
.arm-calendar ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}

/* 1件の行（時間 + ボタン） */
.arm-calendar li{
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--arm-fg);
}

/* 時刻を強調（リストの先頭テキストが時刻） */
.arm-calendar li{ font-variant-numeric: tabular-nums; font-weight: 700; }

/* 参加状況ボタンを“チップ”風に */
.arm-calendar li a{
  margin-left: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--arm-ghost);
  color: var(--arm-primary);
  border: 1px solid color-mix(in oklab, var(--arm-primary) 28%, transparent);
  text-decoration: none;
  font-weight: 700;
  transition: .15s ease;
}
.arm-calendar li a:hover{
  filter: saturate(115%);
  box-shadow: 0 2px 10px rgba(37,99,235,.16);
}

/* 予定が多いセルにも読みやすい行間を */
.arm-calendar li + li{ margin-top: 0; }

/* ===== “今日”ハイライト（JSで .is-today を付与した場合の見た目） ===== */
.arm-calendar td.is-today{
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 0 0 2px var(--arm-ghost);
}

/* ===== PC / スマホの最終調整 ===== */
@media (min-width: 841px){
  /* PC：表全幅で固定。角丸を強めに見せる */
  .arm-calendar{ padding: 18px 18px 20px; }
}
@media (max-width: 840px){
  /* SP：ヘッダは上に固定、横スクロールを示唆する */
  .arm-calendar{ border-radius: 14px; }
  .arm-calendar::after{
    content:"左右に動かせます"; position: sticky; left: calc(100% - 110px); bottom: 6px;
    font-size: 11px; color: var(--arm-muted); background: #fff9;
    backdrop-filter: blur(6px); padding: 2px 8px; border-radius: 999px;
  }
  /* セルの余白を少し詰める */
  .arm-calendar tbody td{ padding: 8px 8px 10px; }
  .arm-calendar tbody td > div:first-child{ margin-bottom: 6px; }
  .arm-calendar li{ font-size: 13px; }
  .arm-calendar li a{ padding: 5px 8px; border-radius: 9px; }
}

/* ===========================
   ARM メンバー別 一括編集ページ用
   =========================== */

/* カラートークン（ヘッダーCSSが無くても動くようにフォールバック） */
:root{
  --arm-fg: #0f172a;        /* 文字 */
  --arm-muted: #64748b;     /* 補助文字 */
  --arm-border: #e2e8f0;    /* 枠線 */
  --arm-primary: #2563eb;   /* アクセント */
  --arm-ghost: rgba(37,99,235,.08);
  --arm-card: #ffffff;      /* カード背景 */
}

/* ページ余白と見出し調整 */
#primary.content-area{ padding: clamp(16px,3vw,28px); }
.entry-title{ font-weight: 800; letter-spacing:.01em; }

/* パンくず（軽量） */
#breadcrumb{ border-bottom: 1px solid var(--arm-border); margin-bottom: 18px; }
#breadcrumb .cont{
  display:flex; gap:8px; padding:8px 0; list-style:none; margin:0;
  color: var(--arm-muted); font-size:13px;
}
#breadcrumb .cont li{ display:flex; align-items:center; gap:8px; }
#breadcrumb .cont li + li::before{ content:"›"; opacity:.6; }

/* 記事カード風レイアウト */
article.type-page .entry-content{
  background: var(--arm-card);
  border: 1px solid var(--arm-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(16px, 3vw, 24px);
}

/* ===========================
   一括編集セクション
   =========================== */
.arm-member-schedule{ max-width: 1100px; margin: 0 auto; }
.arm-member-schedule h3{
  font-size: clamp(18px,2.2vw,22px);
  font-weight: 800; letter-spacing:.02em; margin: 0 0 14px;
}

/* 名前選択フォーム（上部のセレクタ＋ボタンを横並び→折返し対応） */
.arm-member-schedule form[method="get"] p{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.arm-member-schedule select,
.arm-member-schedule button[type="submit"]{
  appearance:none;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--arm-border);
  background: #fff;
  padding: 0 14px;
  font-weight: 600;
  color: var(--arm-fg);
}
.arm-member-schedule button[type="submit"]{
  border: 1px solid color-mix(in oklab, var(--arm-primary) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--arm-primary) 92%, #fff 8%), color-mix(in oklab, var(--arm-primary) 86%, #000 14%));
  color: #fff; cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.4) inset;
}
.arm-member-schedule button[type="submit"]:hover{ filter: saturate(112%); }
.arm-member-schedule button[type="submit"]:active{ transform: translateY(1px); }

/* PIN入力フィールド（1回入力） */
#arm-pin-once{
  margin-top: 6px;
  width: 260px;
  border: 1px solid var(--arm-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff; color: var(--arm-fg);
  font-size: 15px;
}
.arm-member-schedule > p > label{ font-weight: 700; color: var(--arm-fg); }

/* ===========================
   テーブル（widefat）を“今っぽく”
   =========================== */
.arm-member-schedule table{
  width: 100%;
  border: 1px solid var(--arm-border);
  border-radius: 14px;
  overflow: hidden;            /* 角丸に沿わせる */
  border-collapse: separate;   /* WP標準を上書き */
  border-spacing: 0;
  background: #fff;
  box-shadow: 0 8px 28px rgba(2,6,23,.06);
}
.arm-member-schedule thead th{
  background: #f8fafc;
  color: var(--arm-muted);
  font-weight: 700; font-size: 13px; letter-spacing:.04em;
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--arm-border);
  z-index: 1;
}
.arm-member-schedule tbody td{
  vertical-align: top;
  padding: 12px 14px;
  border-top: 1px solid var(--arm-border);
}
.arm-member-schedule tbody tr:first-child td{ border-top: 0; }

/* 日時セルを強調（最初の列） */
.arm-member-schedule tbody td:first-child{
  font-weight: 800; color: var(--arm-fg);
  white-space: nowrap;
}

/* 操作セルの中のフォームを整理 */
.arm-row-form{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}

/* ラジオボタン群を“ピル”風に */
.arm-row-form > label{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid var(--arm-border);
  background: #fff;
  cursor: pointer; user-select: none;
  transition: .15s ease;
  font-weight: 700; color: var(--arm-fg);
}
.arm-row-form > label:hover{ background: #f8fafc; }
/* 選択中を強調（:has は主要ブラウザ対応。未対応でも劣化表示でOK） */
.arm-row-form > label:has(input[type="radio"]:checked){
  background: var(--arm-ghost);
  border-color: color-mix(in oklab, var(--arm-primary) 30%, transparent);
  color: var(--arm-primary);
}
.arm-row-form input[type="radio"]{ accent-color: var(--arm-primary); }

/* メモ入力を伸縮＆見やすく（inline style を上書き） */
.arm-row-form input[name="memo"]{
  width: min(520px, 100%) !important;
  flex: 1 1 300px;
  border: 1px solid var(--arm-border);
  border-radius: 12px; padding: 10px 12px;
  background: #fff; color: var(--arm-fg);
}
.arm-row-form input[name="memo"]::placeholder{ color: var(--arm-muted); }

/* 変更ボタン（主ボタン） */
.arm-row-form button[type="submit"]{
  height: 40px; padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--arm-primary) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--arm-primary) 92%, #fff 8%), color-mix(in oklab, var(--arm-primary) 86%, #000 14%));
  color: #fff; font-weight: 800; letter-spacing:.02em;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.4) inset;
}
.arm-row-form button[type="submit"]:hover{ filter: saturate(112%); }
.arm-row-form button[type="submit"]:active{ transform: translateY(1px); }

/* 行ホバーで行全体をうっすら浮かす */
.arm-member-schedule tbody tr:hover td{
  background: #fcfdff;
}

/* ===========================
   スマホ最適化（カード分割）
   =========================== */
@media (max-width: 840px){
  /* テーブル→各行をカード化。theadは非表示 */
  .arm-member-schedule thead{ display: none; }
  .arm-member-schedule table{
    border: none; border-radius: 0; box-shadow: none;
  }
  .arm-member-schedule tbody{ display: grid; gap: 12px; }
  .arm-member-schedule tbody tr{
    display: block;
    background: #fff;
    border: 1px solid var(--arm-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
    padding: 12px;
  }
  .arm-member-schedule tbody td{
    display: block; border: 0; padding: 0;
  }
  .arm-member-schedule tbody td + td{ margin-top: 10px; }
  .arm-member-schedule tbody td:first-child{
    margin-bottom: 8px;
    font-size: 15px;
  }
  /* 操作フォームの並びを縦中心に整理 */
  .arm-row-form{
    gap: 10px; align-items: stretch;
  }
  .arm-row-form > label{ padding: 8px 10px; }
  .arm-row-form input[name="memo"]{ flex-basis: 100%; }
  .arm-row-form button[type="submit"]{ width: 100%; }
}

/* さらに小さい端末での微調整 */
@media (max-width: 420px){
  .arm-member-schedule form[method="get"] p{ gap: 8px; }
  #arm-pin-once{ width: 100%; }
}
/* ===========================
   ARM イベント参加状況ページ用
   =========================== */

/* 色のトークン（ヘッダー未読込でも動くフォールバック） */
:root{
  --arm-fg: #0f172a;
  --arm-muted: #64748b;
  --arm-border: #e2e8f0;
  --arm-primary: #2563eb;
  --arm-ghost: rgba(37,99,235,.08);
  --arm-card: #ffffff;

  --arm-yes: #16a34a;   /* 参加 */
  --arm-no: #ef4444;    /* 不参加 */
  --arm-maybe: #f59e0b; /* 未定 */
  --arm-none: #94a3b8;  /* 未入力 */
}

/* ページ余白・見出し・パンくず（共通） */
#primary.content-area{ padding: clamp(16px,3vw,28px); }
.entry-title{ font-weight: 800; letter-spacing:.01em; }

#breadcrumb{ border-bottom: 1px solid var(--arm-border); margin-bottom: 18px; }
#breadcrumb .cont{
  display:flex; gap:8px; padding:8px 0; list-style:none; margin:0; color:var(--arm-muted); font-size:13px;
}
#breadcrumb .cont li{ display:flex; align-items:center; gap:8px; }
#breadcrumb .cont li + li::before{ content:"›"; opacity:.6; }

/* カード枠 */
article.type-page .entry-content{
  background: var(--arm-card);
  border: 1px solid var(--arm-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(16px, 3vw, 24px);
}

/* 見出し（イベント日時） */
.arm-event-status h3{
  margin: 0 0 12px;
  font-size: clamp(18px,2.2vw,22px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--arm-fg);
}

/* ===== 各セクション（参加/不参加/未定/未入力） ===== */
/* h4 と 直後の ul を“ひとかたまり”としてカード風に */
.arm-event-status h4{
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--arm-fg);
}
.arm-event-status h4 + ul{
  list-style: none; margin: 0; padding: 12px;
  border: 1px solid var(--arm-border);
  border-radius: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 8px 10px;
}

/* セクションごとの色味（1:参加 2:不参加 3:未定 4:未入力） */
.arm-event-status h4:nth-of-type(1){ color: var(--arm-yes); }
.arm-event-status h4:nth-of-type(1) + ul{
  border-color: color-mix(in oklab, var(--arm-yes) 28%, var(--arm-border));
  background: color-mix(in oklab, var(--arm-yes) 5%, #fff);
}
.arm-event-status h4:nth-of-type(2){ color: var(--arm-no); }
.arm-event-status h4:nth-of-type(2) + ul{
  border-color: color-mix(in oklab, var(--arm-no) 28%, var(--arm-border));
  background: color-mix(in oklab, var(--arm-no) 5%, #fff);
}
.arm-event-status h4:nth-of-type(3){ color: var(--arm-maybe); }
.arm-event-status h4:nth-of-type(3) + ul{
  border-color: color-mix(in oklab, var(--arm-maybe) 28%, var(--arm-border));
  background: color-mix(in oklab, var(--arm-maybe) 6%, #fff);
}
.arm-event-status h4:nth-of-type(4){ color: var(--arm-none); }
.arm-event-status h4:nth-of-type(4) + ul{
  border-color: color-mix(in oklab, var(--arm-none) 26%, var(--arm-border));
  background: color-mix(in oklab, var(--arm-none) 6%, #fff);
}

/* 中身が空のリストには“まだいません”のプレースホルダー（:has で検出） */
.arm-event-status ul:not(:has(li))::before{
  content: "— まだいません";
  display: block; color: var(--arm-muted);
}

/* メンバー名を“チップ”UIに（メモが付いても崩れない） */
.arm-event-status li{
  display: inline-flex; align-items: center;
	justify-content: center;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--arm-border);
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
  font-weight: 700; color: var(--arm-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 末尾に（メモ）が付く場合、読みやすくなるようやや淡く */
.arm-event-status li{ font-variant-numeric: tabular-nums; }
.arm-event-status li::after{
  /* ここはCSSではメモ本文を直接触れないので装飾のみ（実メモはサーバー出力） */
}

/* CTAボタン（リンクA） */
.arm-event-status p > a{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--arm-primary) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--arm-primary) 92%, #fff 8%), color-mix(in oklab, var(--arm-primary) 86%, #000 14%));
  color: #fff !important; text-decoration: none;
  font-weight: 800; letter-spacing:.02em;
  box-shadow: 0 10px 22px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.4) inset;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.arm-event-status p > a:hover{ filter: saturate(112%); }
.arm-event-status p > a:active{ transform: translateY(1px); }

/* スマホ最適化 */
@media (max-width: 640px){
  .arm-event-status h4 + ul{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 10px;
  }
  .arm-event-status li{ padding: 8px 10px; }
}
.arm-alert-cancel{
  border:1px solid #fecaca; background:#fef2f2; color:#991b1b;
  padding:12px 14px; border-radius:12px; font-weight:700;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
}
.arm-tag-cancel{
  display:inline-flex; align-items:center; padding:4px 8px;
  border-radius:999px; background:#fee2e2; color:#b91c1c;
  border:1px solid #fecaca; font-weight:800; font-size:12px;
  margin-left:6px;
}
.arm-time-cancelled{ text-decoration: line-through; opacity:.7; font-weight:700; }

	.arm-calendar ul li:not(:last-of-type) {
		padding-bottom: 10px;
		border-bottom: 1px solid #DDD;
	}
@media screen and (max-width:767px) {
	.arm-calendar ul {
		padding-left: 0 !important;
	}	
	.arm-calendar ul li {
		display: block!important;
	}
	.arm-calendar ul li a {
		margin-left: 0!important;
		display: block !important;
		text-align: center;
	}
}
/* 月ナビのボタン */
.arm-cal-btn{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #e5e7eb; background:#f9fafb; color:#111827;
  text-decoration:none; font-weight:700; font-size:13px;
}
.arm-cal-btn:hover{ filter:brightness(0.96); }

/* あなたが追加したSP調整はそのままでOK（再掲） */
.arm-calendar ul li:not(:last-of-type){
  padding-bottom:10px; border-bottom:1px solid #DDD;
}
@media screen and (max-width:767px){
  .arm-calendar ul{ padding-left:0 !important; }
  .arm-calendar ul li{ display:block !important; }
  .arm-calendar ul li a{ margin-left:0 !important; }
}
/* 参加状況の行：名前チップ＋メモ */
.arm-event-status .arm-status-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:8px 0;
  background: rgba(16,185,129,.06);  /* セクション背景に馴染む薄色 */
  border:1px solid rgba(16,185,129,.25);
  border-radius:12px;
}
.arm-event-status h4 + ul .arm-status-item{ background:#f6f7f9; border-color:#e5e7eb; } /* ベース */

/* 名前は必ず見える“ pill ”に */
.arm-name-chip{
  flex:0 0 auto;
  padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid #e5e7eb;
  font-weight:800; color:#111827; white-space:nowrap;
}

/* メモは横に伸び、長ければ折返し or 省略 */
.arm-memo{
  flex:1 1 auto; min-width:0;
  color:#374151; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}

/* スマホはメモを“2行まで”表示して視認性UP（必要なら1行に） */
@media (max-width: 767px){
  .arm-memo{
    white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
}

/* デスクトップ：横並びでOK。名前は縮めない、メモは省略可 */
.arm-event-status .arm-status-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:8px 0;
  background:#f6f7f9; border:1px solid #e5e7eb; border-radius:12px;
}
.arm-event-status .arm-name-chip{
  flex:0 0 auto;                 /* ← 縮ませない */
  padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid #e5e7eb;
  font-weight:800; color:#111827; white-space:nowrap;
}
.arm-event-status .arm-memo{
  flex:1 1 auto; min-width:0;    /* ← メモ側が縮む */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#374151; line-height:1.5;
}

/* スマホ：縦積みにして名前を必ず全表示。メモは2～3行で折返し */
@media (max-width: 767px){
  .arm-event-status .arm-status-item{ display:block; }
  .arm-event-status .arm-name-chip{
    display:inline-block; max-width:100%;
    white-space:normal;                /* ← 折返し可（長い名字も安心） */
  }
  .arm-event-status .arm-memo{
    display:block; margin-top:6px;
    white-space:normal;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; /* 3行まで */
    overflow:hidden;
  }
}
/* 備考・メモのボックス */
.arm-event-note{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0 16px;
}
.arm-event-note__title{
  display:inline-block;
  font-weight:800;
  color:#0f172a;
  margin-bottom:6px;
}
.arm-event-note__body{
  white-space:pre-wrap;       /* 念のため */
  line-height:1.7;
  color:#111827;
}

/* 全域 end */
/*===========================================
 以下、メディアクエリ
===========================================*/
/*===========================
 【1024px以下】
 ★タブレット横以下に適用されるCSS
===========================*/
@media screen and (max-width:1024px){
	/* 1024down end */
}
/*===========================
【1023px以下】
 ★PC未満に適用されるCSS
===========================*/
@media screen and (max-width:1023px){
	/* 1023down end */
}
/*===========================
【800px以下】
★タブレット以下に適用されるCSS
===========================*/
@media screen and (max-width:800px){
	/* 800down end */
}
/*===========================
【767px以下】
★タブレット未満に適用されるCSS
===========================*/
@media screen and (max-width:767px){
	/* 767down end */
}
/*===========================
 【666px以下】
 ★iPhone6以降の横未満に適用されるCSS
===========================*/
@media screen and (max-width:666px) {
	/* 666down end */
}
/*===========================
 【567px以下】
★iPhone5横未満まで適用されるCSS
===========================*/
@media screen and (max-width:567px){
	/* 567down end */
}
/*===========================
 【414px以下】
★iPhone6PLUS縦まで適用されるCSS
===========================*/
@media screen and (max-width:414px){
	/* 414down end */
}
/*===========================
 【375px以下】
★iPhone6,7縦まで適用されるCSS
===========================*/
@media screen and (max-width:375px){
	/* 375down end */
}
/*===========================
 【360px以下】
 ★Xperia AX SO-01E以下に適用されるCSS
===========================*/
@media screen and (max-width:360px){
	/* 360down end */
}
/*===========================
 【359px以下】
 ★iphone初期にのみ適用されるCSS
===========================*/
@media screen and (max-width:359px){
	/* 359down end */
}
/*===========================
 【568px以上】
 ★iPhone5横以上から表示されるCSS
===========================*/
@media screen and (min-width:568px) {
	/* 568over end */
}
/*===========================
 【667px以上】
 ★iPhone6以降の横以上に適用されるCSS
===========================*/
@media screen and (min-width:667px){
	/* 667over end */
}
/*===========================
【768px以上】 
★タブレット(最小)以上に適用されるCSS
===========================*/
@media screen and (min-width:768px){
	/* 768over end */
}
/*===========================
【801px以上】 
★タブレット縦(最大)より大きい場合に適用されるCSS
===========================*/
@media screen and (min-width:801px){
	/* 801over end */
}
/*===========================
【667px】～【800px】  
★iPhone6以降の横以上かつ、タブレット縦以下まで表示されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:800px){
	/* 667~800 end */
}
/*===========================
 【667px】～【1023px】
 ★iphone6横～PC未満まで適用されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:1023px){
	/* 667~1023 over end */
}
/*===========================
 【415px】～【800px】 
 ★スマホ縦より大、かつ、タブレット以下まで表示されるCSS
===========================*/
@media screen and (min-width:415px) and (max-width:800px){
	/* 415~800 end */
}
/*===========================
 【768px】～【1023px】 
 ★タブレット以上、かつ、PC以下に適用されるCSS
===========================*/
@media screen and (min-width:768px) and (max-width:1023px){
	/* 768~1023 end */
}
/*===========================
 【1024px以上】
 ★PC以上に適用されるCSS
===========================*/
@media screen and (min-width:1024px){
	/* 1024over end */
}
/*===========================
 【1280px以上】
 ★PC(1280px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1280px){
	/* 1280over end */
}
/*===========================
 【1400px以上】
 ★PC(1400px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1400px){
	/* 1400over end */
}