/* ========================================
   和歌山ライオンズクラブ 組織表
======================================== */


/* ========================================
   ページ全体
======================================== */

.club-page {
  width: 980px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "游ゴシック",
    "Meiryo",
    "メイリオ",
    sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* ========================================
   共通
======================================== */

.margin-y-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}


/* ========================================
   見出し
======================================== */


/* H1：大見出し */

.club-page h1 {
  width: 100%;
  margin: 40px 0 25px;
  padding: 15px 20px;

  background-color: #003b6f;
  color: #ffffff;

  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;

  box-sizing: border-box;
}


/* H2：青＋黄色 */

.club-page h2 {
  width: 100%;
  margin: 35px 0 18px;
  padding: 12px 18px;

  background-color: #00529b;
  color: #ffffff;

  border-left: 6px solid #f5c400;
  border-bottom: 3px solid #f5c400;

  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;

  box-sizing: border-box;
}


/* H3：白背景＋青ライン */

.club-page h3 {
  width: 100%;
  margin: 25px 0 15px;
  padding: 8px 15px;

  background-color: #ffffff;
  color: #003b6f;

  border-left: 5px solid #00529b;
  border-bottom: 1px solid #00529b;

  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;

  box-sizing: border-box;
}


/* H4：H3より一段下 */

.club-page h4 {
  margin: 18px 0 10px 25px;
  padding: 3px 0 3px 10px;

  background: none;
  color: #333333;

  border-left: 3px solid #f5c400;

  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;

  box-sizing: border-box;
}


/* ========================================
   クラブ沿革・役員などの表
======================================== */

.club-page .about_table {
  width: 100%;
  margin: 0 auto 30px;

  border-collapse: collapse;
  table-layout: fixed;
}

.club-page .about_table th,
.club-page .about_table td {
  padding: 12px 15px;

  border: 1px solid #cccccc;

  vertical-align: middle;

  line-height: 1.6;

  word-break: normal;
  overflow-wrap: break-word;

  box-sizing: border-box;
}

.club-page .about_table th {
  width: 50%;

  background-color: #f5f5f5;

  font-weight: bold;
  text-align: center;
}

.club-page .about_table td {
  width: 50%;
}


/* ========================================
   委員会タイトル
======================================== */

.club-page .committee-title {
  margin: 0 0 15px;

  font-size: 24px;
  font-weight: bold;
}


/* ========================================
   委員会表
======================================== */

.club-page .committee-table {
  width: 100%;
  margin: 0 auto 30px;

  border-collapse: collapse;
  table-layout: fixed;

  text-align: center;
}

.club-page .committee-table th,
.club-page .committee-table td {
  padding: 12px 15px;

  border: 1px solid #cccccc;

  vertical-align: middle;

  line-height: 1.6;

  box-sizing: border-box;
}

.club-page .committee-table th {
  width: 120px;

  background-color: #f5f5f5;

  font-weight: bold;

  word-break: normal;
  overflow-wrap: break-word;
}

.club-page .committee-table td {
  word-break: normal;
  overflow-wrap: break-word;
}


/* ========================================
   組織表専用の見出し間隔
======================================== */

.club-page .about_table + h1 {
  margin-top: 50px;
  margin-bottom: 30px;
}


/* ========================================
   画像
======================================== */

.club-page img {
  max-width: 100%;
  height: auto;
}


/* 中央配置画像 */

.club-page .center-image {
  display: block;

  max-width: 100%;
  height: auto;

  margin-left: auto;
  margin-right: auto;
}


/* ========================================
   スマートフォン
   viewport="width=980" の状態で
   club-pageだけ読みやすくする
======================================== */

@media screen and (max-device-width: 767px) {


  /* ========================================
     ページ本体
  ======================================== */

  /*
   * 380pxにはしない。
   * 980pxの画面領域をほぼ全部使う。
   */

  .club-page {
    width: 950px;
    max-width: 950px;

    margin: 0 auto;

    padding: 0 20px;

    box-sizing: border-box;
  }


  /* ========================================
     上部画像
  ======================================== */

  .club-page img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
  }


  .club-page .margin-y-10 img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }


  /* ========================================
     H1
  ======================================== */

  .club-page h1 {
    width: 100%;

    margin: 45px 0 30px;
    padding: 24px 28px;

    font-size: 42px;
    line-height: 1.45;

    box-sizing: border-box;
  }


  /* ========================================
     H2
  ======================================== */

  .club-page h2 {
    width: 100%;

    margin: 35px 0 25px;
    padding: 20px 24px;

    border-left-width: 10px;
    border-bottom-width: 5px;

    font-size: 36px;
    line-height: 1.45;

    box-sizing: border-box;
  }


  /* ========================================
     H3
  ======================================== */

  .club-page h3 {
    width: 100%;

    margin: 30px 0 20px;
    padding: 15px 20px;

    border-left-width: 8px;

    font-size: 31px;
    line-height: 1.45;

    box-sizing: border-box;
  }


  /* ========================================
     H4
  ======================================== */

  .club-page h4 {
    margin: 25px 0 18px 35px;
    padding: 7px 0 7px 15px;

    border-left-width: 5px;

    font-size: 27px;
    line-height: 1.5;
  }


  /* ========================================
     クラブ情報・役員表
  ======================================== */

  .club-page .about_table {
    width: 100%;

    margin: 0 0 35px;

    table-layout: fixed;
    border-collapse: collapse;
  }


  .club-page .about_table th,
  .club-page .about_table td {
    padding: 18px 15px;

    font-size: 27px;
    line-height: 1.6;

    vertical-align: middle;

    word-break: normal;
    overflow-wrap: break-word;

    box-sizing: border-box;
  }


  .club-page .about_table th {
    width: 50%;

    background-color: #f5f5f5;

    font-weight: bold;
    text-align: center;

    white-space: normal;
  }


  .club-page .about_table td {
    width: 50%;
  }


  /* ========================================
     委員会表
  ======================================== */

  .club-page .committee-table {
    width: 100%;

    margin: 0 0 35px;

    table-layout: fixed;
    border-collapse: collapse;

    text-align: center;
  }


  .club-page .committee-table th,
  .club-page .committee-table td {
    padding-top: 17px;
    padding-bottom: 17px;

    border: 1px solid #cccccc;

    vertical-align: middle;

    line-height: 1.5;

    box-sizing: border-box;
  }


  /*
   * 委員長・委員などの左列
   */

  .club-page .committee-table th {
    width: 22%;

    padding-left: 8px;
    padding-right: 8px;

    background-color: #f5f5f5;

    font-size: 25px;
    font-weight: bold;

    white-space: normal;

    word-break: normal;
    overflow-wrap: break-word;
  }


  /*
   * 名前欄
   * widthは指定せず均等配分
   */

  .club-page .committee-table td {
    width: auto;

    padding-left: 8px;
    padding-right: 8px;

    font-size: 25px;

    word-break: normal;
    overflow-wrap: break-word;
  }


  /* ========================================
     委員会タイトル
  ======================================== */

  .club-page .committee-title {
    margin-bottom: 20px;

    font-size: 32px;
  }


  /* ========================================
     画像中央配置
  ======================================== */

  .club-page .center-image {
    display: block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
  }

}