@charset "UTF-8";

/* =======================================================
   1. 全体リセット & 共通設定（PC・スマホ共通）
   ======================================================= */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}
body { 
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
  line-height: 1.7; 
  color: #2b2b2b;
  background-color: #ecf0f4;
}
img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
}
hr { 
  border: 0; 
  height: 1px; 
  background: #99c8ff; 
  margin: 15px 0; 
}

/* リンク色設定 */
a { 
  color: #1e40af; 
  text-decoration: underline; 
}
a:hover { 
  text-decoration: none; 
}
.alert-link { 
  color: #cc0025; 
  font-weight: bold; 
  text-decoration: none; 
}
.alert-link:hover { 
  text-decoration: underline; 
}

/* レイアウト外枠（TOPページ基準に統一） */
#wrapper { 
  max-width: 1100px; 
  margin: 0 auto; 
  background: #ecf0f4; 
  box-shadow: 0 0 10px rgba(0,0,0,0.1); 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
}

/* ヘッダー */
#header, header { 
  padding: 20px 10px; 
  background: #ffffff; 
  text-align: center; 
}
#header h1, header h1 { 
  font-size: 12px; 
  font-weight: normal; 
  color: #666; 
  margin-bottom: 5px; 
  text-align: left;
}
#header h2 { 
  font-size: 24px; 
  font-weight: bold; 
  color: #2b2b2b;
}
.main-banner { 
  width: 100%; 
  height: auto;
}

/* =======================================================
   2. グローバルナビゲーション（メニューバー）
   ======================================================= */
#glb_navi { 
  display: flex; 
  flex-wrap: wrap; 
  background: #abb0bc; /*#bed5e8 */ 
  border-bottom: 1px solid #fdfcf7; 
  width: 100% !important;
}
#glb_navi div { 
  flex: 1; 
  min-width: 140px; 
  text-align: center; 
  border-right: 1px solid #fdfcf7; 
}
#glb_navi h2 { 
  font-size: 16px; 
  padding: 12px 5px; 
  font-weight: normal; 
}
#glb_navi a { 
  display: block; 
  color: #333; 
  text-decoration: none; 
  font-weight: bold; 
}
#glb_navi a:hover { 
  background: #e0e0e0; 
}

/* 現在地ハイライト */
.current-page { 
  background: #99c8ff !important; 
  border-bottom: 2px solid #00a0ba; 
}
.current-page h2 { 
  color: #ffffff !important; 
  font-weight: bold !important; 
}

/* 画面右下に常駐する「上へ」ボタン */
.btn-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 55px;
  height: 55px;
  background-color: #00A0BA; 
  color: #ffffff !important; 
  text-align: center;
  line-height: 52px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
  z-index: 9999; 
  transition: all 0.3s ease;
}
.btn-to-top:hover {
  opacity: 0.8;
}

/* =======================================================
   3. メインレイアウト（2カラム設定）
   ======================================================= */
#glb-container { 
  flex: 1; 
  padding: 30px 25px; 
  display: flex; 
  gap: 30px; 
}
.main-content { 
  flex: 1; 
}
.sidebar { 
  width: 260px; 
  flex-shrink: 0;
}
.sidebar img {
  margin-bottom: 12px !important;
}
.sidebar p {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #003366;
  margin: 15px 0;
  line-height: 1.5;
}

/* =======================================================
   4. ?? 新規追加：仕事を探すページ・その他共通「カード式デザイン」
   ======================================================= */
.custom-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.03);
}
/* カード大見出し（緑のベタ塗り帯） */
.custom-card .card-main-title {
  font-size: 19px;
  font-weight: bold;
  color: #ffffff;
  background-color: #aacc33;
  padding: 10px 15px;
  margin: -25px -25px 20px -25px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
/* カード内小見出し（左に縦線） */
.custom-card .card-sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #0056b3;
  border-left: 4px solid #0056b3;
  padding-left: 8px;
  margin: 25px 0 10px 0;
}
.custom-card .card-sub-title:first-of-type {
  margin-top: 0;
}

/* 点線囲みの箇条書きリスト */
.custom-list {
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 15px 15px 15px 35px;
  margin: 10px 0;
}
.custom-list li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #334155;
  line-height: 1.4;
}
.custom-list li:last-child {
  margin-bottom: 0;
}

/* ??? 保険用のすっきりミニカード */
.insurance-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.insurance-box .insurance-text {
  flex-grow: 1;
}
.insurance-box .insurance-text h5 {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: #1e293b;
  font-weight: bold;
}
.insurance-box .insurance-text p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}
.insurance-box .insurance-btn {
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.insurance-box .insurance-btn img {
  width: 135px;
  height: auto;
  display: block;
}
.insurance-box .insurance-btn:hover {
  opacity: 0.8;
}

/* =======================================================
   5. 講習会・仕事依頼・各種パーツ用スタイル
   ======================================================= */
/* 既存のセクションカード（講習会ページ等） */
.course-card { 
  background: #fdfcf7; 
  border: 1px solid #e2e8f0; 
  padding: 25px; 
  margin-bottom: 25px; 
  border-radius: 6px; 
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03); 
}
.course-card h3 { 
  font-size: 18px; 
  color: #003366; 
  border-left: 5px solid #99c8ff; 
  padding-left: 12px; 
  margin-bottom: 15px; 
  line-height: 1.4; 
}
.course-card p { 
  font-size: 15px; 
  margin-bottom: 12px; 
  text-align: justify; 
}
.course-card p:last-child { 
  margin-bottom: 0; 
}

/* 小見出し（h4）のデザイン */
.main-content h4 {
  font-size: 16px;
  color: #003366;
  margin: 20px 0 8px 0;
  border-bottom: 1px dashed #003366;
  padding-bottom: 3px;
}

/* 写真グリッド */
.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; 
  margin-top: 15px; 
}
.gallery-grid img { 
  border: 1px solid #e2e8f0; 
  border-radius: 4px; 
  width: 100%; 
}

/* 風景写真ボックス */
.scenery-box { 
  background: #fff; 
  border: 1px solid #003366; 
  padding: 15px; 
  border-radius: 4px; 
  text-align: center; 
}
.scenery-box h5 { 
  font-size: 14px; 
  color: #003366; 
  margin-bottom: 15px; 
  font-weight: bold; 
}
.scenery-img-group { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}
.scenery-img-group img { 
  border: 1px solid #cbd5e1; 
  border-radius: 4px; 
  width: 100%; 
  max-width: 230px; 
}

/* テーブル（表）レスポンシブ */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  background: #fff;
}
.table-responsive th, .table-responsive td {
  border: 1px solid #cbd5e1;
  padding: 12px 15px;
  vertical-align: top;
  line-height: 1.6;
}
.table-responsive th {
  background-color: #99c8ff;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.table-responsive td h5 {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin: 0;
}
.table-responsive td p {
  margin-bottom: 8px;
  font-size: 13.5px;
}
.table-responsive td p:last-child {
  margin-bottom: 0;
}

/* インボイス注意書きボックス */
.attention-box {
  background-color: #fff5f5;
  border: 2px solid #ff0033;
  padding: 15px;
  border-radius: 6px;
  margin: 25px 0;
}
.attention-box p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* サイドバー内の白枠案内ボックス */
.section-box { 
  background: #fff; 
  border: 1px solid #ddd; 
  padding: 12px; 
  margin-bottom: 15px; 
  border-radius: 4px; 
}
.section-title { 
  font-size: 15px; 
  font-weight: bold; 
  background: #99c8ff; 
  color: #fff; 
  padding: 5px 10px; 
  margin-bottom: 10px; 
  border-radius: 3px; 
}
.date-text { 
  font-size: 11px; 
  color: #888; 
  text-align: right; 
}

/* =======================================================
   6. 新・サイドナビゲーション & 書類ダウンロード
   ======================================================= */
.side-block-box {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 450px;
}
.side-block-title {
  padding: 12px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
}
.title-green { background-color: #aacc33; }
.title-blue { background-color: #00A0BA; }

.side-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-menu-list li {
  border-bottom: 1px solid #edf2f7;
}
.side-menu-list li:last-child {
  border-bottom: none;
}
.side-menu-list a {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  color: #2b2b2b !important;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  transition: all 0.2s ease;
  background-color: #ffffff;
}
.side-menu-list a::after {
  content: ">";
  position: absolute;
  right: 20px;
  color: #cbd5e1;
  transition: all 0.2s ease;
}
.side-menu-list a:hover {
  background-color: #f8fafc;
  color: #00A0BA !important;
  padding-left: 25px;
}
.side-menu-list a:hover::after {
  color: #00A0BA;
  right: 15px;
}

/* 書類ダウンロードボタン */
.download-btn {
  display: block;
  width: 100%;
  max-width: 450px;
  padding: 14px 15px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-bottom: 10px;
}
.btn-pdf {
  background-color: #f0f9ff;
  color: #00A0BA !important;
  border: 2px solid #00A0BA;
}
.btn-pdf:hover {
  background-color: #00A0BA;
  color: #ffffff !important;
}
.btn-excel {
  background-color: #f4fbf7;
  color: #107c41 !important;
  border: 2px solid #107c41;
}
.btn-excel:hover {
  background-color: #107c41;
  color: #ffffff !important;
}
.btn-word {
  background-color: #f2f6fc;
  color: #1b5ebe !important;
  border: 2px solid #1b5ebe;
}
.btn-word:hover {
  background-color: #1b5ebe;
  color: #ffffff !important;
}

/* =======================================================
   7. 各種特設パーツ（新着・トップデータ・サークル・動画）
   ======================================================= */
/* 新着情報（メイン内） */
#news h3 { 
  font-size: 16px; 
  border-left: 5px solid #99c8ff; 
  padding-left: 8px; 
  margin-bottom: 10px; 
  margin-top: 15px; 
  background: #99c8ff;
  color: #fff;
  padding: 5px;
}
.headline-item { 
  padding: 8px 0; 
  border-bottom: 1px dashed #eee; 
  font-size: 14px; 
}
.headline-item p { margin-bottom: 5px !important; }
.link-color { color: #ff3300; font-weight: bold; }

/* YouTube動画 */
.video-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  margin-bottom: 10px; 
}
.video-container iframe { 
  position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; 
}

/* メイン案内カード */
.main-topic-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.card-green { border: 2px solid #aacc33; }
.card-blue  { border: 2px solid #00A0BA; }
.card-badge {
  position: absolute;
  top: 0; left: 0; padding: 4px 12px; font-size: 11px; font-weight: bold; color: #ffffff;
  border-radius: 0 0 8px 0; z-index: 10;
}
.card-green .card-badge { background-color: #aacc33; }
.card-blue .card-badge { background-color: #00A0BA; }
.card-content-wrapper { display: flex; flex-direction: column; }
@media (min-width: 600px) { .card-content-wrapper { flex-direction: row; } }

.card-photo { flex: 1; background-color: #f8fafc; display: flex; align-items: center; justify-content: center; }
.card-photo img { width: 100%; height: auto; max-height: 220px; object-fit: cover; }
.card-text-zone { flex: 1.3; padding: 25px 20px 20px 20px; }
.card-text-zone h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: bold; }
.card-text-zone p { margin: 0 0 6px 0; font-size: 14px; color: #4a5568; }
.card-text-zone .highlight-p { font-weight: bold; color: #aacc33; margin-bottom: 12px; }
.card-blue .highlight-p { color: #00A0BA; }

/* 人口・会員数データカード */
.top-data-container { display: flex; flex-direction: column; gap: 15px; }
@media (min-width: 650px) {
  .top-data-container { flex-direction: row; }
  .data-card { flex: 1; }
}
.data-card { background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.data-card-title { padding: 10px 15px; font-size: 15px; font-weight: bold; color: #ffffff; text-align: center; }
.card-blue-light { border: 2px solid #00A0BA; }
.card-blue-light .data-card-title { background-color: #00A0BA; }
.card-green-light { border: 2px solid #aacc33; }
.card-green-light .data-card-title { background-color: #aacc33; }
.data-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; position: relative; }
.data-main-val { margin: 0 0 6px 0; font-size: 15px; font-weight: bold; color: #00A0BA; }
.data-main-val strong { font-size: 20px; }
.data-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-left: 15px; font-size: 13px; color: #4a5568; }
.data-text-row { margin: 5px 0 0 0; padding-left: 15px; font-size: 13px; color: #4a5568; }
.data-hr { margin: 12px 0; border: none; border-top: 1px dashed #e2e8f0; }
.recruitment-box { background-color: #f4fbf7; border: 1px solid #a3e635; border-radius: 6px; padding: 8px; text-align: center; margin-top: auto; }
.recruitment-text { margin: 0 0 2px 0; font-size: 13px; font-weight: bold; color: #aacc33; }
.recruitment-sub { margin: 0; font-size: 11px; color: #555; line-height: 1.3; }
.data-date-label { margin: 8px 0 0 0; font-size: 11px; color: #94a3b8; text-align: right; }

/* サークル目次カード */
.circle-grid-container { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 550px) {
  .circle-grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
}
.circle-card {
  background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; text-decoration: none; color: #333333;
  box-shadow: 0 3px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.circle-card:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.circle-card-img { width: 100%; height: 130px; background-color: #f1f5f9; overflow: hidden; }
.circle-card-img img { width: 100%; height: 100%; object-fit: cover; }
.circle-card-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.circle-card-body h4 { margin: 0 0 8px 0; font-size: 15px; font-weight: bold; color: #aacc33; }
.circle-card-body p { margin: 0 0 12px 0; font-size: 12px; line-height: 1.5; color: #4a5568; }
.circle-btn-text { margin-top: auto; font-size: 12px; font-weight: bold; color: #00A0BA; text-align: right; }

/* ホームボタンエリア */
.btn-area { text-align: center; margin: 30px 0 10px 0; }
.btn-home { 
  display: inline-block; background: #333; color: #fff; padding: 10px 35px; text-decoration: none; font-weight: bold; border-radius: 4px; transition: background 0.2s; 
}
.btn-home:hover { background: #555; color: #fff; }

/* =======================================================
   8. スリム版・統合フッター
   ======================================================= */
#footer {
  background-color: #99c8ff;
  color: #ffffff;
  padding: 15px 15px 12px 15px;
  font-family: sans-serif;
  text-align: center;
  margin-top: auto;
  clear: both;
}
#footer #logo {
  margin-bottom: 8px;
}
#footer #logo img {
  background-color: #ffffff;
  padding: 6px 15px;
  border-radius: 6px;
  height: 45px;
  width: auto;
  object-fit: contain;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 0 auto;
}
#adress p { 
  margin-bottom: 5px; 
}
/* PDFダウンロードボタンのモダン化 */
.pdf-download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 8px 10px;
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #dc2626; /* PDFらしい赤系の色 */
  color: #dc2626 !important;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* マウスを乗せたときの動き */
.pdf-download-link:hover {
  background-color: #dc2626;
  color: #ffffff !important;
}

/* PDFのアイコンをテキスト前に擬似配置（簡易版） */
.pdf-download-link::before {
  content: "📄"; /* アイコンフォントの代わりに絵文字で手軽に分かりやすく */
  font-size: 1.1rem;
}

/* =======================================================
   9. 📱 スマートフォン表示最適化（レスポンシブ：画面横幅900px以下）
   ======================================================= */
@media screen and (max-width: 900px) {
  
  /* ── 🎯 トップページ（.top-page-layout）の並び替え完全版 ── */
  .responsive-container.top-page-layout {
    display: flex !important;
    flex-direction: column !important;
  }
  .responsive-container.top-page-layout main.responsive-main {
    width: 100% !important;
    order: 2 !important;
  }
  .responsive-container.top-page-layout aside.responsive-sidebar {
    width: 100% !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .responsive-container.top-page-layout aside.responsive-sidebar .top-member-menu {
    order: 1 !important;
    margin-bottom: 15px !important;
  }
  .responsive-container.top-page-layout aside.responsive-sidebar .top-sidebar-bottom {
    order: 3 !important;
    margin-top: 20px !important;
  }

  /* ── 📱 全ページ共通のスマホ基本設定（トップ以外のページ用安全網） ── */
  .responsive-container:not(.top-page-layout) { 
    padding: 20px 15px !important; 
    display: flex !important;
    flex-direction: column !important; 
    gap: 20px !important; 
  }
  .responsive-container:not(.top-page-layout) .responsive-main,
  .responsive-container:not(.top-page-layout) .responsive-sidebar { 
    width: 100% !important; 
  }

  /* ── 共通レイアウト & 仕事を探すページ用スマホ設定 ── */
  #glb-container { 
    padding: 20px 15px; 
    flex-direction: column; /* スマホのときだけ縦並びにする */
    gap: 20px; 
  }
  .sidebar { 
    width: 100%; 
  }

  /* メニューバーのスマホ折返し */
  #glb_navi {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  #glb_navi div { 
    flex: 1 1 30% !important;
    min-width: 90px !important;
    border-bottom: 1px solid #fdf7fc; 
  }
  
  /* 保険ボックスをスマホで縦並びにする */
  .insurance-box {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .insurance-box .insurance-btn {
    align-self: center;
    margin-top: 5px;
  }
  
  /* 各種パーツ調整（講習会・仕事依頼など） */
  .course-card { padding: 15px; }
  .course-card h3 { font-size: 16px; }
  .course-card p { font-size: 14px; }
  
  .table-responsive table { width: 650px; }
  .table-responsive th, .table-responsive td { padding: 8px 10px; font-size: 13px; }
  
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .scenery-img-group { grid-template-columns: repeat(2, 1fr); display: grid; gap: 10px; }
  .scenery-img-group img { max-width: 100%; }
}