@charset "utf-8";

/* ============================================================
   22kurita_v2.css
   ------------------------------------------------------------
   style.css / 22kurita.css には一切手を入れず、その「追加分」だけを
   ここに置く。読み込み順は
       style.css  →  22kurita.css  →  22kurita_v2.css
   セレクタはすべて新規クラス (.collapse-*) に限定してあるので、
   研究室共通の style.css の見た目には影響しない。

   ------------------------------------------------------------
   【機能】長いリストを「最新5件だけ表示 → クリックで全件展開」にする。
   リストは 1 本のまま。6件目以降を CSS が自動的に隠すので、
   更新時は <ul> の先頭に <li> を1行足すだけでよい（仕分け作業は不要）。

   HTML 側の書き方:
     <input type="checkbox" id="more-talks" class="collapse-toggle">
     <ul class="square-style collapse-5">
       ... 新しい順に全件 ...
     </ul>
     <label for="more-talks" class="collapse-label">
       <span class="collapse-open">▼ 過去の発表をすべて表示</span>
       <span class="collapse-close">▲ 最新5件のみ表示 (全 <span class="collapse-total"></span> 件)</span>
     </label>

   ※ input は必ず ul と label より前に置くこと (CSS の ~ 結合子のため)。
   ※ id は 1 ページ内で一意にすること (他の節にも使うなら別 id)。
   ※ 表示件数を変えたいときは下の :nth-child(n+6) の数字だけ変える。
      最新3件なら n+4、最新10件なら n+11。
   ※ JavaScript 不使用。CSS が読まれない環境では全件がそのまま並ぶ。
   ============================================================ */


/* --- トグル用チェックボックス: 画面には出さないがフォーカスは当たる --- */
.collapse-toggle{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
border:0;
overflow:hidden;
white-space:nowrap;
clip:rect(0 0 0 0);
clip-path:inset(50%);
}


/* --- 6件目以降を隠す (既定の折りたたみ状態) --- */
.mygrid ul.collapse-5 > li:nth-child(n+6),
.grid   ul.collapse-5 > li:nth-child(n+6){display:none;}

/* --- チェックが入ったら全件表示 --- */
.collapse-toggle:checked ~ ul.collapse-5 > li:nth-child(n+6){display:list-item;}


/* --- 開閉ボタン (label) --- */
.mygrid label.collapse-label,
.grid   label.collapse-label{
display:block;
margin:5px 10px 0;
padding:5px 8px;
cursor:pointer;
font-size:12px;
line-height:1.5;
text-align:center;
color:#656565;
background:#f7f7f7;
border:1px solid #ebebeb;
border-radius:3px;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}

.mygrid label.collapse-label:hover,
.grid   label.collapse-label:hover{
color:#1c1c1c;
background:#eeeeee;
}

/* キーボード操作時にどこにいるか分かるように */
.collapse-toggle:focus-visible ~ label.collapse-label{
outline:2px solid #999999;
outline-offset:2px;
}


/* --- 開/閉でラベルの文言を差し替える --- */
.collapse-label .collapse-close{display:none;}
.collapse-toggle:checked ~ label.collapse-label .collapse-open{display:none;}
.collapse-toggle:checked ~ label.collapse-label .collapse-close{display:inline;}


/* --- 全件数を CSS カウンタで自動表示 (手で件数を書かなくてよい) ---
   display:none の要素はカウンタを増やさないため、この数値は
   「展開中 (= 全件表示中)」のラベルでのみ使うこと。 */
.mygrid ul.collapse-5,
.grid   ul.collapse-5{counter-reset:collapse-total;}

.mygrid ul.collapse-5 > li,
.grid   ul.collapse-5 > li{counter-increment:collapse-total;}

.collapse-label .collapse-total::after{content:counter(collapse-total);}


/* --- 印刷時は常に全件を出す (ボタンは隠す) --- */
@media print{
	.mygrid label.collapse-label,
	.grid   label.collapse-label{display:none;}

	.mygrid ul.collapse-5 > li:nth-child(n+6),
	.grid   ul.collapse-5 > li:nth-child(n+6){display:list-item;}
}