@charset "utf-8";

/*テーブル
---------------------------------------------------------------------------*/
/*ta1　画面幅いっぱいのボックス設定*/

.table-wrapper {
  max-width: 800px;
  margin: 0 auto; /* ← 中央寄せの決め手！ */
  overflow-x: auto;
}

.ta1 {
  width: 100%;
  margin: 0 auto 20px;
}
.ta1,
.ta1 td,
.ta1 th {
  border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色*/
  padding: 10px 15px; /*ボックス内の余白*/
  word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
  width: auto;
  text-align: left; /*左よせ*/
  background: #eee; /*背景色*/
  font-size: 18px; /*文字サイズ*/
}
/*ta1の左側ボックス*/
.ta1 th {
  width: 140px; /*幅*/
  text-align: center; /*センタリング*/
  font-weight: normal;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
  width: 100%;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta1 td .specialbox {
  float: left;
  width: 80px; /*アイコンからテキストにする場合はここの幅を大きく変更して下さい。pxでなく%での指定もOKです。*/
  height: 40px;
}
.ta1 td .specialbox img {
  vertical-align: middle;
}

/*ta2 「live」と「workshops_and_events」のテーブル設定
---------------------------------------------------------------------------*/
.ta2 {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
  min-width: 320px; /* ← 最小幅を確保して、崩れ防止 */
  border-collapse: collapse;
}
.ta2,
.ta2 td,
.ta2 th {
  border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色*/
  padding: 10px 15px; /*ボックス内の余白*/
  word-break: break-all;
}

.ta2 td,
.ta2 th {
  word-break: break-word;
  white-space: normal;
  padding: 12px 16px;
}

/*テーブル１行目に入った見出し部分*/
.ta2 th.tamidashi {
  width: auto;
  text-align: center; /*中央よせ*/
  background: #eee; /*背景色*/
  font-size: 18px; /*文字サイズ*/
}
/*ta2の左側ボックス*/
.ta2 th {
  width: 185px; /*幅*/
  text-align: center; /*センタリング*/
  font-weight: normal;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta2 th img {
  width: 100%;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta2 td .specialbox {
  float: left;
  width: 80px; /*アイコンからテキストにする場合はここの幅を大きく変更して下さい。pxでなく%での指定もOKです。*/
  height: 40px;
}
.ta2 td .specialbox img {
  vertical-align: middle;
}

/*ta3設定*/
.ta3 {
  width: 100%;
  margin: 0 auto 20px;
}
.ta3,
.ta3 td,
.ta3 th {
  border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色*/
  padding: 10px 15px; /*ボックス内の余白*/
  word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta3 th.tamidashi {
  width: auto;
  text-align: left; /*左よせ*/
  background: #eee; /*背景色*/
  font-size: 18px; /*文字サイズ*/
}
/*ta3の左側ボックス*/
.ta3 th {
  width: 200px; /*幅*/
  text-align: center; /*センタリング*/
  font-weight: normal;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta3 th img {
  width: 100%;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta3 td .specialbox {
  float: left;
  width: 80px; /*アイコンからテキストにする場合はここの幅を大きく変更して下さい。pxでなく%での指定もOKです。*/
  height: 40px;
}
.ta3 td .specialbox img {
  vertical-align: middle;
}

/*画面幅1024px以下の設定 iPadプロ
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .ta2 {
    width: 75%;
  }

  /*ta2内の左側ボックス*/
  .ta2 th {
    width: 100px;
    padding: 5px;
  }

  /*ta3の左側ボックス*/
  .ta3 th {
    width: 115px; /*幅*/
    text-align: center; /*センタリング*/
    font-weight: normal;
  }

  .ta3,
  .ta3 td,
  .ta3 th {
    padding: 10px 10px; /*ボックス内の余白*/
    word-break: break-all;
  }
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
  .ta2 {
    width: 100%;
  }

  /*ta2内の左側ボックス*/
  .ta2 th {
    padding: 2px;
  }
}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
  .ta2 th {
    width: 85px; /* ← 100px → 85pxに調整（お好みで） */
    padding: 6px 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .ta2 td {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  .ta1 th {
    width: 100px;
    padding: 5px;
  }
  /*テーブル内の右側*/
  .ta1 td {
    width: auto;
    padding: 5px;
  }

  /*ta2設定*/
  .ta2 {
    width: 100%;
  }

  /*ta2内の左側ボックス*/

  .ta2 td,
  .ta2 th {
    font-size: 13px;
    padding: 6px 8px;
  }

  .ta3,
  .ta3 td,
  .ta3 th {
    padding: 10px 8px; /*ボックス内の余白*/
    word-break: break-all;
  }

  .ta3 th {
    width: 70px; /*幅*/
  }
}

/*画面幅375px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 375px) {
  .ta2 th {
    padding: 0;
  }
}