@charset "utf-8";

/* ==========================================================================
   パソコン用の基本デザイン・レイアウト（新着情報の下に本文が回り込む構造）
   ========================================================================== */
body {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  color: #333333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height: 1.7;
}

/* 全体の外枠（幅900pxで画面中央に配置） */
#container {
  width: 1020px;
  background: #FFFFFF;
  margin: 0 auto;
  border: 1px solid #CCCCCC;
}

/* ① ヘッダー */
#header {
  background: #FFFFFF;
  padding: 0;
  text-align: center;
}

/* 全ての画像を画面幅からはみ出させないための万能クラス */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ② 横並びメニュー */
#gNav-container {
  background: #F2F2F2;
  border-top: 1px solid #CCCCCC;
  border-bottom: 2px solid #0066CC;
}
#gNav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#gNav li {
  position: relative;
}

#gNav li a {
  display: block;
  padding: 12px 15px; /* ← 左右の余白を狭くして、ボタン全体をスリムにしました */
  color: #333333;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}

#gNav li a:hover {
  background: #0066CC;
  color: #FFFFFF;
}

/* ③ コンテンツ全体の囲み */
#content-wrap {
  padding: 30px;
}

/* 【修正】新着情報（NEWS）の枠：横幅いっぱいに広げて、下に少し余白を取る */
#info-top {
  border: 1px solid #99CCFF;
  background: #FAFEFF;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 30px; /* 下の本文との間に隙間をあける */
}
.info-title-img {
  margin: 0 0 10px 0;
}
.infodate {
  color: #0066CC;
  font-weight: bold;
  font-size: 13px;
  margin: 0 0 5px 0;
}
.info-text {
  margin: 0;
  font-size: 14px;
}

/* 【修正】メイン文章エリア：新着情報の下で、横幅100%いっぱいに広げる */
#mainContent-wide {
  width: 100%;
  box-sizing: border-box;
}
.content-title-img {
  margin-bottom: 20px;
}
.content-body-img {
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
	max-width: 600px
}
.content-body-img img {
  margin: 0 auto;
}

/* 会社概要テーブル */
#table-01 {
	width: 700px;
	border-collapse: collapse;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#table-01 th {
  background: #F2F2F2;
  width: 20%;
  padding: 12px;
  border: 1px solid #CCCCCC;
  text-align: left;
  font-size: 14px;
}
#table-01 td {
  padding: 12px;
  border: 1px solid #CCCCCC;
  font-size: 14px;
}
#table-01 ul {
  margin: 0;
  padding-left: 20px;
}

/* ④ フッター */
#footer {
  background: #333333;
  color: #FFFFFF;
  padding: 20px;
  text-align: center;
  font-size: 13px;
}
#footerNav {
  margin-bottom: 10px;
}
#footerNav a {
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 10px;
}
#footerNav a:hover {
  text-decoration: underline;
}
#copy p {
  margin: 0;
}


/* ==========================================================================
   スマートフォン用の自動組み替えレイアウト（画面幅850px以下）
   ========================================================================== */
@media screen and (max-width: 850px) {
  
  /* 外枠の幅を100%にして画面ぴったりに */
  #container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
  }

  /* メニューをスマホ用に押しやすい縦並びボタンに変形 */
  #gNav {
    flex-direction: column !important;
  }
  #gNav li {
    text-align: center;
    border-bottom: 1px solid #DDDDDD;
  }
  #gNav li a {
    padding: 15px !important;
    font-size: 16px;
  }

  /* 内側の余白をスマホ用に狭める */
  #content-wrap {
    padding: 15px !important;
  }
  
  #info-top {
    margin-bottom: 20px !important;
  }

  /* テーブル（表）を縦型のブロック形式に変形して文字切れ防止 */
  #table-01 th, #table-01 td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  #table-01 th {
    background: #EAF9FF !important;
    border-bottom: none !important;
  }
}

/* 新聞ページナビゲーション */
.news-page-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-bottom: 20px;
	gap: 5px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 10px;
}
.news-page-nav li a {
    display: block;
    padding: 8px 12px;
    background: #eee;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
}
.news-page-nav li a.current {
    background: #0067b0;
    color: #fff;
}

/* ======================================================
  新聞レスポンシブ 最終コード
   ====================================================== */

/* PC表示：幅を1020pxに固定し、崩れを物理的に防ぐ */
@media screen and (min-width: 1021px) {
    .news-wrap, .newspaper-responsive-container {
        width: 1020px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .news-wrap table, .newspaper-responsive-container table {
        width: 1020px !important;
    }
}

/* スマホ・縮小表示：1020px以下の時に発動 */
@media screen and (max-width: 1020px) {
    /* 外枠の設定 */
    .news-wrap, .newspaper-responsive-container {
        width: 100% !important;
        overflow: hidden !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }

    /* テーブルの設定：ここを「auto」に戻して画像優先にします */
    .news-wrap table, .newspaper-responsive-container table {
        width: 100% !important;
        height: auto !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        table-layout: auto !important; 
    }

    /* セルの設定 */
    .news-wrap td, .newspaper-responsive-container td {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }

    /* 画像の設定：隙間を作らせない */
    .news-wrap img, .newspaper-responsive-container img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        /* スマホの計算誤差を埋めるための「微拡大」 */
        transform: scale(1.002);
        transform-origin: top left;
    }

    /* 崩れの原因となるspacer.gifをスマホ時のみ無効化 */
    img[src*="spacer.gif"] {
        display: none !important;
    }
}

.responsive-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* 画像同士のわずかな隙間を埋めるため、0.5%だけ拡大 */
    transform: scale(1.005);
    transform-origin: top left;
}
   
/* 見出しのデザイン：左側にオレンジの縦棒 */
.section-title h2 {
	border-left: 8px solid #f08000;              /* 線の内側の余白 */
	margin-left: 10px;                 /* 左端に寄せる */
	color: #333;                    /* 文字色 */
	font-size: 1.8rem;              /* 文字の大きさ */
	line-height: 1.2;               /* 行の高さ */
	display: flex;
	align-items: center;
	padding-right: 15px;
	padding-left: 10px;
	margin-top: 0;      /* 上の余白をゼロに */
	margin-bottom: 10px; /* 下の説明文との間隔 */
}

/* ==========================================================================
   「鉄道OB会のあゆみ」ページ専用のデザイン改善コード
   ========================================================================== */
/* ページのメイン見出し（h2）のデザイン調整 */
.section-title h2 {
  font-size: 24px;
  color: #0066CC;
  border-bottom: 2px solid #0066CC;
  padding-bottom: 8px;
  margin-top: 0;
  margin-bottom: 30px;
}

/* 歴史コンテンツ全体の文字の大きさ・読みやすさ */
.history-content {
  font-size: 15.5px;
  line-height: 1.85; /* 行間を広げてゆったりと */
  color: #333333;
}

/* 【重要】中点（・）の見出しを強調するリボン風デザイン */
.history-content h3 {
  font-size: 17px;
  color: #0052a3;
  background: #f0f7ff;         /* 見出しの背景を爽やかな薄い青に */
  padding: 10px 15px;         /* 内側の余白 */
  border-left: 6px solid #0066CC; /* 左側に太い青線のアクセント */
  border-radius: 0 4px 4px 0; /* 右側の角だけ少し丸く */
  margin-top: 35px;           /* 上の段落とのすき間 */
  margin-bottom: 15px;        /* 下の文章とのすき間 */
  font-weight: bold;
}

/* 各段落（文章）の行頭を1マス空ける表現と、段落ごとのすき間 */
.history-content p {
  margin: 0 0 15px 0;
  text-indent: 1em; /* HTML側でスペースを空けなくても自動で1マス空きます */
  text-align: justify; /* 右端が綺麗に揃う設定 */
}

/* ==========================================================================
   「鉄道OB会の案内」ページ専用のデザイン改善コード
   ========================================================================== */
/* すっきりした青線の入った中見出し */
.info-subtitle {
  font-size: 19px;
  color: #333333;
  border-left: 5px solid #0066CC;
  padding-left: 12px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: bold;
}

/* 表の下の補足文字 */
.table-caption {
  font-size: 13px;
  color: #666666;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

/* 所在地カード全体の並びと余白 */
.office-list {
  margin-top: 20px;
}

/* 各OB会を包むカードのデザイン */
.office-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* ほんの少しだけ影をつけて立体感を出します */
}

/* 連合会本部だけ少し目立たせる（背景を薄い青に） */
.office-card.honbu {
  background: #F4FAFF;
  border-color: #B3D7FF;
}

/* まさちゃんの地元、四国OB会も綺麗に引き立つよう設定（お好みに合わせて） */
.office-card.shikoku {
  border-left: 4px solid #009966; /* 四国イメージの緑のアクセント線 */
}

/* カード内：組織名 */
.office-card h4 {
  margin: 0 0 12px 0;
  font-size: 17px;
  color: #0066CC;
  font-weight: bold;
}
.office-card.shikoku h4 {
  color: #009966;
}

/* カード内：住所と電話番号 */
.office-card p {
  margin: 0 0 6px 0;
  font-size: 14.5px;
  color: #444444;
}
.office-card p.tel-fax {
  margin-bottom: 0;
}

/* カード内：ホームページへのリンクボタン */
.office-card .website {
  margin-top: 12px;
  margin-bottom: 0;
  text-align: right; /* 右寄せに */
}
.office-card .website a {
  display: inline-block;
  font-size: 13px;
  color: #0066CC;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #0066CC;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}
/* ボタンにマウスを乗せたときの動き */
.office-card .website a:hover {
  background: #0066CC;
  color: #FFFFFF;
}

/* ==========================================================================
   「失業給付手続き」ページ専用のデザイン改善・画像センタリング
   ========================================================================== */
/* 導入文章と小見出しの調整 */
.benefit-intro {
  font-size: 15.5px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.benefit-intro p {
  text-indent: 1em;
  margin: 0 0 12px 0;
}
.benefit-subtitle {
  font-size: 17px;
  color: #0066CC;
  margin-top: 25px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 【重要】中央のフロー図画像を完璧にセンタリングする命令 */
.benefit-flow-img {
  text-align: center; /* 中の画像を中央寄せにする */
  margin: 35px 0;    /* 上下にしっかり隙間を空けて見やすく */
  background: #FFFFFF;
}
.benefit-flow-img img {
  display: inline-block; /* 中央寄せが効くように設定 */
  max-width: 700px;      /* パソコン画面では最大700pxの幅にする */
  width: 100%;           /* スマホ画面では横幅いっぱいに自動縮小 */
  height: auto;
}

/* 必要書類などの詳細エリア */
.benefit-details {
  background: #F9F9F9;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 25px;
  margin-bottom: 35px;
}
.benefit-details h4 {
  margin: 0 0 15px 0;
  font-size: 16.5px;
  color: #333333;
  font-weight: bold;
}

/* 箇条書き（数字）のデザイン調整 */
.document-list {
  margin: 0 0 20px 0;
  padding-left: 20px;
}
.document-list li {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px; /* リストごとの隙間 */
  color: #444444;
}

/* ハローワーク案内の補足文字 */
.notice-text {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  color: #0066CC;
}

/* 会員のページに戻るボタンのデザイン */
.back-button-wrap {
  text-align: center;
  margin: 40px 0 20px 0;
}
.back-button {
  display: inline-block;
  background: #FFFFFF;
  color: #555555;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #CCCCCC;
  padding: 10px 24px;
  border-radius: 50px; /* 丸みのある可愛いボタンに */
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* ボタンにマウスを乗せたとき */
.back-button:hover {
  background: #F2F2F2;
  border-color: #999999;
  color: #333333;
}

/* スマホ用の微調整 */
@media screen and (max-width: 850px) {
  .benefit-details {
    padding: 15px;
  }
  .document-list {
    padding-left: 15px;
  }
}

/* ==========================================================================
   「年金について」ページ専用のデザイン改善コード
   ========================================================================== */
/* 小見出し */
.pension-subtitle {
  font-size: 17px;
  color: #333333;
  margin-top: 20px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 事務局カード */
.pension-office-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.pension-office-card h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #0066CC;
  font-weight: bold;
}
.pension-office-card .address {
  font-size: 15px;
  color: #444444;
  margin: 0 0 15px 0;
}

/* 注意書きの薄黄色いボックス */
.pension-notice-box {
  background: #FFFDEE; /* 優しい薄黄色 */
  border: 1px solid #E6D7A8;
  border-radius: 4px;
  padding: 15px;
}
.pension-notice-box p {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
}
.pension-notice-box p:last-child {
  margin-bottom: 0;
}
.pension-notice-box .notice-title {
  font-weight: bold;
  color: #B36B00; /* 注意を促す落ち着いた茶オレンジ */
  font-size: 14.5px;
}
.pension-notice-box .alert-text {
  font-weight: bold;
  color: #CC0000; /* 月曜の混雑は赤字で強調 */
  margin-top: 10px !important;
}

/* テーブル内のテキスト微調整 */
.dept-name {
  font-weight: bold;
  color: #333333;
}
.tel-number {
  font-size: 13px;
  color: #0066CC;
  font-weight: normal;
}

/* ==========================================================================
   「遺族年金請求手続き」ページ専用のデザイン改善コード
   ========================================================================== */
/* 導入テキスト */
.pension-intro-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 25px;
}

/* 国鉄入社時期の条件分岐ボックス */
.condition-box {
  background: #F4FAFF; /* 清潔感のある薄いブルー */
  border: 1px solid #B3D7FF;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 30px;
}
.condition-item {
  margin-bottom: 15px;
}
.condition-item:last-child {
  margin-bottom: 0;
}
.condition-label {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  background: #0066CC;
  color: #FFFFFF;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.condition-item p {
  margin: 0;
  font-size: 15px;
  color: #444444;
  line-height: 1.5;
}

/* 2つの手続きカードを横並びにするコンテナ（パソコン用） */
.pension-card-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* カード同士のすき間 */
  margin-top: 30px;
  margin-bottom: 35px;
}

/* カード1枚ずつの基本デザイン */
.pension-procedure-card {
  flex: 1; /* 2つのカードを均等な幅にする */
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  overflow: hidden; /* 角丸をヘッダーにも適用させる */
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* カードのヘッダー部分（共済組合：青） */
.card-header-blue {
  background: #0066CC;
  padding: 15px;
  color: #FFFFFF;
}
/* カードのヘッダー部分（年金機構：オレンジ） */
.card-header-orange {
  background: #E67E22; /* 識別しやすいように落ち着いたオレンジに */
  padding: 15px;
  color: #FFFFFF;
}

.pension-procedure-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
}
.card-subtitle {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

/* カードの本文エリア */
.card-body {
  padding: 20px;
}
.card-body h4 {
  margin: 0 0 10px 0;
  font-size: 14.5px;
  color: #333333;
  font-weight: bold;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 5px;
}
.card-body h4:not(:first-child) {
  margin-top: 20px; /* 2つ目の「揃える書類」の上のすき間 */
}

/* 連絡先住所 */
.contact-address {
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  margin: 0 0 15px 0;
}

/* 書類の箇条書きリスト */
.document-bullet {
  margin: 0;
  padding-left: 20px;
}
.document-bullet li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #555555;
}
.document-bullet li:last-child {
  margin-bottom: 0;
}

/* 【重要】画面の横幅が狭いスマホで見るときは縦並びにする設定 */
@media screen and (max-width: 768px) {
  .pension-card-container {
    flex-direction: column; /* 縦一列に並べる */
    gap: 25px;
  }
}

/* ==========================================================================
   「社会貢献活動」ページ専用のデザイン改善コード
   ========================================================================== */
/* 導入文 */
.social-lead-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 30px;
}

/* 4つの活動カードを並べるコンテナ（パソコン用） */
.activity-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
}

/* 活動カード1枚ずつのデザイン */
.activity-card {
  flex: 1;
  min-width: 180px; /* スマホやタブレットで自動折り返しさせるための最小幅 */
  background: #F4FAFF; /* さわやかな薄青 */
  border: 1px solid #D1E7FF;
  border-radius: 6px;
  padding: 20px 15px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* カード内の数字 */
.activity-number {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #0066CC;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* カード内の活動名 */
.activity-card h4 {
  margin: 0;
  font-size: 15.5px;
  color: #333333;
  font-weight: bold;
  line-height: 1.4;
}

/* インストラクターセクション */
.instructor-section {
  font-size: 15.5px;
  line-height: 1.8;
  color: #444444;
}
.instructor-section strong {
  color: #0066CC;
  font-size: 16.5px;
}

/* 制度目的のボックス */
.purpose-box {
  background: #F9F9F9;
  border-left: 5px solid #0066CC; /* 左側にアクセントの太い青線 */
  border-top: 1px solid #EAEAEA;
  border-right: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  border-radius: 0 6px 6px 0;
  margin: 25px 0 10px 0;
  padding: 20px;
}
.purpose-box p {
  margin: 0;
  font-size: 15px;
  color: #555555;
  line-height: 1.7;
}
.purpose-box .purpose-title {
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
  font-size: 15.5px;
}
.purpose-box strong {
  color: #333333;
  background: linear-gradient(transparent 60%, #CCE3FF 60%); /* 大切な4つのキーワードに薄い青のマーカー線を引きます */
  font-size: 15px;
}

/* スマホ用の画面幅微調整 */
@media screen and (max-width: 600px) {
  .activity-card-container {
    display: block; /* スマホでは1列の縦並びに */
  }
  .activity-card {
    margin-bottom: 12px;
  }
  .purpose-box {
    padding: 15px;
  }
}

/* ==========================================================================
   「会員ページのご案内」専用のデザイン改善コード
   ========================================================================== */
/* 会員メニュー全体の枠組み */
.member-menu-container {
  margin-top: 25px;
  margin-bottom: 25px;
}

/* メニューカード1枚ずつの基本デザイン */
.member-menu-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 3px 6px rgba(0,0,0,0.02);
}

/* カード左上の数字バッジ */
.card-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #0066CC;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

/* 各メニューのタイトル */
.member-menu-card h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  border-bottom: 2px solid #F0F0F0;
  padding-bottom: 10px;
}
.member-menu-card h3 .sub-title {
  font-size: 14px;
  color: #666666;
  font-weight: normal;
}

/* 説明文テキスト */
.menu-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #555555;
  margin: 0 0 20px 0;
}

/* リンクボタンを並べるエリア */
.member-links-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 解説ページへ飛ぶための青いボタンリンク */
.menu-link-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F4FAFF; /* さわやかな薄青 */
  border: 1px solid #CCE3FF;
  border-radius: 6px;
  padding: 14px 20px;
  color: #0066CC;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: all 0.2s;
}
/* ボタンにマウスを乗せたとき */
.menu-link-btn:hover {
  background: #0066CC;
  color: #FFFFFF;
  border-color: #0066CC;
  box-shadow: 0 2px 5px rgba(0,102,204,0.2);
}
.btn-arrow {
  font-size: 12px;
  opacity: 0.7;
}

/* ホテルリンクエリア */
.hotel-link-wrap {
  margin-top: 15px;
}
.external-link {
  display: inline-block;
  color: #0066CC;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  border-bottom: 1px dashed #0066CC;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.external-link:hover {
  opacity: 0.8;
}

/* 地域との共生活動リスト */
.member-activity-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列に並べる（パソコン用） */
  gap: 10px;
}
.member-activity-list li {
  font-size: 15px;
  color: #444444;
  list-style-type: disc; /* 黒丸のポッチ */
}

/* スマホ用の画面幅調整 */
@media screen and (max-width: 600px) {
  .member-menu-card {
    padding: 20px 15px;
  }
  .member-menu-card h3 {
    font-size: 16.5px;
  }
  .member-menu-card h3 .sub-title {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }
  .member-activity-list {
    grid-template-columns: 1fr; /* スマホでは活動リストを1列に */
  }
}

/* ==========================================================================
   「トップページ」専用のデザイン改善コード
   ========================================================================== */
/* 新着情報ボックス */
.top-news-box {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 35px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}
.news-list {
  margin: 0;
}
.news-list dt {
  float: left;
  font-weight: bold;
  color: #0066CC; /* 日付を連合会カラーの青に */
  width: 110px;
  margin-bottom: 10px;
  clear: both;
}
.news-list dd {
  margin-left: 110px;
  margin-bottom: 10px;
  color: #444444;
  line-height: 1.5;
}

/* 「連合会とは」メッセージカード */
.top-about-card {
  background: #F8F9FA;
  border-left: 1px solid #E0E0E0;
  border-right: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
  border-radius: 0 0 6px 6px;
  padding: 25px;
  margin-bottom: 35px;
}
.about-lead {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  color: #111111;
  margin: 0 0 15px 0;
}
.about-details {
  font-size: 15px;
  line-height: 1.8;
  color: #555555;
  margin: 0;
}
.about-details strong {
  color: #0066CC;
  font-weight: bold;
}

/* 概要テーブルの微調整 */
.top-summary-table {
  margin-top: 15px;
  margin-bottom: 30px;
}
.top-summary-table th {
  text-align: center;
  background: #F4FAFF !important; /* トップの表の左側を少しさわやかな薄青に */
  color: #333333;
}

/* スマホ表示のとき、新着情報の日付と本文を縦並びにする設定 */
@media screen and (max-width: 600px) {
  .news-list dt {
    float: none;
    width: auto;
    margin-bottom: 2px;
  }
  .news-list dd {
    margin-left: 0;
    margin-bottom: 15px;
  }
  .top-about-card {
    padding: 20px 15px;
  }
  .about-lead {
    font-size: 15px;
  }
  .about-details {
    font-size: 14px;
  }
}

/* ==========================================================================
   「関係リンク」ページ専用のデザイン改善コード
   ========================================================================== */
/* 導入文章 */
.link-page-lead {
  font-size: 15px;
  color: #555555;
  margin-bottom: 25px;
}

/* リンク全体のコンテナ */
.link-container {
  margin-bottom: 30px;
}

/* 各セクション（窓口 / JR社）の白いカードの塊 */
.link-card-section {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 各セクションの中の見出し */
.link-card-section h3 {
  margin: 0 0 20px 0;
  font-size: 16.5px;
  color: #333333;
  font-weight: bold;
  border-left: 4px solid #0066CC; /* 左側にアクセントの青線 */
  padding-left: 12px;
}

/* ボタンを綺麗に並べる配置設定 */
.link-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 12px; /* ボタン同士のすき間 */
}

/* リンクボタン1個ずつのデザイン */
.link-item-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F9F9F9;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 14px 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ボタンにマウスを乗せたとき・タップしたとき */
.link-item-btn:hover {
  background: #F0F7FF;
  border-color: #A3C9FF;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* ボタン左側：会社名・機関名 */
.link-name {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
}
.link-item-btn:hover .link-name {
  color: #0066CC; /* マウスを乗せると文字が青に変わる */
}

/* ボタン右側：薄いURLの文字（パソコン用） */
.link-url {
  font-size: 13px;
  color: #888888;
  font-family: Arial, sans-serif;
}

/* スマホ表示の時はURLを非表示にしてスッキリさせる */
@media screen and (max-width: 680px) {
  .link-card-section {
    padding: 20px 15px;
  }
  .link-item-btn {
    padding: 12px 15px;
  }
  .link-name {
    font-size: 14px;
  }
  .link-url {
    display: none; /* スマホではURLを隠してボタンを押しやすくします */
  }
  /* スマホの時はボタンの右端に「ページを開く矢印記号」を代わりにつける */
  .link-item-btn::after {
    content: "➔";
    font-size: 12px;
    color: #0066CC;
  }
}

/* 写真とキャプションを囲む外枠（3枚並べるための設定） */
.photo-row {
  display: flex;
  flex-wrap: wrap;       /* 画面が狭くなったら自動で折り返す */
  justify-content: center; /* 中央寄せ */
  gap: 20px;             /* 写真と写真の間のすき間 */
  margin-bottom: 20px;
}

/* 写真1枚ごとの設定（ここがポイントです） */
.photo-item {
  display: flex;
  flex-direction: column;  /* 中身（画像と文字）を縦に並べる */
  align-items: center;     /* 中央揃えにする */
  width: 30%;              /* 横に3枚並べる場合の幅（お好みで調整してください） */
  min-width: 250px;        /* スマホ等で小さくなりすぎないための最小幅 */
}

/* 画像自体の設定 */
.photo-item img {
  width: 100%;             /* 横幅いっぱいに広げる */
  height: auto;            /* 縦横比を維持 */
  display: block;          /* 画像の下に謎の隙間ができるのを防ぐ */
  border-radius: 4px;      /* 好みで角を少し丸くする（不要なら削除してください） */
}

/* 画像直下のキャプション（pタグ）の設定 */
.photo-item p {
  margin: 8px 0 0 0;       /* 画像との間に少し隙間をあける */
  font-size: 14px;         /* 文字の大きさ */
  color: #333333;          /* 文字の色（濃いグレー） */
  font-weight: bold;       /* 太字にする（目立たせたい場合） */
  text-align: center;      /* 文字を中央寄せにする */
}