body {
  background-color: #FDFDFD;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 8px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
  color: #333;
}

/* 月ナビゲーション */
.month-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 26px;
  margin-bottom: 4px;
  padding: 2px 0;
  line-height: 1;
}  /* ← この閉じカッコが必要 */


/* ≪ ≫ のボタン（誤タップ防止のため広め） */
.nav-btn {
  cursor: pointer;
  padding: 0 18px; /* ← 誤タップ防止のキモ */
  color: #6aa84f;  /* ← 2月や玉島ライオンズと同じ緑 */
  font-weight: bold;
  user-select: none;
}


/* 月（中央） */
.current-month {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 300;   /* ← boldやめて軽くする */
  letter-spacing: 0.18em;

  margin: 0 20px;
  color: #5E913B;
}


/* ▼ 年（左端）※タイトルとバランスを取る */
.year-text {
  font-family: "Playfair Display", serif;
  font-style: italic;

  font-size: 18px;         /* ←20px → 少し控えめに調整 */
  color: #5E913B;
  font-weight: 400;        /* ←bold削除（やさしい見た目に） */
  letter-spacing: 0.05em;  /* タイトルと統一 */
  
  display: inline-block;   /* transform用（今後の拡張にも対応） */
}


/* ▼ 月送りナビ（≪ 月 ≫ のライン） */
.month-nav {
  display: flex;
  justify-content: space-between; /* 左（≪）中央（月）右（≫） */
  align-items: center;
  position: relative;
}


/* ▼ 月表示（中央固定） */
.current-month {
  flex: 1;
  text-align: center;
  padding: 0 12px;
}


/* ▼ テーブル（カレンダー本体） */
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin: 0 auto;
}


/* 曜日ヘッダー（抜け感バージョン） */
th {
  border: none;                 /* ←枠消す */
  background: #E2EFDA;

  position: relative;           /* ←これ追加 */

  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 300;

  letter-spacing: 0.14em;       /* ←少し広げる */
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

/* 縦線（短め） */
th::before {
  content: "";
  position: absolute;
  top: 20%;           /* ←セルより少し短く */
  left: 0;
  width: 1px;
  height: 60%;        /* ←軽め */
  background: #D8D6D3;
}

/* 横線（影あり） */
th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #D8D6D3;

  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}


/* 日付セル */
/*
  ▼ 2026/02/10 修正①
     理由：スマホ画面でテーブルが横にはみ出し、
           右端に細い縦バーが出る問題を解消するため。
           padding の左右を 4px → 2px に縮小して横幅を収めた。


  ▼ 2026/02/10 修正②
     理由：PC 表示では height:110px が必須のため残す。
           しかしスマホでは高さが足りず、縦スクロールバーが出るため、
           スマホ幅のときだけ高さを auto にして自然な縦長にする。
*/
/* ▼ 2026/02/10 22:45 修正
   理由：td の中に td.sunday / td.holiday / td.saturday が入り込み、
         ここから下の CSS がすべて無効化されていたため。
         スマホ高さ・タイトル中央・色指定・ログイン位置など
         全 UI 崩れの原因になっていた。
*/


td {
  background-color: #FDFDFD;
  border: none;
  position: relative;

  padding: 4px 2px;
  vertical-align: top;
  height: 110px;
  font-size: 14px;
}

/* 縦（影） */
td::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 70%;

  background: transparent;
  box-shadow: -1px 0 0 rgba(0,0,0,0.08);
}

/* 横（実線で出す） */
td::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  background: #D8D6D3;  /* ←ここ重要（影じゃなく本体） */
} /* ← ★ 本来ここで閉じる必要があった */


/* 日曜・祝日（背景ピンク＋赤文字） */
td.sunday {
  background: #FFF3FF;
  color: red;
}
td.holiday {
  background: #FFF3FF;  /* 日曜と同じでもOK */
  color: red;
}

/* 土曜（背景水色＋青文字） */
td.saturday {
  background: #E6FDFE;
  color: blue;
}


.day-number {
  font-family: "Playfair Display", serif;
  font-style: italic;

  font-weight: 400;
  margin-top: -4px;        /* ← ここ追加 */
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 24px;
  letter-spacing: 0.05em;
}
/* 今日の日付 */
/* ------------------------------------------------------------
 【作業印_20260305】
 【修整理由】今日の日付セルをハイライト表示 (#FFFFD5)
 ------------------------------------------------------------*/
td.today {
  background: rgba(255,255,213,0.6) !important;
}


/* .event.memoEvent {
  margin-top: auto;
}*/

/* 共通イベント枠 */
.event {
  margin: 2px 0;
  padding: 2px 3px;
  font-size: 13px;
  cursor: pointer;
  word-break: break-all;
  font-weight: 500;
  border-radius: 6px;

  /* 1行に固定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


  /* カプセル型 */
  border-radius: 9999px;


  /* 中央揃え */
  text-align: center;
  
  /* 👇ここ追加 */
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 1px rgba(0,0,0,0.03);
}

/* =========================================================
   2026-05-09 一時停止
   getCategoryClass() による英語class運用時の名残CSS

   以前：
   div.className = "event " + getCategoryClass(ev.category);

   により、
   .event.rijikai / .event.goyakukai 等を使用していた。

   現在は日本語class運用へ戻したため：

   div.className = "event " + ev.category;

   に変更済み。

   そのため下記英語class CSS は現在未使用。
   業務連絡のmargin-top消失や
   カテゴリ色ズレ原因切り分けのため一旦停止。

========================================================= */

/*
.event.rijikai   { background: #E6EEF6; }
.event.reikai    { background: #F6E6E6; }
.event.goyakukai { background: #E6F3EC; }
.event.act       { background: #F5F1E4; }
.event.kaigi     { background: #EEE6F4; }
.event.taeve     { background: #E4F0EB; }
.event.sonota    { background: #F5E6EE; }
*/

/* 業務連絡・事務局休み 2026-05-09 */
/* 日本語classへ戻したため gyomurenraku / officeoff → 日本語へ修正 */
.event.業務連絡 {
  background: #D8D6D3;
  margin-top: 54px;
}

.event.事務局休み {
  background: #FFEBFC;
  color: #B22222;
  margin-top: 54px;
}

/* 直前に別イベントがある時だけ、下げ量を弱める0402 */
.event ~ .event.業務連絡,
.event ~ .event.事務局休み {
  margin-top: 30px;
}
/* ポップアップ外枠（透明） */
#popup {
  display: none;
  border-radius: 12px !important;
  position: fixed;
  top: 10% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;        /* ← スマホで自然に縮む */
  max-width: 380px !important;  /* ← 理想の幅 */
  padding: 0 !important;
  border: 2px solid #666 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
  background: transparent !important;
  z-index: 9999 !important;
}


/* 中身：白の半透明（90%）＋角丸 */
#popupContent {
  background: rgba(255,255,255,0.92) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  color: #111 !important;
  line-height: 1.6 !important;
  font-size: 19px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 閉じるボタン */
#loginClose, #popupClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* メモ欄の折り返し */
#popupContent .memo {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 480px) {
  #popup {
    top: 6% !important;
  }
  #popupContent {
    padding: 16px !important;
    font-size: 20px !important;
  }

  
}

/* ここからは @media の外に置くべき通常CSS（位置だけ修正） */
#popupClose {
  float: right;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  margin-top: -6px;
  padding: 6px;
}


#popup h3 {
  margin-top: 0;
  font-size: 18px;
}


    /* 新規予定入力フォーム（オーバーレイ） */
    #formOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;   /* ← グレー廃止 */
  display: none;
  z-index: 9998;
}
    #formBox {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.8);
      padding: 16px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      font-size: 14px;
    }
    #formBox h3 {
      margin-top: 0;
      font-size: 18px;
    }
    #formBox label {
      display: block;
      margin-top: 6px;
    }
    #formBox input, #formBox select, #formBox textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 4px;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.8);  /* ← ここだけ追加 */
    }
    #formButtons {
      text-align: right;
      margin-top: 8px;
    }
#formButtons button {
      margin-left: 6px;
      padding: 4px 10px;
      font-size: 14px;
}

/* ▼ 年・タイトル行（トグル配置の基準になる場所） */
.year-line {
  display: flex;
  justify-content: center;
  align-items: center;   /* 縦位置を中央に揃える */
  gap: 10px;
  margin: 2px 0;

  position: relative;    /* ←これが超重要
                           この中にあるトグルの位置の基準になる */
}


/* ▼ トグルスイッチ（帰るボタン） */
.world-toggle {
  position: absolute;
  right: 10px;
  top: 60%;
  transform: translateY(-50%);

  width: 40px;      /* ←横長に */
  height: 18px;     /* ←高さ低く */

  background: #b7c9a5;
  border-radius: 9999px;

  cursor: pointer;
}

/* 丸（小さくする） */
.world-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;

  width: 14px;     /* ←小さく */
  height: 14px;

  background: #fff;
  border-radius: 50%;
}

.calendar-title {
  color: #5E913B;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;

  letter-spacing: -0.02em;   /* ←ここだけ変更（詰める） */
}
/* スマホタイトル切替 0315*/
.sp-title{
  display:none;
}

@media (max-width:600px){

  .pc-title{
    display:none;
  }

  .sp-title{
    display:inline;
  }

  /* ▼ここ修正 */
  /* .year-line {
    flex-direction: column;
    align-items: center;
  } */

  .year-text {
    font-size: 14px;
  }

}

/* ▼▼▼ ログイン画面のCSSをここに追加 ▼▼▼ */
#loginOverlay {
  /*
    ▼ 2026/02/10 13:01 修正
       display: none !important; を削除
       理由：ログイン画面が JS で表示されなくなり、
             スマホ表示で謎の縦バーだけが残る原因になっていたため。
       備考：初期状態は display:none のままで問題ない。
  */
  display: none;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


#loginBox {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 280px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;


  /*
    ▼ 2026/02/10 13:01 追加
       内容：z-index: 10001;
       理由：スマホ表示で loginOverlay（黒背景）が前面に来てしまい、
             ログインボックスが背面に隠れて見えなくなる問題を解決。
       備考：背景より前に出すための調整。
  */
  z-index: 10001;
}


#loginBox label {
  display: block;
  margin-bottom: 10px;
  text-align: left;
}


#loginBox input {
  width: 100%;
  padding: 6px;
  margin-top: 4px;
  box-sizing: border-box;
}


#loginBtn {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
}
/* ▲▲▲ ログイン画面のCSSここまで ▲▲▲ */


/* ▼▼▼ カレンダー右下のログインリンク ▼▼▼ */
.login-link {
  /*
    ▼ 2026/02/10 13:01 修正
       position: fixed; を追加
       理由：右下固定が効かず、左下に飛んでしまう現象を修正。
  */
  

  position: fixed;
  bottom: 10px;
  right: 10px;

  z-index: 10; /* ←これ追加 */

  font-size: 12px;
  color: #6aa84f;
  cursor: pointer;
  padding: 3px 6px;
  user-select: none;
}
/* ▲▲▲ カレンダー右下のログインリンクここまで ▲▲▲ */


/* ▼▼▼ スマホ専用カレンダー調整 ▼▼▼ */
@media (max-width: 600px) {


  /* ▼ 2026/02/10 15:58 再修正
     理由：下記の修正（padding:2px 6px / vertical-align / height:auto）が
           タイトル位置・色、ログイン位置・色、✕表示など
           他UIを巻き込んでレイアウト崩れを起こしたため、
           13:58 時点の正常状態（padding:6px のみ）に戻す。
  */

  /* ▼ あなたが貼った元の修正ブロック（そのまま残す） ▼
     ▼ 2026/02/10 15:00 修正
         理由：スマホで日付セルが縦に詰まりすぎていたため、
               padding:6px を上下2px・左右6pxに変更し、高さだけを調整。
               既存のフォント指定や他UIには触らない。
  */
  /*
  td {
    padding: 2px 6px;
    font-size: 16px;
    vertical-align: top;
    height: auto !important;
  }
  */

  /* ▼ 2026/02/10 15:05 修正
     理由：あとから勝手に追加してしまった
           .day-number と .event のセレクタを完全削除。
           不要な定義を残さず、元の構造だけを維持するため。
  */

  /* ▼ 2026/02/10 20:35 スマホ崩れ対策
     理由：PC側の td padding がスマホに適用され、
           高さ・位置・色など複数の崩れを引き起こしていたため、
           スマホ時のみ td の padding を無効化して連鎖崩れを止める。
  */
  td {
    padding: 0;
  }

}
/* ▲▲▲ スマホ専用カレンダー調整ここまで ▲▲▲ */


/* ▼▼▼ 閲覧者ポップアップ：最終上書き ▼▼▼ */
#popupContent .infoText {
  font-size: 20px !important;
  line-height: 1.6 !important;
}


#popupContent .memoText {
  font-size: 20px !important;
  line-height: 1.6 !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ここに追加👇0425 */

body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 999;
}

/* 数字だけ */
.day-number {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.05em;
}

/* 月 */
.current-month {
  font-family: "Playfair Display", serif;
  font-style: italic;
  letter-spacing: 0.1em;
}

/* ▲▲▲ 閲覧者ポップアップ：最終上書き ▲▲▲ */

/* カテゴリ別カラー（イベントバー＋ポップアップ共通） */
.event.理事会,
.memoHeader.理事会 { background:#D4DEE8; color:#2F3A40; }

.event.例会,
.memoHeader.例会 { background:#E8D4D4; color:#3A2F2F; }

.event.五役会,
.memoHeader.五役会 { background:#D4E6DD; color:#2F3A33; }

.event.アクト,
.memoHeader.アクト { background:#E0D6CB; color:#3A332F; }

.event.会議,
.memoHeader.会議 { background:#DCD6E8; color:#322F3A; }

.event.委員会,
.memoHeader.委員会 { background:#E4DEC9; color:#3A372F; }

.event.他イベント,
.memoHeader.他イベント { background:#D4E0E8; color:#2F3A40; }

.event.その他,
.memoHeader.その他 { background:#E8D4DF; color:#3A2F35; }

.event.業務連絡,
.memoHeader.業務連絡 { background:#C7C3BD; color:#2F2F2F; }

.event.事務局休み,
.memoHeader.事務局休み { background:#FFEBFC; color:#B22222; }