/* =================================================================
  1. Reset & Global Styles
================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  background-color: #ffffff;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.8;
}

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

ul, ol {
  list-style: none;
}

/* 共通共通インナーコンテナ設定 */
.container-1200 {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

.container-1000 {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

.text-center {
  text-align: center;
}

/* タイル基本コンポーネント */
.en-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #007b70; /* カンプのベースグリーン色に調整してください */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.en-title.light {
  color: #ffffff;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
  color: #111111;
}
.section-title.light {
  color: #ffffff;
}
@media (max-width: 1260px) {
.pc-only{
	display: none;
}
}

.sp-only{
	display: none;
}

@media (max-width: 500px) {
.sp-only{
	display: block;
}
}

/* =================================================================
  2. Header
================================================================== */
/* --- Header Styles --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* カンプのゆったりした高さに調整 */
  background-color: #ffffff;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
  width: 100%;
  height: 100%;
  padding-left: 40px; /* 左側の余白 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo .logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.05em;
}

/* ヘッダー右側の要素をまとめるブロック */
.header-right-block {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-nav {
  margin-right: 40px;
}

@media (max-width: 1279px) {
  .header-nav {
    display: none;
  }
}

.nav-list {
  display: flex;
  gap: 32px;
}

.nav-list a {
  font-size: 13px;
  font-weight: 500;
  color: #111111;
}

/* お問い合わせボタン（エリア一体が深緑） */
.btn-contact-header {
  background-color: #005D4D; /* カンプのブランドグリーン */
  color: #ffffff;
  height: 100%;
  padding: 0 35px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
}

/* メニュー（ハンバーガー）ボタン */
.menu-trigger {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 88px;
  /*border-left: 1px solid #eeeeee;  ボタンの区切り線 */
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 28px;
}

.hamburger-lines span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #005D4D; /* 線の色もグリーン系 */
}

.menu-trigger-text {
  font-size: 10px;
  font-weight: 700;
  color: #005D4D;
  letter-spacing: 0.05em;
}



/* =================================================================
  3. Hero Section
================================================================== */
/* --- Hero Section Styles --- */
.hero-section {
  padding-top: 80px;
  height: 320px; /* 画面いっぱいに広げる場合。固定なら 700px などに調整 */
  background-image: url('../images/slide01.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.hero-catchphrase {
  color: #ffffff;
}

.hero-catchphrase h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.hero-lead {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  opacity: 0.95;
}

/* =================================================================
  4. News Section
================================================================== 
.news-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.news-flex {
  display: flex;
  gap: 80px;
}

.news-section .section-title-area {
  flex: 0 0 240px;
}

.news-section .section-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin-top: 4px;
  margin-bottom: 32px;
  letter-spacing: 0.05em;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  border-bottom: 2px solid #111111;
  padding-bottom: 6px;
  transition: all 0.3s ease;
}
.view-all:hover {
  opacity: 0.7;
  gap: 12px;
}


.news-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.news-item {
  width: 100%;
}

.news-link {
  display: flex;
  align-items: center;
  padding: 24px 32px;
  background-color: #f7faf9;
  border-radius: 4px;
  position: relative;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.news-link:hover {
  background-color: #eff4f2;
  opacity: 1;
}


.news-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 250px;
  flex-shrink: 0;
}

.news-meta time {
  font-size: 15px;
  font-weight: 700;
  color: #007b70;
  letter-spacing: 0.02em;
}

/* カテゴリーバッジの共通設定 
.category-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  display: inline-block;
}


.label-notice {
  background-color: #007b70;
}


.label-report {
  background-color: #009688;
}


.news-item-title {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  flex: 1;
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.news-arrow {
  color: #007b70;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.news-link:hover .news-arrow {
  transform: translateX(4px);
}*/
/* =================================================================
  4. News Section
================================================================== */
.news-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.news-flex {
  display: flex;
  gap: 80px;
}

.news-section .section-title-area {
  flex: 0 0 300px;
}

.news-section .section-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin-top: 4px;
  margin-bottom: 42px;
  letter-spacing: 0.05em;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  border-bottom: 2px solid #111111;
  padding-bottom: 6px;
  transition: all 0.3s ease;
}
.view-all:hover {
  opacity: 0.7;
  gap: 12px;
}

/* ニュースリスト全体のコンテナ */
.news-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item {
  width: 100%;
}

.news-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 60px 24px 32px;
  background-color: #f8f9f9;
  border-radius: 4px;
  position: relative;
  transition: background-color 0.3s ease;
}

.news-link:hover {
  background-color: #eff4f2;
  opacity: 1;
}

/* 日付とカテゴリーのブロック（ここは横並びのまま） */
.news-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  width: auto; /* 幅を固定せず、コンテンツに合わせる */
  flex-shrink: 0;
}

.news-meta time {
  font-size: 14px;
  font-weight: 700;
  color: #007b70;
  letter-spacing: 0.01em;
}

/* カテゴリーバッジ */
.category-label {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  display: inline-block;
}

.label-notice {
  background-color: #005D4D;
}

.label-report {
  background-color: #009688;
}


/* 記事タイトル（メタ情報の下に来る） */
.news-item-title {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  line-height: 1.5;
  width: 100%;
  xwhite-space: nowrap;
  xoverflow: hidden;
  xtext-overflow: ellipsis;
}

/* ★右端の矢印：
  position: absolute を使い、カード全体の「右端・上下中央」にピタッと固定します。
*/
.news-arrow {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%); /* 上下中央揃えの定番テクニック */
  color: #007b70;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.news-link:hover .news-arrow {
  /* ホバー時は上下中央を維持したまま、少し右にピコッと動く */
  transform: translate(4px, -50%);
}

/* =================================================================
  9. Responsive Styles (スマホ対応も最適化)
================================================================== */
@media (max-width: 1180px) {
  .news-section .section-title-area {
  	flex: 0 0 200px;
  }
}

@media (max-width: 992px) {
  .news-flex {
    flex-direction: column;
    gap: 40px;
  }
  .news-section .section-title-area {
    flex: none;
  }
}

@media (max-width: 768px) {
	.news-section {
	padding: 50px 0;
	}
	.news-section .section-title {
		font-size: 28px;
	}
  .news-link {
    padding: 20px 48px 20px 20px; /* スマホ用に余白を少しタイトに */
    gap: 8px;
  }
  .news-meta {
    gap: 12px;
  }
  .news-item-title {
    white-space: normal; /* スマホでは長文を折り返す */
    font-size: 15px;
  }
  .news-arrow {
    right: 20px; /* 矢印の位置もスマホ用に調整 */
  }
}


/* =================================================================
  5. Information Section
================================================================== */
.info-section {
  padding: 100px 0;
  background-color: #005D4D; /* カンプの美しいブランドグリーン（Newsの label-notice と統一） */
}

/*.info-intro {
  margin-bottom: 56px;
}*/

.info-section .en-title.light {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}

.info-section .section-title.light {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
}

.info-desc {
  color: #ffffff;
  max-width: 860px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.5;
  font-weight: 400;
  text-align: left; /* 長文テキストは左寄せがカンプに近くなります */
}

/* ホワイトボックス（中央のカード型コンテナ） */
.info-card {
  background-color: #ffffff;
  padding: 56px 64px; /* カンプのゆったりした余白感を再現 */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 柔らかな影 */
}

.info-card .card-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: #111111;
  letter-spacing: 0.02em;
}

.info-card .card-desc {
  text-align: left;
  font-size: 15px;
  color: #333333;
  margin-bottom: 40px;
}

/* リンクボタンのコンテナ */
.card-links {
  display: flex;
  flex-direction: column;
  gap: 16px; /* ボタン同士の隙間 */
}

/* 各リンクボタンのスタイル */
.card-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background-color: #ffffff;
  border: 2px solid #007b70;
  border-radius: 6px;
  color: #222222;
  transition: all 0.3s ease;
}

.card-link-item:hover {
  background-color: #f7faf9;
  border-color: #005D4D;
  opacity: 1; /* 全体hoverの不透明度変化を打ち消し */
}

.card-link-item .link-text {
  font-size: 16px;
  font-weight: 700; /* カンプの太字感を再現 */
  color: #222222;
}

/* 右端の斜め上矢印アイコン */
.card-link-item .link-icon {
  color: #007b70;
  font-size: 16px;
  transition: transform 0.3s ease;
}

/* ホバーした時にアイコンが右上へ少し飛び出すようなアニメーション */
.card-link-item:hover .link-icon {
  transform: translate(3px, -3px);
}

/* =================================================================
  9. Responsive Styles (Informationセクション用追記)
================================================================== */
@media (max-width: 768px) {
  .info-section {
    padding: 70px 0;
  }
  .info-section .section-title.light {
    font-size: 24px;
	text-align: left;
  }
  .info-desc {
    font-size: 14px;
  }
  .info-card {
    padding: 32px 24px;
  }
  .info-card .card-title {
    font-size: 18px;
  }
  .card-link-item {
    padding: 16px 20px;
  }
  .card-link-item .link-text {
    font-size: 14px;
    padding-right: 12px;
  }
}

/* =================================================================
  6. Project / Association共通レイアウト
================================================================== */
.project-section, .association-section {
  padding: 120px 0;
  position: relative;
  background-color: #f8f9f9;
  overflow: hidden;
}

/* 2つのセクションの間に境界線、かつ片方の背景をわずかに変える、あるいは方眼紙風パターンを載せる設定 */
.project-section::before, .association-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* カンプに見られる薄い方眼・グリッド模様をCSSの軽量な線グラデーションで再現 */
  background-image: 
    linear-gradient(rgba(0, 123, 112, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 123, 112, 0.015) 1px, transparent 1px);
  background-size: 40px 40px; /* 方眼の細かさ */
  pointer-events: none;
  z-index: 1;
}

.association-section {
  padding: 120px 0;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}

/* レイアウト：左にタイトル、右にコンテンツのGrid */
.project-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 400px 1fr; /* 左側のタイトル幅をしっかり確保 */
  gap: 100px;
  align-items: flex-start;
}

/* タイトルエリアの装飾 */
.project-header {
  position: relative;
}

.project-header .section-title {
  font-size:24px;
}

.en-sub-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #007b70;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-main-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
  letter-spacing: 0.03em;
}

/* 右側コンテンツエリア */

.project-body{
  border-top: 1px solid #bbbbbb;
  padding-top: 30px;
  max-width: 700px;
}
.project-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 60px;
  max-width: 700px;
}

/* ボタンの2カラム配置 */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* ボタン同士の間隔をカンプに合わせて最適化 */
}

/* カンプを完全に再現したアウトラインボタン */
.outline-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 32px; /* カンプのゆったりとしたボタンの上下幅 */
  background-color: #ffffff;
  border: 2px solid #007b70;
  border-radius: 6px;
  color: #333333;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 123, 112, 0.02);
  font-weight: 600;
}

.outline-btn .btn-text {
  font-size: 16px;
  font-weight: 700; /* カンプの力強いフォントウェイト */
  color: #007b70;
  transition: color 0.3s ease;
}

.outline-btn .btn-icon {
  font-size: 16px;
  color: #007b70;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ホバーエフェクト：背景がブランドカラーで満たされ、文字が白反転、矢印が右にスムーズにスライド */
.outline-btn:hover {
  background-color: #005D4D;
  border-color: #005D4D;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 123, 112, 0.15);
  opacity: 1; /* グローバルhoverを打ち消し */
}

.outline-btn:hover .btn-text,
.outline-btn:hover .btn-icon {
  color: #ffffff; /* 文字とアイコンを白に反転 */
}

.outline-btn:hover .btn-icon {
  transform: translateX(6px); /* 矢印が右にすっと逃げる動き */
}

/* =================================================================
  9. Responsive Styles (Project/Association用のレスポンシブ上書き)
================================================================== */
@media (max-width: 1260px) {
	.project-grid {
	grid-template-columns: 300px 1fr; /* 左側のタイトル幅をしっかり確保 */
	gap: 100px;
	}
}

@media (max-width: 992px) {
  .project-grid {
    grid-template-columns: 1fr; /* タブレット以下では縦並び */
    gap: 32px;
  }
  .project-section, .association-section {
    padding: 80px 0;
  }
  .section-main-title {
    font-size: 24px;
  }
  .project-body{
	max-width: 100%;
	}
}

@media (max-width: 768px) {
  .button-grid {
    grid-template-columns: 1fr; /* スマホではボタンを1カラム（1列縦並び）に */
    gap: 12px;
  }
  .outline-btn {
    padding: 18px 24px;
  }
  .outline-btn .btn-text {
    font-size: 14px;
  }
}

/* =================================================================
  7. CTA (Contact) Section
================================================================== */
.cta-section {
  padding: 80px 0;
  background-color: #f8f9f9;
}

/*.cta-box {
  background-color: #007b70;
  padding: 56px 40px;
  border-radius: 6px;
  text-align: center;
  color: #ffffff;
}*/

.cta-box {
  /* ★ 1. 背景色を透明にして、グラデーションマスクと画像を重ねて指定する */
  background-image: 
    linear-gradient(rgba(0, 93, 77, 0.75) 0 100%),
    url('../images/slide02.webp'); /* ※ここに表示させたい画像のパスを入力してください */
  
  /* ★ 2. 画像がボックスのサイズに合わせて綺麗に収まるように調整する */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 既存のレイアウト維持用の記述（そのまま残す） */
  padding: 56px 40px;
  border-radius: 6px;
  text-align: center;
  color: #ffffff;
}

.cta-box .en-title.light {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.cta-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.cta-info-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}

.cta-address {
  font-size: 14px;
  font-weight: 400;
}

.cta-phone-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.phone-link i {
  font-size: 28px;
}

/* =================================================================
  8. Footer
================================================================== */
.site-footer {
  background-color: #f8f9f9;
  padding: 0px 0 30px 0;
  /*border-top: 1px solid #eeeeee;*/
  font-size: 14px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* 左側：テキスト情報 */
.footer-left {
  flex: 1;
}

.footer-logo {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.footer-address {
  color: #333333;
  margin-bottom: 6px;
}

.footer-map a {
  color: #333333;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  border-bottom: 1px solid #333333;
  padding-bottom: 2px;
}

.footer-contact-num {
  margin-top: 16px;
  color: #333333;
  line-height: 1.6;
}

/* 右側：ナビゲーション */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-nav-list {
  display: flex;
  gap: 24px; /* カンプ通りの横並び */
  margin-bottom: 20px;
}

.footer-nav-list a {
  color: #111111;
  font-weight: 500;
}

.footer-sub-link a {
  color: #333333;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* コピーライト（中央配置） */
.copyright {
  text-align: center;
  color: #444444;
  font-size: 10px;
  /*border-top: 1px solid #eeeeee;*/
  padding-top: 24px;
  width: 100%;
}



/* =================================================================
  9. Responsive Styles (レスポンシブ用の最適化)
================================================================== */
@media (max-width: 992px) {
  .footer-inner {
    flex-direction: column;
    gap: 40px;
  }
  .footer-right {
    display: none;
  }
  .footer-nav-list {
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .cta-title {
    font-size: 24px;
  }
  .phone-link {
    font-size: 28px;
  }
  .phone-link i {
    font-size: 22px;
  }
}

/* =================================================================
  9. Responsive Styles (Tab / Mobile)
================================================================== */
@media (max-width: 992px) {
  /* ヘッダーナビ非表示、ハンバーガー有効化の準備 */
  .header-nav {
    display: none;
  }
  /*.menu-trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }
  .menu-trigger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #111111;
  }
  .menu-trigger-text {
    font-size: 10px;
    font-weight: 700;
  }*/

  /* News */
  .news-flex {
    flex-direction: column;
    gap: 32px;
  }
  .news-section .section-title-area {
    flex: none;
  }

  /* Project / Association */
  .project-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 360px;
  }
  .hero-catchphrase h1 {
    font-size: 5vw;
  }
  
  /*.news-meta {
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .news-item a {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }*/
  
  .button-grid {
    grid-template-columns: 1fr;
  }
  .header-inner{
	padding-left: 20px;
  }
  .btn-contact-header{
	display: none;
  }
  .header-logo .logo-text{
	font-size: 16px;
  }
}




/* =================================================================
  10. Drawer Menu (ハンバーガーメニュー展開後の重なり・スクロール修正)
================================================================== */
/* 通常時は「閉じる」のテキストを非表示にする */
.menu-trigger .text-close {
  display: none;
}

/* メニュー展開時（is-active時）、ボタンを緑の背景より上の最前面に引き上げる（超重要） */
.menu-trigger.is-active {
  position: relative;
  z-index: 1002; /* ドロワーメニュー（z-index: 999）より確実に上に配置 */
  /*border-left: 1px solid rgba(255, 255, 255, 0.2);  開いた時の境界線を白っぽく */
}

/* 開いた時、メニューボタン（MENU）の2本線を白に変更してクロス（×）させる */
.menu-trigger.is-active .hamburger-lines span {
  background-color: #ffffff !important;
}
.menu-trigger.is-active .hamburger-lines span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.menu-trigger.is-active .hamburger-lines span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* 開いた時に文字を「メニュー」から「閉じる」に切り替えて白くする */
.menu-trigger.is-active .text-open {
  display: none; /* 「メニュー」を消す */
}
.menu-trigger.is-active .text-close {
  display: block !important; /* 「閉じる」を表示 */
  color: #ffffff !important; /* 文字色を白に */
}


/* --- ドロワーメニュー本体の設定 --- */
.drawer-menu {
  position: fixed;
  top: 0;
  right: -100%; /* 初期状態は隠す */
  width: 550px;
  min-width: 440px;
  height: 100vh;
  overflow-y: auto;
  background-color: #005D4D;
  z-index: 999; /* ボタン（1002）より下に潜り込ませる */
  padding: 100px 40px 40px 60px;
  transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.drawer-menu.is-active {
  right: 0;
}

/* 縦幅スクロール対応：中身全体を包むコンテナ */
.drawer-scroll-content {
  height: 100%;
  overflow-y: auto; /* 縦幅に収まらない場合にスクロール可能にする */
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* スクロールバーのカスタマイズ（極細・半透明） */
.drawer-scroll-content::-webkit-scrollbar {
  width: 6px;
}
.drawer-scroll-content::-webkit-scrollbar-track {
  background: transparent;
}
.drawer-scroll-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* ナビゲーションリスト */
.drawer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 40px;
}
.drawer-nav-list a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* 子メニュー（字下げ） */
.drawer-sub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 20px;
  padding-left: 20px;
}
.drawer-sub-list a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

/* 下段：連絡先エリア */
.drawer-footer-area {
  margin-top: auto;
  color: #ffffff;
  padding-top: 30px;
  padding-bottom: 20px;
}
.drawer-association-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.drawer-phone-row {
  margin-bottom: 30px;
}
.drawer-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
}
.drawer-privacy-row {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
}
.drawer-privacy-link {
  color: #ffffff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 768px) {
  .menu-trigger {
    background: #005D4D;
	width: 80px;
	padding: 0 10px;
  }

  .hamburger-lines span{
	background-color: #fff;
  }
  .menu-trigger-text{
	color: #ffffff;
  }
}  

/* レスポンシブ（スマホ用） */
@media (max-width: 576px) {
  .drawer-menu {
    width: 100%;
    min-width: 100%;
    padding: 110px 20px 20px 30px;
  }
  .drawer-nav-list { gap: 20px; }
  .drawer-nav-item .main-link { font-size: 18px; }
  .drawer-sub-list { gap: 10px; margin-top: 10px; }
  .drawer-sub-list a { font-size: 14px; }
  .drawer-phone-number { font-size: 24px; }
}

/* =================================================================
  11. Drawer Overlay (メニュー展開時の背景暗転マスク)
================================================================== */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* ★黒の60%の透明度（カンプの好みに合わせて0.4〜0.7で調整してください） */
  z-index: 998; /* ★ドロワーメニュー(999)のすぐ下、通常コンテンツより上の重ね順に設定 */
  
  /* 初期状態（メニューが閉じている時）は完全に非表示にしておく */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* メニューのスライド速度と合わせる */
}

/* ★★メニューが開いた時（is-active）にふわっと浮き上がらせる設定 */
.drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}




/* =================================================================
  11. Sub Page Common Styles (下層ページ共通・ひな形スタイル)
================================================================== */
.sub-page-main {
  padding-top: 80px;
  background-color: #ffffff;
}

/* 下層共通ページヘッダー */
.sub-page-header {
  background-color: #005d4d; /* 記憶した指定色：深みのあるブランドグリーン */
  padding: 60px 0;
  text-align: left;
}

.sub-header-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-header-en {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sub-header-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  margin: 0;
}

/* パンくずリスト */
.breadcrumb-area {
  background-color: #f8f9f9;
  padding: 16px 0;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 60px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666666;
}

.breadcrumb-list li a {
  color: #005D4D;
  transition: opacity 0.3s;
}
.breadcrumb-list li a:hover {
  opacity: 0.7;
}

/* 階層の区切りマーク（ > ） */
.breadcrumb-list li:not(:last-child)::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  color: #ccc;
}

.breadcrumb-list li span {
  color: #333333;
  font-weight: 500;
}

.padding-bottom-100 {
  padding-bottom: 100px;
}

/* =================================================================
  12. News Archive List (お知らせアーカイブページ固有スタイル)
================================================================== */
.archive-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #eef3f1; /* リスト最上部の区切り線 */
}

.archive-item {
  width: 100%;
  border-bottom: 1px solid #eef3f1; /* 項目ごとの区切り線 */
}

.archive-link {
  display: flex;
  align-items: center; /* カンプ通り縦中央で揃える */
  gap: 40px;
  padding: 28px 40px 28px 10px; /* 右側は矢印を考慮、左は綺麗に整列 */
  position: relative;
  transition: background-color 0.3s ease;
}
.archive-link:hover {
  background-color: #fcfdfe;
  opacity: 1;
}

/* 日付とラベルのセットブロック */
.archive-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0; /* 画面が狭くなっても絶対に潰さない */
  width: 220px; /* 日付とラベルの位置を綺麗に縦に揃えるための固定幅 */
}

.archive-meta time {
  font-size: 15px;
  font-weight: 700;
  color: #005D4D;
  letter-spacing: 0.05em;
}

/* お知らせタイトル（はみ出し自動「…」省略対応版） */
.archive-item-title {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  line-height: 1.5;
  margin: 0;
  
  /* トップページ同様、親枠をはみ出さない安全対策 */
  flex: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* 文字数がカンプからはみ出た場合の３点セット */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右端の矢印アイコン */
.archive-arrow {
  color: #005D4D;
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.archive-link:hover .archive-arrow {
  transform: translateX(4px);
}

/* =================================================================
  13. Pagination (ページネーション)
================================================================== */
.pagination-area {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ページボタンの基本スタイル（WordPressの標準出力クラスに対応） */
.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #444444;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.page-numbers:hover {
  border-color: #005D4D;
  color: #005D4D;
  opacity: 1;
}

/* 現在アクティブなページ（カンプの反転色） */
.page-numbers.current {
  background-color: #005D4D;
  border-color: #005D4D;
  color: #ffffff;
}

/* 「>」などの次へ矢印調整 */
.page-numbers.next {
  font-size: 12px;
}

/* =================================================================
  セカンドページ用レスポンシブ (タブレット・スマホ)
================================================================== */
@media (max-width: 768px) {
  .sub-page-header {
    padding: 40px 0;
  }
  .sub-header-title {
    font-size: 24px;
  }
  .breadcrumb-area {
    margin-bottom: 40px;
  }
  
  /* スマホ環境では横並びだと崩れるため縦並びに切り替え */
  .archive-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 40px 20px 10px;
  }
  .archive-meta {
    width: 100%;
    gap: 16px;
  }
  .archive-item-title {
    font-size: 15px;
    white-space: normal; /* スマホでは「…」にせず折り返して全文章を読ませる */
  }
  .archive-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .archive-link:hover .archive-arrow {
    transform: translate(4px, -50%);
  }
  
  .pagination-area {
    margin-top: 40px;
  }
  .page-numbers {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}



/* =================================================================
  大区画化等加速化支援事業について
================================================================== */

.project-top{
	padding: 80px 0;
}

.project-third{
	padding: 80px 0 0 0;
}

.project-top p, .project-second p, .project-third p {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 60px;
}

#s-cont04 .card-link-item{
	margin-bottom: 10px;
}

.sub-content-h2-gradient {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  margin-bottom: 20px;
  position: relative;
}

/* 疑似要素を使って2色のラインを表現 */
.sub-content-h2-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  /* 左側100pxだけブランドカラー、そこから右は薄いグレーにする指定 */
  background: linear-gradient(to right, #005D4D 100px, #e2e8f0 100px);
}

.sub-content-h3-dot {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding-bottom: 8px;
  border-bottom: 2px dashed #005D4D; /* 点線（dashed）でブランドカラーを指定 */
  margin-top: 40px; /* 上のコンテンツとの間隔 */
  margin-bottom: 20px;
}

.sub-content-h3-square {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 12px; /* 四角と文字の間の隙間 */
  margin-top: 40px;
  margin-bottom: 20px;
}

/* 文字の前に小さな正方形を出現させる */
.sub-content-h3-square::before {
  content: "";
  width: 100%;
  max-width: 10px; /* 10px × 10px の正方形 */
  height: 10px;
  background-color: #005D4D;
  border-radius: 1px; /* ほんの少しだけ角を丸める */
  flex-shrink: 0;
}

.about-subtext{
  margin-bottom: 20px;
}

.sub-content-body ul{
  margin-bottom: 60px;
}

.sub-content-body ul li{
  line-height: 2;
}

.flow-picture{
  display: block;
  margin-bottom: 20px;
}

.flow-picture img{
  width: 100%;
  max-width: 580px;
}

/* =================================================================
  15. Download Table Styles (書類ダウンロード一覧表・2列版)
================================================================== */
.download-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  margin-bottom: 40px;
  background-color: #ffffff;
  font-size: 15px;
}

/* ヘッダー行 */
.download-table th {
  background-color: #9c9c9c; /* 確定したブランドの深緑 */
  color: #ffffff;
  font-weight: 700;
  padding: 16px 20px;
  text-align: center;
  border: 1px solid #c3cdda;
}

/* ★2列構成に合わせて横幅の比率を最適化（内容を80%に広げました） */
.download-table th.col-content { width: 80%; }
.download-table th.col-download{ width: 20%; min-width: 230px; text-align: center; }

/* テーブルのデータ行 */
.download-table td {
  padding: 20px;
  border: 1px solid #c3cdda;
  color: #444444;
  vertical-align: middle;
}

.download-table tbody tr {
  transition: background-color 0.3s ease;
}
.download-table tbody tr:hover {
  background-color: #f8faf9;
}

/* 内容エリア（アイコンとリンクの横並び） */
.content-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.content-text {
  font-weight: 500;
}

/* --- ファイル別アイコンカラー設定 --- */
.pdf-icon {
  color: #e53e3e; /* PDF：赤 */
  font-size: 18px;
  flex-shrink: 0;
}
.word-icon {
  color: #2b579a; /* Word：青 */
  font-size: 18px;
  flex-shrink: 0;
}
.excel-icon {
  color: #107c41; /* Excel：緑 */
  font-size: 18px;
  flex-shrink: 0;
}

/* 書類名リンク */
.content-link {
  color: #222222;
  font-weight: 500;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}
.content-link:hover {
  color: #005D4D;
  border-bottom-color: #005D4D;
  opacity: 1;
}

/* ダウンロードボタンのセル調整 */
.download-table td:last-child {
  text-align: center;
}

/* ダウンロードボタン本体 */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #005D4D;
  border: 1px solid #005D4D;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 160px;
}

.download-btn:hover {
  background-color: #005D4D;
  color: #ffffff;
}

/* =================================================================
  ダウンロードテーブル用レスポンス（スマホ対応・2列版）
================================================================== */
@media (max-width: 768px) {
  .download-table, 
  .download-table thead, 
  .download-table tbody, 
  .download-table tr, 
  .download-table th, 
  .download-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .download-table thead {
    display: none; /* スマホ時はヘッダー非表示 */
  }
  
  .download-table tr {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  
  .download-table td {
    border: none;
    padding: 4px 0;
  }
  
  /* 書類名エリアの余白調整 */
  .download-table td:first-child {
    padding-bottom: 12px;
  }
  
  /* ボタンエリアの余白調整 */
  .download-table td:last-child {
    text-align: left;
    padding-top: 8px;
  }
  .download-btn {
    max-width: 100%;
    padding: 12px;
  }
}


/* =================================================================
  16. Single Article Styles (お知らせ・個別記事詳細用)
================================================================== */
.single-article-entry {
  width: 100%;
  background-color: #ffffff;
  padding-top: 20px;
}

/* 記事上部のメタエリア（日付とカテゴリの横並び） */
.article-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.article-date {
  font-size: 16px;
  font-weight: 500;
  color: #005D4D; /* 協議会のブランドイメージに統一 */
  letter-spacing: 0.05em;
}

/* 記事メインタイトル */
.single-article-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 48px;
  letter-spacing: 0.02em;
}

/* 本文エリアの段落調整 */
.article-main-content {
  font-size: 16px;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.article-main-content p {
  margin-bottom: 24px;
}
.article-main-content p:last-child {
  margin-bottom: 0;
}

/* ＝ 下部：すべての記事一覧に戻るボタン ＝ */
.article-footer-nav {
  margin-top: 64px;
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.btn-back-to-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #222222;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 0;
  width: 100%;
  max-width: 240px;
  position: relative;
  transition: color 0.3s ease;
}

/* 画像に再現されている、ボタンの下にある「細いシャープなライン」 */
.btn-back-to-list::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #222222;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* 戻るボタンの矢印アイコン（左に少し動くアニメーション） */
.btn-back-to-list i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* マウスホバー時のリッチなエフェクト設定 */
.btn-back-to-list:hover {
  color: #005D4D; /* ブランドの深緑に変化 */
}
.btn-back-to-list:hover::after {
  background-color: #005D4D;
}
.btn-back-to-list:hover i {
  transform: translateX(-4px); /* 左矢印がスッと左にスライドする */
}

/* =================================================================
  個別記事詳細用レスポンシブ (スマホ表示の最適化)
================================================================== */
@media (max-width: 768px) {
  .single-article-title {
    font-size: 24px; /* スマホ画面に合わせてタイトルを適切な大きさに */
    margin-bottom: 32px;
  }
  
  .article-main-content {
    font-size: 15px; /* テキストを読みやすいサイズに微調整 */
    line-height: 1.7;
  }
  
  .article-footer-nav {
    margin-top: 48px;
    padding-top: 32px;
  }
  
  .btn-back-to-list {
    font-size: 14px;
    max-width: 100%; /* スマホでは横いっぱいにフラットに配置 */
  }
}

/* =================================================================
  17. Association Member Table Styles (会員・役員一覧表)
================================================================== */
/* 💡スマホ版で横スクロールを発生させるための外枠コンテナ */
.custom-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS（iPhone）でのスクロールを滑らかにする */
  margin-top: 24px;
  margin-bottom: 40px;
}

.association-member-table {
  width: 100%;
  min-width: 720px; /* ★ここが最重要！スマホで潰れないよう最低横幅を確保し、これ以下になると自動でスクロールします */
  border-collapse: collapse;
  background-color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
}

/* 一番上の見出し行 */
.association-member-table th {
  background-color: #f8f9f9; /* すっきりした明るい薄グレー */
  color: #005D4D; /* 確定したブランドカラーの深緑を文字に採用 */
  font-weight: 700;
  padding: 16px 20px;
  text-align: center;
  border-top: 3px solid #005D4D; /* 表の最上部を深緑ラインで引き締める */
  border-bottom: 2px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

/* 各列の横幅の比率を美しく固定 */
.association-member-table th:nth-child(1) { width: 35%; } /* 会員名 */
.association-member-table th:nth-child(2) { width: 15%; } /* 協議会役職 */
.association-member-table th:nth-child(3) { width: 50%; } /* 所属組織・職名 */

/* データ行（各セル）の設定 */
.association-member-table td {
  padding: 16px 20px;
  border: 1px solid #e2e8f0; /* 横方向の薄い区切り線 */
  color: #333333;
  vertical-align: middle; /* 上下中央揃え */
}

/* 1行おきに、うっすら背景にグレーを敷いて可読性を高める（ゼブラデザイン） */
.association-member-table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

/* 行にマウスを乗せたときのアニメーション */
.association-member-table tbody tr {
  transition: background-color 0.2s ease;
}
.association-member-table tbody tr:hover {
  background-color: #f1f5f4; /* ホバー時はブランドトーンの薄い緑グレーに */
}

/* =================================================================
  会員・役員一覧表用レスポンシブ (スマホ表示の最適化)
================================================================== */
@media (max-width: 768px) {
  .association-member-table th,
  .association-member-table td {
    padding: 12px 14px; /* スマホ画面では余白を少しだけコンパクトにして情報を凝縮 */
    font-size: 14px;
  }
}