/* 基本設定 */
:root{
  --page-max: 1100px;   /* ページ最大幅 */
  --sidebar-w: 240px;   /* 左メニューの見え幅（=薄緑帯の幅） */
  --gap: 24px;          /* 余白 */
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", Meiryo, sans-serif;
  background: #f2f7f2; /* 全体の淡い背景色（画像のにごり回避用） */
}

/* ページ全体：2カラム */
.site{
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  min-height: 100vh;
  padding: var(--gap);
  /* 中央カラムを白で敷く（左右が背景色のままになる） */
  background:
    linear-gradient(to right,
      transparent 0, transparent var(--sidebar-w),
      #fff var(--sidebar-w), #fff 100%);
}

/* 左カラム（薄緑帯＋メニュー） */
.sidebar{
  /* 薄緑のタイル画像を縦方向にリピート、幅を調整 */
  background:
    #e9f5e9 url("WebMaterials/ltil02.gif") left top / 440px auto repeat-y;
  /* ↑ 画像幅を「220px」に拡大縮小。必要なら 180px/200px などに調整 */
  padding: 20px 16px;
  border-radius: 12px;
}
.brand{ font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.menu ul{ list-style: none; margin: 12px 0 0; padding: 0; }
.menu li{ margin: 8px 0; }
.menu a{
  color: #064; text-decoration: none; padding: 4px 2px; display: inline-block;
}
.menu a:hover{ text-decoration: underline; }

/* 右カラム（本文） */
.main{
  background: #fff; /* 完全な白地 */
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 24px;
  /* うっすら柄を敷きたい場合は以下をON
  background-image: url("WebMaterials/check3.gif");
  background-repeat: repeat;
  background-size: 16px auto;  /* ← 柄のスケールをここで調整 */
  */
}
.main h1{ margin-top: 0; line-height: 1.35; }
.main h2{ margin-top: 4px; color: #134; }
.main a{ color: #064; }

/* フッターの体裁 */
.footer{ margin-top: 32px; font-size: 0.95rem; color:#333; }
.footer a{ color:#064; }

/* スマホ対応：縦積み＋帯幅を自動縮小 */
@media (max-width: 860px){
  :root{ --sidebar-w: 200px; }
}
@media (max-width: 720px){
  .site{ grid-template-columns: 1fr; }
  .sidebar{ border-radius: 12px; }
  .site{ background: #fff; } /* 狭い画面は全面白に */
}
/* ==== 2025-10-28 spacing tweaks ==== */

/* 1) サイドバーの左インデントを増やす */
.sidebar{
  padding: 24px 18px 24px 46px;  /* 上 右 下 左 */
}

/* クリック範囲と文字のインデントも少し増やす */
.menu a{
  display: block;       /* 行全体をクリック可に */
  padding-left: 6px;    /* 文字の左インデント */
}

/* 2) スマホ幅では控えめに */
@media (max-width: 720px){
  .sidebar{ padding: 20px; }
  .menu a{ padding-left: 4px; }
}

/* 3) 旧ページ用（.Contents-menu を使うページの左詰め回避） */
.Contents-menu{
  padding: 20px 16px 20px 32px !important; /* 左に余白を足す */
  /* 必要に応じて背景も揃える場合は下２行を生かす
  background: #e9f5e9 url("WebMaterials/ltil02.gif") left top / 220px auto repeat-y !important;
  min-height: 100vh;
  */
}

@media (max-width: 720px){
  .Contents-menu{ padding: 20px !important; }
}
.meeting-list{
  margin-top: 1.5em;
}

.meeting-item{
  margin-bottom: 1.5em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid #ddd;
}

.meeting-item p{
  margin: 0;
  line-height: 1.9;
  text-indent: 0;
}
/* ===== award.html 用 ===== */
.award-page p{
  line-height: 1.9;
}

.award-section{
  margin-top: 2.5em;
}

.award-list-title{
  color: #cc33aa;
  margin-bottom: 1.2em;
}

.award-year{
  margin-bottom: 2.2em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid #ddd;
}

.award-year h3{
  color: #2f8f4e;
  margin-bottom: 0.8em;
}

.award-year h4{
  margin: 1em 0 0.4em;
  color: #333;
}

.award-year ul{
  margin: 0.4em 0 0.8em 1.4em;
  padding: 0;
  line-height: 1.9;
}

.award-year li{
  margin-bottom: 0.35em;
}

.note{
  color: #555;
  font-size: 0.95em;
}

.award-certificate{
  margin-top: 1em;
  padding: 1.2em 1.4em;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 8px;
}

/* ===== officer.html 用 ===== */
.officer-page h2{
  margin-bottom: 1.4em;
}

.officer-block{
  margin-top: 1em;
  margin-bottom: 2em;
}

.officer-row{
  display: grid;
  grid-template-columns: 8em 10em 1fr;
  gap: 0.8em;
  align-items: start;
  margin-bottom: 0.45em;
  line-height: 1.9;
}

.officer-row .role{
  font-weight: 600;
  color: #2f8f4e;
}

.officer-row .name{
  white-space: nowrap;
}

.officer-section{
  margin-top: 2em;
  padding-top: 0.8em;
  border-top: 1px solid #ddd;
}

.officer-section h3{
  margin-bottom: 0.8em;
  color: #2f8f4e;
}

.name-list{
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.9;
}

.name-list li{
  margin-bottom: 0.2em;
}

@media (max-width: 720px){
  .officer-row{
    grid-template-columns: 1fr;
    gap: 0.1em;
    margin-bottom: 0.9em;
  }

  .officer-row .role{
    margin-bottom: 0.1em;
  }
}
/* ===== member.html 用 ===== */
.member-list{
  margin-top: 1.5em;
}

.member-item{
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #e0e0e0;
}

.member-item a{
  font-size: 1.1rem;
  font-weight: 600;
  color: #064;
  text-decoration: none;
}

.member-item a:hover{
  text-decoration: underline;
}

.member-item img{
  margin-top: 0.6em;
  max-width: 260px;
}

.member-page .note{
  margin-top: 2em;
  font-size: 0.95em;
  color: #555;
}

/* ===== rule.html 用 ===== */
.rule-page h2{
  margin-bottom: 1.4em;
}

.rule-block{
  margin-top: 1em;
}

.rule-block p{
  line-height: 1.95;
  margin: 0 0 1.2em 0;
  text-indent: 0;
}

.rule-sub{
  margin-left: 1.5em;
}

.rule-note{
  margin-top: 2em;
  font-weight: 600;
}