@charset "utf-8";
/* =========================================================
   特定非営利活動法人ｇｌｏｂａｌ 公式サイト
   昔ながらの日本のNPO/NGOサイト風スタイル
   ※色や文言はご自由に変更してください
   ========================================================= */

:root{
  --green:#5b9e4d;        /* メインカラー（緑） */
  --green-dark:#4a8a3f;
  --green-pale:#eef6e9;
  --orange:#f39800;       /* アクセント（オレンジ） */
  --orange-pale:#fff3e0;
  --blue:#16609e;         /* リンク色 */
  --bg:#e9efe6;           /* ページ背景 */
  --line:#cfcfcf;
  --text:#333333;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size:14px;
  line-height:1.8;
}

img{ max-width:100%; height:auto; border:0; vertical-align:bottom; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- 全体の枠 ---- */
.wrapper{
  width:920px;
  max-width:100%;
  margin:0 auto;
  background:#ffffff;
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
}

/* ---- ヘッダー ---- */
header{
  border-top:4px solid var(--green);
  padding:14px 20px 10px;
  border-bottom:1px solid #eee;
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.logo a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.logo-mark{
  display:inline-block;
  width:38px; height:38px; line-height:38px;
  text-align:center;
  background:var(--green);
  color:#fff;
  font-weight:bold;
  font-size:22px;
  border-radius:50%;
  letter-spacing:0;
}
.logo-text{
  font-size:20px;
  font-weight:bold;
  color:#2c2c2c;
}
.logo-sub{
  margin:4px 0 0 48px;
  font-size:12px;
  color:#6a6a6a;
}
.header-right{
  text-align:right;
  font-size:12px;
  color:#666;
  line-height:1.5;
}
.header-right .tel{
  font-size:18px;
  font-weight:bold;
  color:var(--green-dark);
}

/* ---- グローバルナビ ---- */
.gnav{ background:var(--green); }
.gnav ul{
  display:flex;
  margin:0; padding:0;
  list-style:none;
  flex-wrap:wrap;
}
.gnav li{ flex:1 1 auto; border-left:1px solid rgba(255,255,255,.35); }
.gnav li:first-child{ border-left:0; }
.gnav a{
  display:block;
  padding:11px 6px;
  text-align:center;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  white-space:nowrap;
}
.gnav a:hover{ background:var(--green-dark); text-decoration:none; }
.gnav a.current{ background:var(--orange); }

/* ---- メインビジュアル（トップのみ） ---- */
.hero{
  position:relative;
  padding:44px 30px;
  color:#fff;
  background:
     linear-gradient(135deg, rgba(91,158,77,.92), rgba(74,138,63,.92)),
     radial-gradient(circle at 85% 20%, rgba(243,152,0,.55), transparent 45%);
  overflow:hidden;
}
.hero h1{
  margin:0 0 8px;
  font-size:26px;
  font-weight:bold;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hero p{
  margin:0;
  font-size:14px;
  line-height:1.9;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* ---- 本文2カラム ---- */
.container{
  display:flex;
  gap:22px;
  padding:20px 20px 28px;
  align-items:flex-start;
}
.content{ flex:1 1 auto; min-width:0; }
.sidebar{ width:230px; flex:0 0 230px; }

/* ---- パンくず ---- */
.breadcrumb{
  font-size:12px;
  color:#777;
  padding:8px 20px;
  border-bottom:1px dotted var(--line);
  background:#fafafa;
}
.breadcrumb a{ color:#777; }
.breadcrumb span{ color:#333; }

/* ---- 見出し ---- */
h2.midashi{
  margin:6px 0 16px;
  padding:8px 12px;
  font-size:18px;
  color:#33481f;
  background:var(--green-pale);
  border-left:6px solid var(--green);
}
h3.komidashi{
  margin:26px 0 10px;
  padding:4px 0 4px 22px;
  font-size:15px;
  color:var(--green-dark);
  border-bottom:1px dotted var(--green);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><rect x='2' y='3' width='10' height='8' fill='%23f39800'/></svg>") left 4px no-repeat;
}
.content p{ margin:0 0 14px; }

/* ---- お知らせ（新着情報） ---- */
.news{ margin:0 0 8px; }
.news dl{ margin:0; }
.news dt,.news dd{ margin:0; }
.news .item{
  display:flex;
  gap:14px;
  padding:9px 4px;
  border-bottom:1px dotted var(--line);
  font-size:13.5px;
}
.news .date{ flex:0 0 96px; color:#666; }
.news .cat{
  display:inline-block;
  margin-right:8px;
  padding:0 8px;
  font-size:11px;
  color:#fff;
  background:var(--orange);
  border-radius:2px;
  line-height:1.7;
  vertical-align:middle;
}
.news .cat.event{ background:var(--green); }
.news .cat.info{ background:#7aa5c9; }

/* ---- ボタン風リンク ---- */
.morelink{ text-align:right; margin:8px 0 0; font-size:13px; }
.morelink a::before{ content:"» "; color:var(--orange); }

.btn{
  display:inline-block;
  padding:9px 22px;
  background:var(--orange);
  color:#fff !important;
  font-weight:bold;
  border-radius:4px;
  text-decoration:none;
}
.btn:hover{ background:#e08900; text-decoration:none; }

/* ---- トップの活動カード ---- */
.cards{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:6px 0 4px;
}
.card{
  flex:1 1 46%;
  border:1px solid #e2e2e2;
  border-radius:6px;
  padding:14px 16px;
  background:#fcfdfb;
}
.card h4{
  margin:0 0 6px;
  font-size:14px;
  color:var(--green-dark);
}
.card p{ margin:0; font-size:13px; color:#555; }

/* ---- テーブル（団体概要など） ---- */
table.gaiyo{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  margin:6px 0 10px;
}
table.gaiyo th,table.gaiyo td{
  border:1px solid #ddd;
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
table.gaiyo th{
  width:150px;
  background:var(--green-pale);
  color:#33481f;
  font-weight:bold;
  white-space:nowrap;
}

/* ---- リスト ---- */
ul.disc{ margin:6px 0 16px; padding-left:1.4em; }
ul.disc li{ margin:4px 0; }
ul.checklist{ list-style:none; margin:6px 0 16px; padding:0; }
ul.checklist li{ padding:4px 0 4px 22px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M2 8 L6 12 L14 3' stroke='%235b9e4d' stroke-width='2.5' fill='none'/></svg>") left 6px no-repeat; }

/* ---- 注記ボックス ---- */
.note{
  background:var(--orange-pale);
  border:1px solid #f0d9ad;
  border-radius:5px;
  padding:12px 16px;
  font-size:13px;
  color:#7a5a1a;
  margin:8px 0 16px;
}

/* ---- サイドバー ---- */
.side-box{
  border:1px solid #dfe6db;
  border-radius:6px;
  margin:0 0 18px;
  overflow:hidden;
  background:#fff;
}
.side-box h3{
  margin:0;
  padding:8px 12px;
  font-size:14px;
  color:#fff;
  background:var(--green);
}
.side-box .side-body{ padding:12px; font-size:13px; }
.side-menu{ list-style:none; margin:0; padding:0; }
.side-menu li{ border-bottom:1px dotted var(--line); }
.side-menu li:last-child{ border-bottom:0; }
.side-menu a{
  display:block;
  padding:9px 8px 9px 20px;
  color:#333;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='10'><path d='M0 0 L6 5 L0 10 Z' fill='%23f39800'/></svg>") left 12px center no-repeat;
}
.side-menu a:hover{ background-color:var(--green-pale); text-decoration:none; }

.side-contact p{ margin:2px 0; }
.side-contact .tel{ font-size:20px; font-weight:bold; color:var(--green-dark); }

.side-news .item{ padding:7px 0; border-bottom:1px dotted var(--line); font-size:12.5px; }
.side-news .date{ color:#888; display:block; }

/* ---- フッター ---- */
footer{
  clear:both;
  margin-top:6px;
  border-top:4px solid var(--green);
}
.foot-nav{
  background:#f4f7f2;
  padding:12px 20px;
  font-size:12px;
  text-align:center;
  color:#666;
}
.foot-nav a{ color:#555; margin:0 8px; }
.copyright{
  background:var(--green-dark);
  color:#eaf3e6;
  text-align:center;
  padding:12px;
  font-size:12px;
}
.copyright .addr{ display:block; margin-bottom:4px; color:#cfe4c6; }

/* ---- ページトップへ ---- */
.pagetop{ text-align:right; padding:6px 20px 0; font-size:12px; }

/* ---- 編集メモ（公開前に削除OK） ---- */
.editmemo{
  border:1px dashed #c9a44a;
  background:#fffbe9;
  color:#7a5a1a;
  font-size:12px;
  padding:8px 12px;
  border-radius:4px;
  margin:0 0 16px;
}

/* =========================================================
   レスポンシブ（スマホ）
   ========================================================= */
@media screen and (max-width:768px){
  .wrapper{ width:100%; border-left:0; border-right:0; }
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .header-right{ text-align:left; }
  .gnav ul{ flex-direction:column; }
  .gnav li{ flex:1 1 auto; border-left:0; border-top:1px solid rgba(255,255,255,.3); }
  .gnav li:first-child{ border-top:0; }
  .container{ flex-direction:column; padding:16px; }
  .sidebar{ width:100%; flex:1 1 auto; }
  .card{ flex:1 1 100%; }
  .hero{ padding:30px 18px; }
  .hero h1{ font-size:21px; }
  table.gaiyo th{ width:110px; }
}