/* year_layout_fix.css
   年代別ページの「校内スナップ / 配布資料」を各年代UIに自然に溶け込ませるための共通CSS
   - 2016：右カラムの情報枠（.bar）内に統合
   - 2010/2003/1998：本文の流れに挿入しても“追記ブロック”に見えないように
   - スマホ：横スクロールしない（画像・固定幅の崩れを緩和）
*/

/* --- 共通：追加ブロックの見た目 --- */
.year-block,
.section{
  margin: 12px 0;
}

.year-block h2,
.section h2{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.25;
}

.card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 4px;
  padding: 10px;
}

.thumbImg{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 3px;
  background: #f6f7f8;
}

.docList{
  margin: 0;
  padding-left: 18px;
}

.docList li{ margin: 6px 0; }

.small{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

/* 2016：右カラムに入ったときは“情報枠の文脈”に寄せる */
.bar .year-block h2,
.bar .section h2{
  font-size: 13px;
  letter-spacing: .02em;
}

.bar .card{
  border-radius: 4px;
  border-color: rgba(0,0,0,.12);
  background: #fff;
}

/* --- スマホ対応（横スクロール回避） --- */
img{ max-width: 100%; height: auto; }

/* 2016は元々レスポンシブだが、念のため共通で縦積みを補助 */
@media (max-width: 900px){
  .cols{ flex-direction: column !important; }
  .side{ min-width: 0 !important; }
}

/* 2010：固定幅コンテナをスマホで緩和（原型を崩さない程度） */
@media (max-width: 980px){
  #container{
    width: auto !important;
    margin: 0 10px !important;
  }
}

/* 2003/1998：古いtableレイアウトの横はみ出しを抑える */
@media (max-width: 720px){
  table{ max-width: 100%; }
}