.info-box__link a {
	display: block;
}

@media screen and (max-width:768px) {
.volunteer-title {
    font-size: 24px !important;
}
  
  .volunteer-title span {
    font-size: 24px !important;
}
  
}

/* --- 共通：テーブル外枠（PC・スマホ共通） --- */
.volunteer-tableWrap {
  width: 100%;
  margin-bottom: 20px;
      padding-left: 1%;
    padding-right: 1%;
}

.div-table {
  width: 100%;
  max-width: 90%; /* PCでは少し余裕を持たせる（元の設定） */
  margin: 0 auto;
  border: 1px solid #4a6fa5;
}

.div-table-row {
  display: flex;
  border-top: 1px solid #4a6fa5;
}

.div-table-row:first-child {
  border-top: none;
}

.div-table-cell {
  padding: 10px;
  border-left: 1px solid #4a6fa5;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  word-break: break-all; /* テキスト突き抜け防止 */
}

.div-table-cell:first-child {
  border-left: none;
}

.div-table-head {
  background-color: #f2f4f8;
  font-weight: bold;
}

/* --- PC・タブレット用：画面が広いときはパーセントで伸縮 --- */
@media screen and (min-width: 769px) {
  .month   { width: 8%; }
  .event   { width: 30%; text-align: left; }
  .place   { width: 20%; text-align: left; }
  .content { width: 25%; text-align: left; }
  .date    { width: 17%; }
}

/* --- スマホ用：768px以下の時に横スクロールを有効化 --- */
@media screen and (max-width: 768px) {
  .volunteer-tableWrap {
    overflow-x: auto; /* スクロール発生 */
    -webkit-overflow-scrolling: touch;
  }

  .div-table {
    max-width: none;  /* 枠の制限を解除 */
    width: max-content; /* 中身の合計幅まで広げる */
    display: block;   /* スクロールを正しく動作させるため */
  }

  .div-table-row {
    width: max-content; /* 行が縮まないように固定 */
  }

  /* スマホ時の各列の固定幅（pxで指定してスクロールさせる） */
  .month   { width: 70px;  flex-shrink: 0; }
  .event   { width: 200px; flex-shrink: 0; text-align: left; }
  .place   { width: 160px; flex-shrink: 0; text-align: left; }
  .content { width: 180px; flex-shrink: 0; text-align: left; }
  .date    { width: 100px; flex-shrink: 0; }

  /* セル内のpタグやspanの突き抜けを強制防止 */
  .div-table-cell p,
  .div-table-cell span {
    white-space: normal !important;
    display: block;
    width: 100%;
  }
}

/* --- 以下、info-boxなどの装飾（共通） --- */
.info-box {
  border: 1px solid #2b6f8e;
  width: 100%;
  max-width: 90%;
  margin: 25px auto 0;
}
.info-box__title {
  background-color: #1f6f8b;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-weight: bold;
}
.info-box__body {
  background-color: #eef1f4;
  padding: 16px;
  text-align: center;
}