/*
 * mie-content.css
 * 旧 layout.css / style.css からコンテンツ部分のみ抽出・整理
 * Bootstrap5 / mie-bs5.css と共存するため
 * - グローバルリセット (body/html/a 等) は除外
 * - 旧ヘッダー・フッター・ナビ関連は除外
 * - #main/#side レイアウト・コンテンツクラス・テーブルスタイルを保持
 */

/* =======================================
   コンテンツエリア レイアウト (layout.css より)
   ======================================= */

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

#content {
  display: flow-root; /* clearfix */
  /* Bootstrap .row.g-5 と同じ負マージン（ガター3rem=48px）で
     #main/#side を col-lg-8 / col-lg-4 と完全一致させる */
  margin-left: -24px;
  margin-right: -24px;
}
/* #content 直下のブロック（パンくず等）はガター分だけ内側へ戻す */
#content > #topicpath { padding-left: 24px; padding-right: 24px; }

/*
 * #main に旧サイト基準 (1em = 10px) を復元する
 * 旧 base.css が body { font-size: 62.5% } を設定していたため
 * .h3a { font-size: 2em } = 20px、p { font-size: 1.4em } = 14px が意図値
 * Bootstrap の 16px ベースのままだと 1.6 倍になってしまうため補正
 * ※ #side はサイドバー (新デザイン) なので補正しない
 */
#main {
  float: left;
  box-sizing: border-box;
  font-size: 62.5%; /* 1em = 10px に戻す */
  width: 66.6667%;   /* = .col-lg-8 */
  padding: 0 24px;   /* = g-5 ガター（左右24px） */
}

#side {
  float: right;
  box-sizing: border-box;
  width: 33.3333%;   /* = .col-lg-4 */
  padding: 0 24px;   /* = g-5 ガター（左右24px） */
}

#content p {
  padding: 0 0 15px 10px;
  margin-bottom: 1em;
  font-size: 1.4em; /* 62.5% base で 14px */
  line-height: 1.6em;
}

/* 本文 .honbun：#main は 62.5%(=10px) なので、div のままだと本文が10pxになる。
   #content p の em 指定は p にしか効かず、本文は TinyMCE の <p> を含む都合で
   div で包んでいるため対象外。#main スコープで px 指定して確実に上書きする。
   ※画面幅によらず必要なので、メディアクエリの外に置くこと */
#main .honbun,
#main .honbun p { font-size: 15px; line-height: 1.85; }

.clearbox {
  overflow: hidden;
}

/* 本文まわりの回り込み画像（旧 style.css の img.photo_left / photo_right を復元）
   親は .clearbox で回り込み解除される */
img.photo_left {
  float: left;
  margin: 0 15px 10px 0;
}

img.photo_right {
  float: right;
  margin: 0 0 10px 15px;
}

/* 幅の狭い画面では回り込ませると本文が細くなりすぎるため解除 */
@media (max-width: 575.98px) {
  img.photo_left,
  img.photo_right {
    float: none;
    display: block;
    margin: 0 auto 10px;
  }
}

/* 文字色ユーティリティ（旧 base.css より復元） */
.clrred { color: #F00; }
.clrblue { color: #039; }
.clryellow { color: #FC0; }
.clrorange { color: #F90; }
.clrgreen { color: #1BA011; }
.clrpink { color: #FF999C; }
.clrwhite { color: #FFF; }
.clr333 { color: #333; }

.mb05 { margin-bottom:  5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
  #main {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  #side {
    float: none;
    width: 100%;
    margin-top: 2rem; /* スマホ縦積み時、#main(「一覧に戻る」等)との間に余白 */
  }
  /* 見出し h3.h3a：固定高(52px)をやめ、長いタイトルでも折り返して
     直下の日付/本文に食い込まないようにする。上部の水色ライン(h3.gif)は維持。
     ※ベース .h3a が後方にあるため #main で詳細度を上げて確実に上書き */
  #main .h3a {
    height: auto;
    line-height: 1.5;
    padding: 13px 5px 8px;
    font-size: 1.7em; /* 20px → 17px（長題の折り返しを抑制） */
  }
  /* 小見出し h4.h4a：固定高(13px)/line-height(13px)が font 18px に対して
     不足し、2行で行が重なる。行間を確保し、左バレット(h4a.gif)は1行目に合わせる */
  #main .h4a {
    height: auto;
    line-height: 1.6;
    background-position: 0 0.45em; /* 13pxバレットを1行目の中央付近に */
  }
}

/* =======================================
   コンテンツリンク (style.css より、#main にスコープ)
   ======================================= */

#main a:link    { color: #0161ba; text-decoration: none; }
#main a:visited { color: #000033; }
#main a:hover   { color: #C03; text-decoration: underline; }
#main a:active  { color: #d42830; }
#main a:hover img { opacity: 0.8; }

/* パンくず */
#topicpath {
  font-size: 11px;
  color: #aaa;
  letter-spacing: .05em;
  padding: 10px 0 14px;
  line-height: 1.4;
}
#topicpath a {
  color: #888;
  text-decoration: none;
}
#topicpath a:hover {
  color: var(--navy, #005096);
  text-decoration: underline;
}

/* =======================================
   見出しスタイル (style.css より)
   ======================================= */

.h3a {
  /* 旧 h3.gif（上下の水色ライン）をCSSで再現。高さ可変でも罫線が上下端に付く。
     上端: 水色#80d2ed 2px + 薄灰#e3e7e8 3px / 下端: 薄灰#e3e7e8 2px + 水色#94d6ec 1px */
  background-image:
    linear-gradient(#80d2ed 0, #80d2ed 2px, #e3e7e8 2px, #e3e7e8 100%),
    linear-gradient(#e3e7e8 0, #e3e7e8 2px, #94d6ec 2px, #94d6ec 100%);
  background-repeat: no-repeat;
  background-position: top left, bottom left;
  background-size: 100% 5px, 100% 3px;
  height: 52px;
  line-height: 52px;
  font-size: 2em;
  font-weight: normal;
  margin-bottom: 25px;
  padding-left: 5px;
}
.h4a {
  background: url(../images/title/h4a.gif) no-repeat center left;
  height: 13px;
  line-height: 13px;
  margin-bottom: 25px;
  font-size: 1.8em;
  font-weight: normal;
  margin-left: 5px;
  padding-left: 20px;
}
.h4b {
  background: url(../images/title/h4b.gif) no-repeat center left;
  height: 27px;
  line-height: 27px;
  margin-bottom: 15px;
  font-size: 1.6em;
  font-weight: normal;
  margin-left: 5px;
  padding-left: 12px;
}
.h4c {
  background: url(../images/title/h4c.gif) repeat-x top left;
  height: 34px;
  line-height: 34px;
  margin-bottom: 20px;
  font-size: 1.6em;
  font-weight: normal;
  padding-left: 10px;
  color: #333;
}
.h5a {
  font-size: 1.6em;
  font-weight: bold;
}

/* =======================================
   リスト (style.css より)
   ======================================= */

.list01, .list02, .list03, .list04 {
  list-style: none;
  padding-left: 0;
  margin: 0 0 20px 10px;
}
.list01 li, .list02 li, .list03 li, .list04 li { list-style: none; }

.list01 li {
  background: url(../images/common/list01.gif) no-repeat left center;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-left: 20px;
  width: 190px;
  float: left;
}
.list02 li {
  background: url(../images/common/list01.gif) no-repeat left center;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-left: 25px;
}
.list03 li {
  background: url(../images/common/arrow01.gif) no-repeat left center;
  font-size: 1.4em;
  margin: 0 0 5px 0;
  padding-left: 13px;
}
.list04 li {
  background: url(../images/common/list04.gif) no-repeat 0 5px;
  font-size: 1.4em;
  line-height: 1.6em;
  margin: 0 0 10px 0;
  padding-left: 15px;
}
.olist01 { margin: 0 0 20px 30px; }
.olist01 li {
  font-size: 1.5em;
  line-height: 1.5em;
  border-bottom: 1px dotted #999;
  margin-bottom: 15px;
}

/* =======================================
   ボックス・定義リスト (style.css より)
   ======================================= */

.dl01 { padding: 10px 0 0 0; }
.dl01 dt {
  padding: 0 0 8px 20px;
  background: url(../images/arrow02.gif) no-repeat left top;
}
.dl01 dd {
  padding: 8px;
  margin: 0 0 10px 20px;
  background: #f5f5f5;
  border: 3px dotted #ccc;
}

.box01 {
  background: #f2fcff;
  padding: 10px 10px 1px 10px;
  border-top: 1px solid #D9DBD0;
  border-bottom: 1px solid #D9DBD0;
}
.box02 {
  padding: 15px 15px 5px 15px;
  border: 8px solid #eee;
  margin: 0 0 25px 0;
}
.box03 {
  background: #eee;
  padding: 10px 5px 1px 5px;
  margin: 0 0 10px 0;
}

dl.chushaku { margin: 0 0 10px 10px; padding: 0; font-size: 1.4em; }
dl.chushaku dt { float: left; clear: both; line-height: 1.4; margin-bottom: 7px; }
dl.chushaku dd { margin-left: 20px; text-indent: -3px; line-height: 1.4; margin-bottom: 7px; }

/* =======================================
   テーブル (style.css より)
   ======================================= */

.table01 { font-size: 1.2em; width: 100%; }
.table01 th { border: 1px solid #CCC; padding: 3px; background: #39F; color: #FFF; }
.table01 td { border: 1px solid #CCC; padding: 5px; }

.table02, .table04 {
  width: 95%;
  margin: 0 auto 20px auto;
  border-collapse: collapse;
  font-size: 1.4em;
}
.table02 th, .table04 th, .table06 th {
  border: 1px solid #CCC;
  padding: 3px;
  background: #E2F3FF;
  text-align: center;
}
.table02 td, .table06 td { border: 1px solid #CCC; padding: 5px; }
.table04 td { border: 1px solid #CCC; padding: 3px 15px; }

.table06 { margin: 0 0 20px 15px; border-collapse: collapse; }
.table07 { margin: 0 0 20px 15px; border-collapse: collapse; }
.table07 th { border: 1px solid #CCC; padding: 2px; background: #39F; color: #FFF; }
.table07 td { border: 1px solid #CCC; padding: 2px 4px; }

.bgtd01 td { background: #E2F3FF; }

/* =======================================
   クラブ関連 (style.css より)
   ======================================= */

#club #news h4 {
  background: url(../images/club/ttl_news.gif) no-repeat top left;
  height: 38px;
  line-height: 38px;
  padding-left: 10px;
  margin-bottom: 25px;
  font-size: 1.6em;
  font-weight: 400;
}
#club #news dl dt { font-weight: normal; font-size: 1.3em; line-height: 1.6em; }
#club #news dl dd {
  border-bottom: 1px dotted #CCC;
  margin: 0 0 10px 0;
  font-size: 1.3em;
  line-height: 1.6em;
}

@media print, screen and (min-width: 640px) {
  #club #news dl { width: 650px; padding: 0 10px; }
  #club #news dl dt { width: 18%; float: left; }
  #club #news dl dd { width: 82%; float: left; }
}

#club ul.list_club { margin: 0 auto; }
#club .list_club li {
  width: 130px;
  display: inline-block;
  margin: 0 8px 15px 8px;
  vertical-align: top;
}
#club .list_club li span {
  background: url(../images/common/arrow01.gif) no-repeat 0 7px;
  font-size: 1.3em;
  padding-left: 10px;
}

.old_news { list-style: none; margin: 0; padding: 0; }
.old_news li { list-style: none; border: 1px solid #ccc; padding: 5px; margin: 0 5px 5px 0; float: left; }
.old_news li a {
  background: url(../images/common/arrow01.gif) no-repeat left center;
  padding: 0 0 0 10px;
  font-size: 1.4em;
}

/* =======================================
   FAQ (style.css より)
   ======================================= */

#faq dt {
  margin: 0 20px 10px 20px;
  font-size: 1.6em;
  line-height: 2em;
}
#faq dt span {
  font-size: 1.8em;
  font-weight: bold;
  color: #28add9;
  margin: 0 5px 0 0;
}
#faq dd {
  margin: 0 20px 40px 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-left: 5px solid #94d6ec;
  font-size: 1.4em;
  line-height: 1.8em;
}
#faq dd table { background: #FFF; margin: 10px 0 0 10px; }
#faq dd td { padding: 3px 10px; }

/* =======================================
   ファイルアイコン (style.css より)
   ======================================= */

.pdf { padding: 5px 22px 0 0; margin: 0 5px 0 0; background: url(../images/common/pdf_icon.gif) no-repeat right; }
.doc { padding: 5px 22px 0 0; margin: 0 5px 0 0; background: url(../images/common/word_icon.gif) no-repeat right; }
.xls { padding: 5px 22px 0 0; margin: 0 5px 0 0; background: url(../images/common/excel_icon.gif) no-repeat right; }
.betsumado { padding: 0 18px 0 0; background: url(../images/common/icon_betsumado.gif) no-repeat right center; }

/* =======================================
   年間行事 (style.css より)
   ======================================= */

.month { font-size: 50px; font-weight: normal; text-align: center; }
.gyoji { width: 100%; }
.gyoji td { padding: 5px 5px 5px 0; vertical-align: middle; }
.gyoji ul { width: 50%; float: left; }

td.apr { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#f5b2b2)); }
td.may { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#dbe8a0)); }
td.jun { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#d1abcf)); }
td.jul { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#d3edfb)); }
td.aug { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#a2bce2)); }
td.sep { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#ead78f)); }
td.oct { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#bed1ba)); }
td.nov { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#d3b798)); }
td.dec { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#da9376)); }
td.jan { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#8d93b5)); }
td.feb { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#f5b394)); }
td.mar { background: -webkit-gradient(linear,left top,right top, from(#ffffff),to(#e19696)); }

/* =======================================
   その他ユーティリティ (style.css より)
   ======================================= */

.gotop { text-align: right; margin: 10px 10px 20px 0; }
.gotop a { background: url(../images/common/gotop.gif) no-repeat left center; padding: 0 0 0 20px; font-size: 1em; }
.return { background-color: #dee2e4; padding: 5px; text-align: right; }
.return a { background: url(../images/common/return.gif) no-repeat center left; padding: 0 0 0 20px; font-size: 1.3em; }
.module { margin: 0 0 40px 0; }
.cmsNewsShiryo li { font-size: 1.4em; }