/* assets/css/style.css - 一般社団法人 全日本警心協会 公式サイト */

/* Google Fonts - 日本語フォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");

/* 可変フォント（Dusseldot）の定義 */
@font-face {
  font-family: "Dusseldot";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2")
      format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2")
      format("woff2-variations");
  font-display: swap;
  font-weight: 50 250;
}
@font-face {
  font-family: "BigShoulders-Ex";
  src: url("../../assets/font/webfonts/BigShoulders-ExtraBold.ttf"),
    format("tftruetype");
}

@font-face {
  font-family: 'Noto Serif JP Custom'; 
  src: url('../font/webfonts/NotoSerifJP-SemiBold.ttf') format('truetype');
  font-weight: 600; 
  font-style: normal;
}

/*
 * 明朝体フォントを適用するためのスタイル
 */
.minchored {
  font-family: 'Noto Serif JP Custom', "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.1em;
  color: var(--accent-color);
}

.mincho {
  font-family: 'Noto Serif JP Custom', "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.1em;
}

.b-ex {
  font-family: "BigShoulders-Ex";
}

.sp {
  display: none;
}
.pc {
  display: block;
}
@media (max-width: 768px) {
  /* モバイルメニューの表示 */
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

a {
  text-decoration: none;
}

/* CSS変数（カスタムプロパティ）の定義 */
:root {
  /* カラーパレット */
  --primary-color: #212121; /* メイン色: 黒 */
  --text-color: #212121; /* テキスト色: メイン色と同じ黒 */
  --text-light: #6e6e73; /* 明るいテキスト色: そのまま */
  --text-white: #ffffff; /* 白いテキスト色: 白 */
  --bg-color: #ffffff; /* 背景色: 白 */
  --bg-light: #f3f4f5; /* 明るい背景色: グレー */
  --bg-dark: #212121; /* 暗い背景色: メイン色と同じ黒 */
  --bg-red: #d00b0c; /* 暗い背景色: メイン色と同じ黒 */
  --accent-color: #d00b0c; /* アクセント色: 赤 */
  --border-color: #d2d2d7; /* ボーダー色: そのまま */

  /* シャドウ効果 */
  --shadow-sm: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
  --shadow-md: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.16);

  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, #990000 0%, #c7051f 100%);

  /* トランジション */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* フォントサイズ（rem単位での基準設定） */
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-base: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.4rem;
  --font-size-3xl: 3.2rem;
  --font-size-4xl: 4.8rem;

  /* スペーシング */
  --spacing-xs: 0.8rem;
  --spacing-sm: 1.6rem;
  --spacing-md: 2.4rem;
  --spacing-lg: 3.2rem;
  --spacing-xl: 4.8rem;
  --spacing-2xl: 6.4rem;
}

/* リセットCSS */
* {
  box-sizing: border-box;
}

/* HTMLの基本設定（レスポンシブの基準となる1rem = 10px設定） */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
}

/* ボディの基本スタイル */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  font-size: var(--font-size-base);
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 480px) {
  main {
    margin-top: 0px;
  }
}

/*
 * ヘッダーのスクロール時のスタイル修正
 */
.global-header {
  transition: background-color 0.3s ease-in-out;
}

/* スクロール前のヘッダーのスタイル */
.global-header:not(.scrolled) {
  /* .scrolledクラスがない時 */
  background-color: transparent;
}
.global-header:not(.scrolled) .global-nav a,
.global-header:not(.scrolled) .header-title {
  color: #fff !important;
}

/* スクロール後のヘッダーのスタイル */
.global-header.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.global-header.scrolled .global-nav a,
.global-header.scrolled .header-title {
  color: #000 !important;
}

/*
 * ヘッダーのロゴの隣の組織名のスタイル
 */
.header-title {
  font-size: 2.2rem; /* ナビゲーションより少し大きめに */
  font-weight: 700;
  color: var(--text-color); /* 色を明確に */
  margin-left: 0.5rem; /* ロゴとの間に余白を確保 */
  cursor: default; /* カーソルをデフォルトにしてクリックできないことを示す */
  text-decoration: none; /* 下線を削除 */
}
@media (max-width: 480px) {
  .header-title {
  font-size: 1.5rem !important;
}
}

/* ホバー時のスタイルも削除 */
.header-title:hover {
  color: var(--text-color); /* ホバーしても色が変わらないように */
  text-decoration: none;
}

/* ロゴとタイトルをまとめるためのFlexboxコンテナ */
.logo-and-title {
  display: flex;
  align-items: center;
}

/* ===================================================================
   グローバルヘッダー & ナビゲーション [最終確定版]
   =================================================================== */

/* --- ヘッダー基本設定 --- */
.global-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: transparent !important; /* 透明を最優先 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* スクロール後のヘッダー (common.jsの50pxスクロールで制御) */
.global-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2.2rem;
  position: relative;
  height: 60px;
}

/* --- ロゴと協会名 --- */
.logo-and-title { display: flex; align-items: center; z-index: 2; }
.logo-image { height: 36px; width: auto; display: block; }
.header-title { font-size: 2.2rem; font-weight: 700; margin-left: 1rem; transition: color 0.4s ease; }

/* --- PC用ナビゲーション --- */
.global-nav { display: block; }
.global-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 3rem; }
.global-nav a { text-decoration: none; font-size: var(--font-size-sm); font-weight: 400; padding: 0.8rem 0; position: relative; transition: color 0.4s ease; }
.global-nav a:hover { color: var(--accent-color); }
.global-nav a::after { content: ""; position: absolute; bottom: -0.4rem; left: 0; width: 0; height: 0.2rem; background: var(--accent-color); transition: width 0.3s ease; }
.global-nav a:hover::after { width: 100%; }

/* --- ヘッダーの文字色と線の色制御 --- */
.global-header:not(.scrolled) .header-title,
.global-header:not(.scrolled) .global-nav a,
.global-header:not(.scrolled) .mobile-menu-toggle .line {
  color: #fff;
  stroke: #fff !important;
}
.global-header.scrolled .header-title,
.global-header.scrolled .global-nav a,
.global-header.scrolled .mobile-menu-toggle .line {
  color: #000;
  stroke: #000 !important;
}

/* --- ハンバーガーメニューボタン --- */
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; z-index: 10001; padding: 0; }
.hamburger-menu { height: 5.2rem; width: 5.2rem; position: relative; cursor: pointer; }
.hamburger-menu svg { height: 5.2rem; width: 5.2rem; position: absolute; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hamburger-menu .burger { opacity: 1; transform: scale(1); }
.hamburger-menu .x { opacity: 0; transform: scale(0); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.hamburger-menu .line { fill: none; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50%; transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms; }
.hamburger-menu .x .line { stroke-width: 2px; }
.hamburger-menu .line2 { stroke-dasharray: 40 200; }
.hamburger-menu .line3 { stroke-dasharray: 40 179; }
.mobile-menu-toggle.active .hamburger-menu .burger { opacity: 0; transform: scale(0); }
.mobile-menu-toggle.active .hamburger-menu .x { opacity: 1; transform: scale(1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.mobile-menu-toggle.active .line { transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms; }
.mobile-menu-toggle.active .line1 { transform: scale(0, 1); transition: transform 500ms 100ms; }
.mobile-menu-toggle.active .line2 { stroke-dasharray: 5px 200; stroke-dashoffset: -164px; }
.mobile-menu-toggle.active .line3 { stroke-dasharray: 5px 179; stroke-dashoffset: -142px; }
.global-nav ul .sp-contact-button { display: none; }

/* ===================================================================
   タブレット & スマートフォン表示 (1024px以下)
   =================================================================== */
@media (max-width: 1024px) {
  .header-container { height: 54px; padding: 0 1.6rem; }
  .global-nav ul, .contact-button.pc { display: none; }

  .header-title.pc {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
  }
  
  .mobile-menu-toggle { display: block !important; }

  .global-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: var(--gradient-primary) !important;
    padding: 8rem 3rem 4rem;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    box-shadow: 0.2rem 0 2rem rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }
  .global-nav.active { left: 0; }
  .global-nav.active ul { display: block; text-align: left; }
  .global-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .global-nav a { display: block; padding: 2rem 0; font-size: var(--font-size-base); font-weight: 500; color: #fff !important; border-bottom: none; }
  .global-nav a:hover { color: rgba(255, 255, 255, 0.8) !important; }
  .global-nav a::after { display: none; }

  .global-nav ul .sp-contact-button { display: block; margin-top: 20px; border: none; }
  .sp-contact-button a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px !important;
    background: transparent;
    border: 1px solid #fff;
    color: #fff !important;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .sp-contact-button a:hover { background-color: #fff; color: var(--accent-color) !important; }
  body.menu-open { overflow: hidden; position: fixed; width: 100%; }
}


/* フッター */
.global-footer {
  background-color: #000000;
  color: #fff;
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.footer-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: var(--spacing-2xl);
}

.footer-section h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #a1a1a6;
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

/* LINEボタン */
.line-links {
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
  text-align: center;
}

.line-button {
  display: inline-block;
  background: linear-gradient(135deg, #00b900 0%, #009600 100%);
  color: #fff;
  padding: 1.4rem 2.4rem;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.line-button:hover {
  transform: translateY(-0.2rem);
  box-shadow: var(--shadow-md);
}

/* フッターナビゲーション */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 1.2rem;
}

.footer-nav a {
  color: #d2d2d7;
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition);
}

.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

/* フッターバナー */
.footer-banner img {
  width: 100%;
  max-width: 28rem;
  transition: var(--transition);
}

/* フッター下部 */
.footer-bottom {
  text-align: center;
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid #424245;
  font-size: 1.2rem;
  color: #a1a1a6;
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

/* 共通コンポーネント */
.section {
  width: 100%;
  padding: 12rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* セクション背景色バリエーション */
.section-dark {
  background-color: var(--bg-dark);
  color: #fff;
}

.section-offwhite {
  background-color: var(--bg-light);
}

/* セクション背景色バリエーション */
.section-dark {
  background-color: var(--bg-dark);
  color: #fff;
}

/* セクション背景色バリエーション */
.section-red {
  background-color: var(--bg-red);
  color: #ffffff;
}

/* コンテナ */
.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2.2rem;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 見出し */
.headline {
  font-size: clamp(2rem, 1.5179rem + 2.5714vw, 3.125rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  text-align: center;
}

/* サブ見出し */
.sub-headline {
  font-size: clamp(1.375rem, 1.1071rem + 1.4286vw, 2rem);
  margin-top: var(--spacing-md);
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  color: #212121;
}

.section-dark .sub-headline {
  color: #a1a1a6;
}

/*
 * 新しいボタンのスタイル
 * 通常時：赤背景/白文字、ホバー時：赤枠白背景/赤文字
 */
.btn-accent {
  display: inline-block;
  padding: 1.6rem 3.2rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-accent--fill {
  background-color: var(--accent-color);
  color: var(--text-white);
  border: 2px solid var(--accent-color); /* ボーダーを追加 */
}

.btn-accent--fill:hover {
  background-color: var(--bg-color); /* 背景を白に */
  color: var(--accent-color); /* 文字を赤に */
  box-shadow: var(--shadow-md); /* ホバー時に影を追加 */
}

/*
 * 既存のボタンクラスに新しいスタイルを適用
 */
.contact-button,
.cta-button,
.link {
  /* <-- linkクラスも追加 */
  display: inline-block;
  padding: 1rem 3.2rem !important;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 通常時 */
.contact-button,
.cta-button,
.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--btn-py) var(--btn-px);
    color: #fff; /* 初期の色を白に設定 */
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    max-width: 100%;
    /* 角の丸みをなくし、真四角にします */
    border-radius: 0;
    /* 背景のグラデーションを定義します */
    background: linear-gradient(to left, var(--accent-color, #d00b0c) 50%, #fff 50%);
    /* グラデーションのサイズを200%に設定します */
    background-size: 200% 100%;
    /* 初期位置を右端に設定します */
    background-position: right center;
    /* ボーダーを定義します */
    border: 2px solid var(--accent-color, #d00b0c);
    /* 背景、色、ボーダーのトランジションを滑らかに設定します */
    transition: all 0.4s ease;
}

/* ホバー時 */
.contact-button:hover,
.cta-button:hover,
.link:hover {
  /* <-- linkクラスも追加 */
  background-color: var(--bg-color);
  color: var(--accent-color);
  box-shadow: var(--shadow-md);
      /* 背景グラデーションの位置を左端に動かします */
    background-position: left center;
    /* ホバー時にボーダーの色を赤に設定します */
    border-color: var(--accent-color, #d00b0c);
}

.link:hover .link-text {
    color: var(--accent-color, #d00b0c);
}


/*
 * `link`クラスのアイコン（`i`タグ）のスタイルを調整
 */
.link i {
  margin-left: 8px; /* テキストとアイコンの間に余白を追加 */
}

.link:hover i {
  color: var(--accent-color); /* ホバー時にアイコンの色も変更 */
}

/* アニメーション要素 */
.animated-item {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.animated-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*
 * スクロールテキストの基本スタイル
 * 親要素に `scrolling-section` クラスを、子要素に `scrolling-text` クラスを付与します。
 */
.scrolling-section {
  position: relative;
  overflow: hidden;
}

.scrolling-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(100%);
  white-space: nowrap;
  font-size: 8em; /* テキストのサイズを大きく設定 */
  font-weight: 700;
  animation: scrollText 30s linear infinite; /* アニメーションを適用 */
  pointer-events: none; /* テキストがクリックされないようにする */
  z-index: 0;
}

/*
 * アニメーションの定義
 * テキストを右端から左端へ移動させます。
 */
@keyframes scrollText {
  0% {
    transform: translateY(-50%) translateX(100%);
  }
  100% {
    transform: translateY(-50%) translateX(-100%);
  }
}

/*
 * 【色のパターン】
 * セクションの背景色に合わせてスクロールテキストの色を変更
 */
/* 背景が暗い（黒など）セクション用 */
.scrolling-section--dark .scrolling-text {
  color: rgba(255, 255, 255, 0.1); /* 白を薄く */
}

/* 背景が明るい（白など）セクション用 */
.scrolling-section--light .scrolling-text {
  color: rgba(33, 33, 33, 0.1); /* 黒を薄く */
}

/* 背景がグレーのセクション用 */
.scrolling-section--gray .scrolling-text {
  color: rgba(33, 33, 33, 0.1); /* 黒を薄く */
}



/*
 * 既存のコンテンツが背景テキストより手前に表示されるように調整
 * 該当するセクション内のコンテンツに適用
 */
.scrolling-section .container,
.scrolling-section .content {
  position: relative;
  z-index: 1;
}

/* 画像ズームコンテナ */
.image-zoom-container {
  overflow: hidden;
  margin-bottom: 4rem;
  box-shadow: var(--shadow-md);
}

.section-image {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.1);
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.is-visible .section-image {
  transform: scale(1);
}

/* ヒーローセクション（動画背景付き） */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ヒーロー動画 */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
}

/* ヒーローオーバーレイ */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 透明度40%の黒いオーバーレイ */
  z-index: 0;
}

/* ヒーローコンテンツ */
.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 20px;
}

/* ヒーローロゴ */
.hero-logo {
  opacity: 0;
  transform: translateY(3rem);
  margin-bottom: 3vh;
}

.hero-logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.logo-main {
  width: 100%;
  max-width: 38rem;
  height: auto;
  filter: drop-shadow(0 0.8rem 3.2rem rgba(0, 0, 0, 0.5));
  transition: var(--transition);
}

/* ヒーローボタン */
.hero-buttons {
  margin-top: 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-slideshow .cta-button {
  background: transparent;
  color: #fff;
  border: 0.2rem solid #fff;
  padding: 1.6rem 3.6rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  min-width: 20rem;
  letter-spacing: 0.05rem;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  transition: all 0.3s ease;
  margin: 0;
}

.hero-slideshow .cta-button:hover {
  background: #fff;
  color: #000;
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
}

/* ヒーロー見出し */
.hero-headline-animated {
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2vh;
  color: #fff;
  text-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.5);
}

.hero-headline-animated .char {
  opacity: 0;
  letter-spacing: 0.3em;
}

/*
 * ヒーローセクションのスタイル
 */
.hero-headline-animated .mincho .sub-headline {
    letter-spacing: 0.2em;
    line-height: 1.3;
    font-family: 'Noto Serif JP Custom', 'Noto Serif JP', serif;
}

.sub-headline {
  text-align: center;
  margin-top: 20px;
  color: #212121;
  opacity: 0.8;
}

.hero-tagline {
  text-align: center;
  color: #ffffff;
  opacity: 0.4 !important;
  

  
  /* hero-tagline 自身にはマージンを適用しない */
  margin-top: 0; 
  
  position: relative;
  z-index: 2;
}

.hero-slideshow .sub-headline {
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 4vh;
  font-weight: 400;
  line-height: 1.6;
  max-width: 65rem;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5);
}

.hero-slideshow .animated-item {
  opacity: 0;
}

/* 動画スタイル */
.promo-video {
  width: 100%;
  max-width: 100rem;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

/* レイアウトコンポーネント */
.two-column-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
  align-items: start;
}

.column {
  text-align: left;
}

.column h3 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.column p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-light);
  margin-top: var(--spacing-sm);
}

/* アニメーション文字 */
.animated-paragraph .char {
  opacity: 0;
  display: inline-block;
}

.animated-headline .char {
  display: inline-block;
  opacity: 0;
}

/* ページ専用スタイル */
.page-hero {
  padding: 18rem 0 12rem;
  background: var(--bg-light);
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

/* 背景画像付きヒーローセクション */
.page-hero-with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.page-hero-with-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.page-hero-with-bg .container {
  position: relative;
  z-index: 2;
}

.page-hero-with-bg .headline {
  color: #fff;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5);
}

.page-hero-with-bg .sub-headline {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5);
}

/* リーダーシップグリッド */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 4rem;
  margin-top: var(--spacing-2xl);
}

/* メンバーカード */
.member-card {
  background: #fff;
  padding: 4rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  text-align: center;
}

.member-card .member-image {
  /* 画像をブロック要素にして自動マージンで中央揃え */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.member-card:hover {
  transform: translateY(-0.8rem);
  box-shadow: var(--shadow-lg);
}

.member-card img {
  margin-bottom: 2.4rem;
  object-fit: cover;
  border: 0.4rem solid var(--bg-light);
}

.member-card h3 {
  font-size: 2.4rem;
  margin: 0 0 0.8rem 0;
  font-weight: 700;
}

.member-card .title {
  color: var(--accent-color);
  margin-bottom: 1.6rem;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.member-card p {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-light);
}

/* お問い合わせフォーム */
.contact-form {
  max-width: 70rem;
  margin: 8rem auto 0;
  text-align: left;
  background: #fff;
  padding: 6rem;
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: 3.2rem;
}

.form-group input {
  width: 100%;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--text-color);
  font-size: var(--font-size-base);
}

.form-control {
  width: 100%;
  padding: 1.6rem 2rem;
  border: 0.2rem solid var(--border-color);
  font-size: var(--font-size-base);
  transition: var(--transition);
  font-family: inherit;
  background: #fff;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.4rem rgba(0, 113, 227, 0.1);
  transform: scale(1.02);
}

textarea.form-control {
  min-height: 12rem;
  resize: vertical;
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  appearance: none; /* ブラウザのデフォルト矢印を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 4rem; /* 矢印用スペース */
}

.select-wrapper::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.2rem;
  color: #555;
}

/* 送信ボタン */
.submit-button {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  padding: 1.8rem 4rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.submit-button:hover {
  transform: translateY(-0.2rem);
  box-shadow: var(--shadow-md);
}

.submit-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-button:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* 料金テーブル */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4rem;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pricing-table th,
.pricing-table td {
  padding: 2rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.pricing-table th {
  background: var(--bg-light);
  font-weight: 600;
  color: var(--text-color);
}

.pricing-table tr:last-child td {
  border-bottom: none;
}

/* アイコン画像サイズ */
.icon-image {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.8rem;
}

.icon-image-large {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  margin-bottom: 1.6rem;
}

.icon-image-xlarge {
  width: 6.4rem;
  height: 6.4rem;
  object-fit: contain;
  margin-bottom: 2rem;
}

/* フィールドエラースタイル */
.field-error {
  animation: shake 0.5s ease-in-out;
  border-color: #dc3545 !important;
}

.error-message {
  color: #dc3545;
  font-size: 1.4rem;
  margin-top: 0.5rem;
}

/* キーフレームアニメーション */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-0.5rem);
  }

  75% {
    transform: translateX(0.5rem);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 警心協会専用スタイル */
.association-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3rem;
  margin-top: 6rem;
  text-align: center;
}

.association-grid-item {
  padding: 3rem 2rem;
}

.association-item-title {
  color: var(--accent-color);
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
}

.association-item-text {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* ユーティリティクラス */
.text-center {
  text-align: center;
}

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

.mt-4 {
  margin-top: 4rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * 警心協会概要のスタイル
 */
.about-section {
  background-color: #000;
  color: #fff;
  padding: 80px 0;
}

.about-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.about-left {
  flex: 1;
  text-align: left;
}

.about-right {
  flex-shrink: 0;
}

.about-logo {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* 関連プロジェクトのバナーのスタイル */
.related-project-banner {
  padding-top: 40px; /* テキストとバナーの間に余白 */
  text-align: center;
}

.related-project-banner h2 {
  text-align: left;
}

.project-heading {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/*
 * メディアクエリ
 */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column; /* 縦並びに変更 */
  }

  .about-left,
  .about-right {
    text-align: center;
  }

  .related-project-banner h2 {
    text-align: center;
  }
  .related-project-banner img {
    text-align: center;
    margin: 0 auto;
  }
}

/*
 * 結成の真意のスタイル
 */
.purpose-section {
  background-color: var(--accent-color); /* 背景色を赤に */
  color: #fff;
  padding: 80px 0;
}

.purpose-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.purpose-left,
.purpose-right {
  flex: 1;
}

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

.purpose-right {
  text-align: left;
}

.purpose-image {
  width: 100%;
  max-width: 500px; /* 画像の最大幅を調整 */
  height: auto;
  border-radius: 10px; /* 角丸を適用 */
}

.purpose-title {
  margin-bottom: 20px;
}

/*
 * メディアクエリ
 */
@media (max-width: 768px) {
  .purpose-content {
    flex-direction: column; /* 縦並びに変更 */
  }

  .purpose-right {
    text-align: center; /* 中央寄せに */
  }
}

/* 組織概要テーブル */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table tr:first-child {
  padding-top: 20px;
}
.responsive-table tr:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.responsive-table th,
.responsive-table td {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.responsive-table th {
  font-weight: 600;
  background: var(--bg-light);
}

.responsive-table td:first-child {
  font-weight: 600;
  color: var(--accent-color);
  width: 30%;
  padding-left: 50px;
}

@media (max-width: 600px) {
  .responsive-table th,
  .responsive-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .responsive-table tr {
    display: block;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
  }

  .responsive-table th {
    background: none;
    border: none;
    padding-bottom: 5px;
  }

  .responsive-table td {
    border: none;
    padding-top: 0;
  }

  .responsive-table td:first-child {
    padding-left: 20px;
  }
}

/* ====================================================
   ABOUT PAGE SPECIFIC STYLES - 競合回避版
   ==================================================== */



/* About ページでのみシャドウを削除 */
body.about-page .member-card,
body.about-page .organization-card,
body.about-page .responsive-table {
  box-shadow: none !important;
  border: 1px solid #e5e7eb;
}

/* ロゴ中央配置（About専用） */

.about-logo-center {
  text-align: center; /* ロゴを中央に配置します */
}

.about-logo-center img {
  max-width: 220px; /* この数値を小さくしてサイズを調整します */
  height: auto;
}

/* About ページの背景画像明度調整 */
body.about-page .page-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* About ページの役職タグ */
.about-role-tag {
  display: inline-block;
  background: #d00b0c;
  color: white;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
  min-width: 80px;
}

/* About ページのメンバーカード（既存クラス上書き） */
body.about-page .leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 60px;
}

@media (max-width: 1000px) {
  body.about-page .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  body.about-page .leadership-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

body.about-page .member-card {
  background: #fff;
  padding: 25px;
  text-align: left;
  border: 1px solid #e5e7eb;
  transition: none;
  box-shadow: none !important;
}

body.about-page .member-card:hover {
  transform: none;
  box-shadow: none !important;
}

body.about-page .member-card img {
  width: 50%;
  object-fit: cover;
  border: none;
}

body.about-page .member-card h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #212121;
}

body.about-page .member-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 8px 0 0 0;
}

/* About ページのその他役員セクション */
.about-other-members-section {
  margin-top: 80px;
}

.about-other-members-title {
  text-align: center;
  color: #d00b0c;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 700;
}

.about-other-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .about-other-members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .about-other-members-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.about-other-member-card {
  background: #fff;
  padding: 20px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.about-other-member-card h4 {
  color: #d00b0c;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

.about-other-member-card .about-member-name {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
  color: #212121;
}

.about-other-member-card .about-member-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* About ページの提携組織 */
.about-partner-organizations {
  margin-top: 60px;
}

.about-organization-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 40px;
}

.about-organization-header {
  background: linear-gradient(135deg, #990000 0%, #d00b0c 100%);
  color: #fff;
  padding: 30px;
}

.about-organization-header h3 {
  margin: 0;
  font-size: 24px;
}

.about-organization-body {
  padding: 40px;
}

.about-organization-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.about-organization-member h4 {
  color: #d00b0c;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}

.about-organization-member p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* About ページの組織概要テーブル */
body.about-page .responsive-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: none !important;
  border: 1px solid #e5e7eb;
}

body.about-page .responsive-table th,
body.about-page .responsive-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

body.about-page .responsive-table td:first-child {
  font-weight: 600;
  color: #d00b0c;
  width: 25%;
}

body.about-page .responsive-table tr:first-child td {
  padding-top: 20px;
}

body.about-page .responsive-table tr:last-child td {
  border-bottom: none;
}

/* About ページのモバイル対応 */
@media (max-width: 768px) {
  .about-logo-center {
    margin: 30px 0;
  }

  .about-logo-center img {
    max-width: 250px;
  }

  .about-other-members-section {
    margin-top: 60px;
  }

  .about-other-members-title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .about-partner-organizations {
    margin-top: 40px;
  }

  .about-organization-header {
    padding: 20px;
  }

  .about-organization-header h3 {
    font-size: 20px;
  }

  .about-organization-body {
    padding: 30px 20px;
  }

  .about-organization-members {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  body.about-page .member-card {
    padding: 20px;
  }
  .about-other-member-card {
    padding: 15px;
  }

  .about-organization-body {
    padding: 20px 15px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ローディング状態 */
.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 0.2rem solid #fff;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

/* モバイル対応（768px以下） */
@media (max-width: 768px) {

  /* モバイル用レイアウト調整 */
  .header-container {
    padding: 0rem 2rem;
  }

  .logo-image {
    height: 3.2rem;
  }

  .container {
    padding: 0 2rem;
  }

  .section {
    padding: 6rem 0;
  }

  .headline {
    margin-bottom: 1.6rem;
  }

  .sub-headline {
    margin-top: 1.6rem;
    margin-bottom: 2.4rem;
  }

  .contact-form {
    padding: 4rem 3rem;
    margin-top: 4rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 2rem;
  }

  .global-footer {
    padding: 6rem 0 2rem;
    margin-top: 8rem;
  }

  .two-column-layout {
    grid-template-columns: 1fr;
    margin-top: 4rem;
    gap: 3rem;
  }

  .leadership-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
  }

  .member-card {
    padding: 3rem 2rem;
  }

  .page-hero {
    padding: 14rem 0 8rem;
  }

  .cta-button {
    display: block;
    text-align: center;
    margin: 2rem auto;
    max-width: 28rem;
    padding: 1.4rem 2.8rem;
    font-size: var(--font-size-sm);
  }

  .hero-slideshow .cta-button {
    min-width: auto;
    width: 100%;
    max-width: 25rem;
    margin: 0.8rem 0;
  }

  .association-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .association-grid-item {
    padding: 2rem 1.5rem;
  }
}
/* スマートフォン対応（480px以下） */
@media (max-width: 480px) {
  .logo-main {
    width: 100%;
    max-width: 28rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1.6rem;
  }

  .header-container {
    padding: 0rem 1.6rem;
  }

  .contact-form {
    padding: 3rem 2rem;
  }

  .member-card {
    padding: 2.4rem 1.6rem;
  }

  .footer-container {
    padding: 0 1.6rem;
  }

  .section {
    padding: 4rem 0;
  }

  .headline {
    margin-bottom: 1.2rem;
  }

  .sub-headline {
    margin-top: 1.2rem;
    margin-bottom: 2rem;
  }

  .cta-button {
    padding: 1.2rem 2.4rem;
    font-size: 1.3rem;
    max-width: 24rem;
  }

  .form-control {
    padding: 1.4rem 1.6rem;
    font-size: var(--font-size-sm);
  }

  .pricing-table th,
  .pricing-table td {
    padding: 1.2rem;
    font-size: var(--font-size-sm);
  }

  .icon-image {
    width: 2rem;
    height: 2rem;
    margin-right: 0.6rem;
  }

  .icon-image-large {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.2rem;
  }

  .icon-image-xlarge {
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 1.6rem;
  }

  .hero-slideshow .cta-button {
    padding: 1.2rem 2.4rem;
    font-size: var(--font-size-sm);
  }

  .two-column-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .association-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .association-grid-item {
    padding: 2rem;
  }

  .association-item-title {
    font-size: 1.6rem;
  }

  .association-item-text {
    font-size: 1.3rem;
  }
}

/* 非常に小さな画面（390px以下） */

@media (max-width: 480px) {
  .logo-main {
    width: 100%;
    max-width: 24rem;
  }
}

@media (max-width: 390px) {
  .container {
    padding: 0 1.2rem;
  }

  .cta-button {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    max-width: 20rem;
  }

  .contact-form {
    padding: 2rem 1.5rem;
  }

  .member-card {
    padding: 2rem 1.2rem;
  }
}

/* アクセシビリティ：動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 印刷用スタイル */
@media print {
  .global-header,
  .global-footer,
  .cta-button,
  .mobile-menu-toggle {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .section-dark {
    background: white !important;
    color: black !important;
  }

  .section-dark * {
    color: black !important;
  }
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
  :root {
    --text-color: #000000;
    --text-light: #333333;
    --bg-color: #ffffff;
    --bg-light: #f0f0f0;
    --border-color: #000000;
    --accent-color: #0000ff;
  }

  .form-control {
    border-width: 0.2rem;
  }

  .cta-button,
  .submit-button {
    border: 0.2rem solid #000000;
  }
}

/* --- サービスセクション --- */
.services-section {
  padding: 60px 0 120px 0 !important;
  margin: 0 !important;
}

.services-section .container {
  padding-top: 0 !important;
}

/* --- サービスセクション --- */
.services-section {
  padding: 60px 0 120px 0 !important;
  margin: 0 !important;
}

.services-section .container {
  padding-top: 0 !important;
}

/* --- 結成の真意セクション --- */
.founding-mission-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 80vh;
  color: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.founding-mission-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/index/founding_mission_bg.png");
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.founding-mission-section .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

.founding-mission-section .headline {
  text-align: left;
  margin-bottom: 40px;
  color: #fff;
}

.founding-mission-content {
  width: 90%;
  max-width: 700px;
  text-align: left;
  margin: 60px 0 0 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .founding-mission-section {
    background-position: center right;
    min-height: 60vh;
  }

  .founding-mission-section::before {
    filter: brightness(0.4);
  }

  .founding-mission-section .headline {
    text-align: center;
    margin-bottom: 30px;
  }

  .founding-mission-content {
    margin: 60px auto 0;
  }
}

@media (max-width: 480px) {
  .founding-mission-section {
    background-position: 70% center;
    min-height: 50vh;
  }
}

/* --- Utility Classes --- */
.text-center {
  text-align: center;
}

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

.mt-4 {
  margin-top: 2rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- スクロールアニメーション --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-slide-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-slide-left.animate {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-slide-right {
  opacity: 0;
  transform: translateX(100px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-slide-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-scale.animate {
  opacity: 1;
  transform: scale(1);
}

.scroll-animate-3d {
  opacity: 0;
  transform: translateY(100px) rotateX(15deg);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-3d.animate {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* 遅延アニメーション */
.scroll-animate-delay-1 {
  transition-delay: 0.1s;
}

.scroll-animate-delay-2 {
  transition-delay: 0.2s;
}

.scroll-animate-delay-3 {
  transition-delay: 0.3s;
}

.scroll-animate-delay-4 {
  transition-delay: 0.4s;
}

.scroll-animate-delay-5 {
  transition-delay: 0.5s;
}

/* ヒーローセクション背景アニメーション */
.hero-slideshow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(0, 113, 227, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(0, 113, 227, 0.05) 0%,
      transparent 50%
    );
  animation: bgPulse 8s ease-in-out infinite;
  z-index: 1;
}

@keyframes bgPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.member-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button {
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transition: left 0.4s ease;
  z-index: 0;
}

.cta-button:hover::before {
  left: 0;
}

.cta-button {
  z-index: 1;
}

/* セクション背景効果 */
.section-dark {
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 70%,
      rgba(0, 113, 227, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 30%,
      rgba(0, 113, 227, 0.03) 0%,
      transparent 50%
    );
  animation: darkBgPulse 10s ease-in-out infinite;
  z-index: 0;
}

.section-dark > * {
  position: relative;
  z-index: 1;
}

@keyframes darkBgPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* フォームフィールドアニメーション */
.form-control {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
}

/* プライシングテーブルアニメーション */
.pricing-table tr {
  transition: background-color 0.3s ease;
}

.pricing-table tr:hover {
  background-color: rgba(0, 113, 227, 0.02);
}

/* アイコン画像のアニメーション */
.icon-image,
.icon-image-large,
.icon-image-xlarge {
  transition: transform 0.3s ease;
}

/* フッターのホバー効果 */
.footer-banner {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-banner:hover {
  transform: scale(1.05);
}

/* パララックス効果 */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- Utility Classes --- */
.text-center {
  text-align: center;
}

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

.mt-4 {
  margin-top: 2rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * 警心協会概要のスタイル
 */
.about-section {
  background-color: #000;
  color: #fff;
  padding: 80px 0;
}

.about-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.about-left {
  flex: 1;
  text-align: left;
}

.about-right {
  flex-shrink: 0;
}

.about-logo {
  width: 70%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

/* 関連プロジェクトのバナーのスタイル */
.related-project-banner {
  padding-top: 40px; /* テキストとバナーの間に余白 */
  text-align: center;
}

.project-heading {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.project-link {
  /* ホバーエフェクトのためtransitionを追加 */
  transition: opacity 0.3s ease;
}

.project-link:hover {
  opacity: 0.8; /* ホバー時に画像を少し透過させる */
}

.project-image {
  width: 250px; /* 画像のサイズを調整 */
  height: auto;
}

/*
 * メディアクエリ
 */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column; /* 縦並びに変更 */
  }

  .about-left,
  .about-right {
    text-align: center;
  }
}

/*
 * 結成の真意のスタイル
 */
.purpose-section {
  background-color: var(--accent-color); /* 背景色を赤に */
  color: #fff;
  padding: 80px 0;
}

.purpose-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.purpose-left,
.purpose-right {
  flex: 1;
}

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

.purpose-right {
  text-align: left;
}

.purpose-image {
  width: 100%;
  max-width: 500px; /* 画像の最大幅を調整 */
  height: auto;
  border-radius: 10px; /* 角丸を適用 */
}

.purpose-title {
  margin-bottom: 20px;
}

/*
 * メディアクエリ
 */
@media (max-width: 768px) {
  .purpose-content {
    flex-direction: column; /* 縦並びに変更 */
  }

  .purpose-right {
    text-align: center; /* 中央寄せに */
  }
}

/* 組織概要テーブル */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table tr:first-child {
  padding-top: 20px;
}
.responsive-table tr:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.responsive-table th,
.responsive-table td {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.responsive-table th {
  font-weight: 600;
  background: var(--bg-light);
}

.responsive-table td:first-child {
  font-weight: 600;
  color: var(--accent-color);
  width: 30%;
  padding-left: 50px;
}

@media (max-width: 600px) {
  .responsive-table th,
  .responsive-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .responsive-table tr {
    display: block;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
  }

  .responsive-table th {
    background: none;
    border: none;
    padding-bottom: 5px;
  }

  .responsive-table td {
    border: none;
    padding-top: 0;
  }

  .responsive-table td:first-child {
    padding-left: 20px;
  }
}

/* =========================================================
   OVERRIDES / ADDITIONS (Aug 2025)
   - Palette reaffirmation
   - Remove rounded corners & shadows
   - Buttons (red solid -> outline on hover)
   - Section eyebrow (Big Shoulders)
   - Scrolling background text per section
   - Service tag badges
   - Concept & Contact backgrounds
   - Header scroll color behavior
   ========================================================= */

/* Google Fonts (Big Shoulders for English headings) */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@600;700;800&display=swap");

/* Re-affirm color palette tokens */
:root {
  --primary-color: #212121;
  --text-color: #212121;
  --bg-color: #ffffff;
  --bg-light: #f3f4f5;
  --accent-color: #d00b0c;
  --text-white: #ffffff;

  --c-base: #ffffff;
  --c-text: #212121;
  --c-accent: #d00b0c;
  --c-gray: #f3f4f5;
}

/* Remove all radii & shadows sitewide */
* {

  box-shadow: none !important;
}
:root {
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

/* English headline eyebrow */
.section-eyebrow {
  display: block;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 0.8;
  opacity: 0.12;
  margin-bottom: 0.15em;
  pointer-events: none;
}

/* English helper */
.en {
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* Buttons (No.6): solid red -> outline on hover */
.btn,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}
.btn:hover,
.cta-button:hover {
  background: transparent;
  color: var(--accent-color);
  transform: translateY(-1px);
}

.link-invert {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
.link-invert:hover {
  color: #fff;
  opacity: 0.9;
}

/* Concept section (No.17): red background + white text */
.concept {
  background-color: var(--accent-color);
  color: #fff;
  position: relative;
}
.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.concept .container {
  position: relative;
  z-index: 1;
}
.concept p {
  color: #fff;
}
.concept .concept-quote {
  text-align: center;
  padding: 16px 16px calc(1.33em + 16px);
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.concept .concept-quote h4 {
  margin: 10px 0;
}
.concept .concept-quote .strong {
  font-weight: 700;
  color: #fff;
}

/* Service badges (法人向け/個人向け) */
.service-tag {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Contact section (No.19): subtle photo bg + white text */
.contact-section {
  position: relative;
  background: #111;
  color: #fff;
}
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.contact-section .container {
  position: relative;
  z-index: 1;
}

/* Scrolling background text (per section) */
.ks-section {
  position: relative;
  overflow: hidden;
}
.ks-content {
  position: relative;
  z-index: 1;
}
.ks-scroll-bg {
  position: absolute;
  inset: 0 auto 0 100%;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.06;
  font-size: clamp(48px, 15vw, 200px);
  color: currentColor;
  mix-blend-mode: normal;
  animation: ks-marquee 28s linear infinite;
  will-change: transform;
}
.ks-scroll-bg--light {
  color: #fff;
  opacity: 0.08;
}
.ks-scroll-bg--dark {
  color: #000;
  opacity: 0.05;
}
@keyframes ks-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-220%, 0, 0);
  }
}

/* Hero overlay multiply (No.13) */
.hero-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Header color behavior (No.9/10) */
.global-header {
  background: transparent;
  color: #fff;
}
.global-header.scrolled {
  background: #fff;
  color: var(--text-color);
}

/* Safety: remove legacy component shadows */
.card,
.box,
.panel,
.table,
.flow-item {
  box-shadow: none !important;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .section-eyebrow {
    opacity: 0.16;
    font-size: clamp(42px, 18vw, 86px);
  }
  .ks-scroll-bg {
    opacity: 0.045;
  }
}

/* 1) 画像 */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2) ホーム専用の UI を body.is-top に限定（下層に影響させない） */
.is-top .services-section .service-grid {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.is-top .services-section .service-card {
  grid-column: span 6;
  background: #fff;
  color: var(--c-text, #212121);
  border: 1px solid var(--c-border, #e5e7eb);
  padding: clamp(18px, 3vw, 24px);
}
.is-top .services-section .service-thumb {
  margin-bottom: 24px;
  overflow: hidden;
}
.is-top .services-section .service-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.is-top .services-section .service-title {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.6vw, 24px);
}
.is-top .services-section .service-desc {
  margin: 0 0 22px;
}
.is-top .services-section .service-fields {
  background: #fff;
  color: var(--c-text, #212121);
  border: 1px solid var(--c-border, #e5e7eb);
  padding: 16px;
  margin: 0 0 18px;
}
.is-top .services-section .service-fields h4 {
  margin: 0 0 8px;
  color: var(--c-accent, #d00b0c);
  font-size: 16px;
}
.is-top .services-section .service-fields p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.is-top .services-section .service-tag {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  text-transform: uppercase;
}

/* 3) CONTACT / CONCEPT もホーム限定に（下層の独自レイアウトに干渉しない） */
.is-top .contact-section {
  position: relative;
  background: #111;
  color: #fff;
}
.is-top .contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.is-top .contact-section .container {
  position: relative;
  z-index: 1;
}

.is-top .concept {
  background: var(--c-accent, #d00b0c);
  color: #fff;
  position: relative;
}
.is-top .concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.is-top .concept .container {
  position: relative;
  z-index: 1;
}

/* 4) 大型背景スクロール文字は全ページOKだが、色指定は各セクションに追従 */
.ks-section {
  position: relative;
  overflow: hidden;
}
.ks-content {
  position: relative;
  z-index: 1;
}
.ks-scroll-bg {
  position: absolute;
  inset: 0 auto 0 100%;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.06;
  font-size: clamp(48px, 15vw, 200px);
  color: currentColor;
  mix-blend-mode: normal;
  animation: ks-marquee 28s linear infinite;
  will-change: transform;
}
.ks-scroll-bg--light {
  color: #fff;
  opacity: 0.08;
}
.ks-scroll-bg--dark {
  color: #000;
  opacity: 0.05;
}
@keyframes ks-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-220%, 0, 0);
  }
}

/* 5) ボタンの仕様は全ページ共通（赤→反転） */
.btn,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid var(--c-accent, #d00b0c);
  background: var(--c-accent, #d00b0c);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover,
.cta-button:hover {
  background: transparent;
  color: var(--c-accent, #d00b0c);
  transform: translateY(-1px);
}

/* 6) 念のため：カード系の影は消すが、下層の既存ボックスに影が必要なら個別クラスで復活させてください */
.card,
.box,
.panel,
.table,
.flow-item {
  box-shadow: none !important;
}

/* ====================================================================
   機能別拡張スタイル（末尾に配置）
   --------------------------------------------------------------------
   目的：引き継ぎ時に機能が明確になるよう、共通UI仕様を集約。
   - ヒーローを常に全画面表示（svh対応）
   - ボタンの統一（赤地 → hoverで白地・赤枠）
   - セクション英字ラベル / 背景スクロール英文（マルキー）
   - CONCEPT / CONTACT のレイヤー構成（薄い写真）
   - TOPのサービスカードを is-top スコープで管理
   - PARTNERS セクションのボタン切れ防止
   - 主要ブレークポイントでのレスポンシブ最適化
   ※ 既存の定義より後ろに置くことで、競合時は本ブロックが優先されます。
   ==================================================================== */

/* ============ 英字見出し用フォント ============ */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@600;700;800&display=swap");

/* ============ セクションの英語ラベル（見出し用） ============ */
.section-eyebrow {
  display: block;
  font-family: "BigShoulders-Ex";
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 0.8;
  opacity: 0.12; /* 読みを邪魔しない濃度 */
  margin-bottom: 0.15em;
  pointer-events: none;
}
.en {
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* ============ ヒーロー（動画/画像を常に全画面） ============ */
/* svhはモバイルのUI変動に強い。vhはフォールバックとして併用。 */
.main-visual,
.hero-slideshow {
  /* --- 位置とサイズを全画面に固定 --- */
  position: relative;
  width: 100vw; /* 画面の横幅いっぱい */
  height: 100vh; /* 画面の縦幅いっぱい (vhは念の為の記述) */
  height: 100svh; /* モバイルでも確実に全画面表示にするための最新の単位 */
  overflow: hidden; /* はみ出した要素を隠す */
  padding: 0; /* .sectionクラスから継承される余白をリセット */

  /* --- 中のコンテンツを中央に配置 --- */
  display: grid;
  place-items: center;
}
.hero-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  mix-blend-mode: multiply;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* ============ ボタン（全サイト統一仕様） ============ */
/* 通常：赤地・白字 / hover：白地に赤枠・赤字 */
:root {
  --_btn_py: 12px;
  --_btn_px: 22px;
}
.btn,
.cta-button,
.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--_btn_py) var(--_btn_px);
  border: 2px solid var(--accent-color, #d00b0c);
  background: var(--accent-color, #d00b0c);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    border-color 0.2s ease;
}
.btn:hover,
.cta-button:hover,
.contact-button:hover {
  background: transparent;
  color: var(--accent-color, #d00b0c);
  transform: translateY(-1px);
}
/* ボタンのサイズ・横幅ユーティリティ */
.btn--sm {
  --_btn_py: 8px;
  --_btn_px: 16px;
  font-size: 0.9rem;
}
.btn--lg {
  --_btn_py: 14px;
  --_btn_px: 28px;
  font-size: 1.05rem;
}
.btn--block {
  display: flex;
  width: 100%;
}

/* ============ 背景で流れる大型英文（各セクション共通） ============ */
.ks-section {
  position: relative;
  overflow: hidden;
}
.ks-content {
  position: relative;
  z-index: 1;
}
.ks-scroll-bg {
  position: absolute;
  inset: 0 auto 0 100%;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.06;
  font-size: clamp(48px, 15vw, 200px);
  color: currentColor;
  mix-blend-mode: normal;
  animation: ks-marquee 28s linear infinite;
  will-change: transform;
}
.ks-scroll-bg--light {
  color: #fff;
  opacity: 0.08;
} /* 濃色背景用 */
.ks-scroll-bg--dark {
  color: #000;
  opacity: 0.05;
} /* 淡色背景用 */
@keyframes ks-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-220%, 0, 0);
  }
}

/* ============ CONCEPT（赤背景＋薄い写真レイヤー） ============ */
/* CSSファイルの場所が assets/css/ のため、画像パスは ../.. でルートに戻す */
.concept {
  background: var(--accent-color, #d00b0c);
  color: #fff;
  position: relative;
}
.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.concept .container {
  position: relative;
  z-index: 1;
}
.concept p {
  color: #fff;
}
.concept .concept-quote {
  text-align: center;
  padding: 16px 16px calc(1.33em + 16px);
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ============ CONTACT（うっすら写真＋白字） ============ */
.contact-section {
  position: relative;
  background: #111;
  color: #fff;
}
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/index/2.jpg") center/cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.contact-section .container {
  position: relative;
  z-index: 1;
}

/* ============ TOP用サービスカード（下層に干渉しないよう is-top スコープ） ============ */
.is-top .services-section .service-grid {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.is-top .services-section .service-card {
  grid-column: span 6;
  background: #fff;
  color: var(--text-color, #212121);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: clamp(18px, 3vw, 24px);
}
.is-top .services-section .service-thumb {
  margin-bottom: 24px;
  overflow: hidden;
}
.is-top .services-section .service-title {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.6vw, 24px);
}
.is-top .services-section .service-desc {
  margin: 0 0 22px;
}
.is-top .services-section .service-fields {
  background: #fff;
  color: var(--text-color, #212121);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: 16px;
  margin: 0 0 18px;
}
.is-top .services-section .service-fields h4 {
  margin: 0 0 8px;
  color: var(--accent-color, #d00b0c);
  font-size: 16px;
}
.service-tag {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ============ PARTNERS（ボタンが切れないよう余白） ============ */
#partners.section {
  padding-bottom: clamp(64px, 10vw, 96px);
}
#partners.ks-section {
  overflow: visible;
}

/* ============ レスポンシブ ============ */
@media (max-width: 1200px) {
  /* ヘッダー内のグリッド最適化は既存定義を尊重（必要に応じて追記） */
}
@media (max-width: 1024px) {
  .is-top .services-section .service-card {
    grid-column: span 12;
  }
}
@media (max-width: 900px) {
  /* レイアウトの1カラム化など、必要に応じて追記 */
}
@media (max-width: 640px) {
  .ks-scroll-bg {
    opacity: 0.045;
  } /* モバイルでは背景文字をさらに弱く */
  .btn,
  .cta-button {
    width: 100%;
  } /* ボタンは親幅いっぱい */
  .main-visual {
    min-height: 100svh;
  } /* モバイルでも確実に全画面 */
}

/* ==== CONCEPTセクションのCTA中央配置・余白調整 ==== */
.concept .cta-center,
.concept .btn,
.concept .cta-button,
.concept .link {
  /* ボタンを単体で中央に置く */
  display: inline-flex;
  margin: 40px auto 0; /* 上余白40px・左右autoで中央寄せ */
}

.concept .container {
  position: relative;
  z-index: 1; /* 背景レイヤー(::before)より前面に */
  text-align: center; /* 中のインライン要素を中央寄せ */
}

/* 透明パネル（引用）の下に十分な間隔を確保 */
.concept .concept-quote {
  margin: 0 auto 24px;
}

/* スマホは幅いっぱいにして押しやすく */
@media (max-width: 640px) {
  .concept .btn,
  .concept .cta-button,
  .concept .link {
    width: 100%;
    max-width: 420px; /* 伸びすぎ抑制（任意） */
  }
}

/* =========================================================
   Buttons: セクション内のCTAを中央・統一デザインに固定
   （.link は普段テキストリンクだが、以下のセクション内では
     ボタン化して全て同仕様＆中央配置にする）
   ========================================================= */

/* ボタンの基準（赤地→hoverで反転） */
:root {
  --btn-py: 12px;
  --btn-px: 22px;
}
.btn,
.cta-button,
.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  border: 2px solid var(--accent-color, #d00b0c);
  background: var(--accent-color, #d00b0c);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
  max-width: 100%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    border-color 0.2s ease;
}
.btn:hover,
.cta-button:hover,
.contact-button:hover {
  background: transparent;
  color: var(--accent-color, #d00b0c);
  transform: translateY(-1px);
}

/* 既存 .link を“ボタン化”するのは各セクション内に限定 */
.about-section .link,
.concept .link,
.services-section .link,
.partners .link {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--btn-py) var(--btn-px);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    max-width: 100%;
    /* 角の丸みをなくし、真四角にします */
    border-radius: 0;
    /* 背景のグラデーションを定義します */
    background: linear-gradient(to left, var(--accent-color, #d00b0c) 50%, #fff 50%);
    /* グラデーションのサイズを200%に設定します */
    background-size: 200% 100%;
    /* 初期位置を右端に設定します */
    background-position: right center;
    /* ボーダーを定義します */
    border: 2px solid var(--accent-color, #d00b0c);
    /* 背景、色、ボーダーのトランジションを滑らかに設定します */
    transition: all 0.4s ease;
}
.about-section .link:hover,
.concept .link:hover,
.services-section .link:hover,
.partners .link:hover {
    /* 背景グラデーションの位置を左端に動かします */
    background-position: left center;
    /* ホバー時にボーダーの色を赤に設定します */
    border-color: var(--accent-color, #d00b0c);
}

.link-text {
    color: var(--accent-color, #d00b0c);
}

/* どのセクションでも中央に置く（左右auto） */
.about-section .link,
.about-section .btn,
.about-section .cta-button,
.concept .link,
.concept .btn,
.concept .cta-button,
.services-section .link,
.services-section .btn,
.services-section .cta-button,
.partners .link,
.partners .btn,
.partners .cta-button {
  margin: 32px auto 0; /* 上に余白、左右autoで中央 */
}

/* セクションのコンテンツは中央寄せに（既に中央の場合はそのまま） */
.about-section .container,
.concept .container,
.services-section .container,
.partners .container {
  text-align: center;
}

/* PARTNERSは下端で切れないように余白を確保 */
#partners.section {
  padding-bottom: clamp(64px, 10vw, 96px);
}
#partners.ks-section {
  overflow: visible;
}

/* スマホ時：押しやすい幅に、はみ出し防止 */
@media (max-width: 640px) {
  .about-section .link,
  .about-section .btn,
  .about-section .cta-button,
  .concept .link,
  .concept .btn,
  .concept .cta-button,
  .services-section .link,
  .services-section .btn,
  .services-section .cta-button,
  .partners .link,
  .partners .btn,
  .partners .cta-button {
    width: 100%;
    max-width: 360px; /* 伸びすぎ防止。好みで変更可 */
  }
}

/* 提携組織一覧のスタイル修正 */
.partner-organizations {
  margin-top: 60px;
}

.organization-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 40px;
}

.organization-header {
  background: linear-gradient(135deg, #990000 0%, #d00b0c 100%);
  color: #fff;
  padding: 30px;
}

.organization-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.organization-body {
  padding: 40px;
}

.organization-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.organization-member {
  padding: 0;
}

.organization-member h4 {
  color: #d00b0c;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}

.organization-member p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* その他役員セクション */
.other-members-section {
  margin-top: 80px;
}

.other-members-title {
  text-align: center;
  color: #d00b0c;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 700;
}

.other-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.other-member-card {
  background: #fff;
  padding: 20px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.other-member-card h4 {
  color: #d00b0c;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

.member-name {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
  color: #212121;
}

.member-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* 櫻庭 */
.organization-member h4 {
  text-align: left;
}
.organization-member p {
  text-align: left;
}
/* 櫻庭 */

/* 組織概要テーブル用のコンテナ */
.overview-table-container {
  margin-top: 40px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .organization-header {
    padding: 20px;
  }

  .organization-header h3 {
    font-size: 20px;
  }

  .organization-body {
    padding: 30px 20px;
  }

  .organization-members {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .other-members-section {
    margin-top: 60px;
  }

  .other-members-title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .other-members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .other-member-card {
    padding: 15px;
  }

  .organization-body {
    padding: 20px 15px;
  }

  .organization-members {
    gap: 15px;
  }

  .other-members-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* =========================================================
   法人向けサービスページ（Corporate Page）専用スタイル
   ========================================================= */

/* --- サービス概要 --- */
.service-summary {
  text-align: left;
  margin-top: 50px;
}
.service-summary p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.service-summary p:last-child {
  margin-bottom: 0;
}

/* --- ヒーローセクションのサービスタグ --- */
.hero-service-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 1.5rem;
}


@media (max-width: 480px) {
.hero-service-tag {
  margin-top: 3.5rem;
  }

}

/* --- リスク紹介セクション --- */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-top: 60px;
}
.risk-card {
  background: #fff;
  padding: 40px;
  text-align: center;
}
.risk-card__icon {
  display: block;
  margin: 0 auto 20px;
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.risk-card__title {
  color: var(--accent-color);
  margin-bottom: 20px;
  font-size: 20px;
}
.risk-card ul {
  text-align: left;
  line-height: 1.8;
  color: var(--text-light);
  font-size: 14px;
  padding-left: 1.5em; /* 箇条書きのインデント調整 */
  margin: 0;
}

/* --- 料金プラン --- */
.main-plan {
  margin-top: 80px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.main-plan__inner {
  background: var(--gradient-primary);
  color: #fff;
  padding: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.main-plan__badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
}
.main-plan__title {
  margin: 30px 0 10px 0;
  font-size: clamp(1.625rem, 0.7143rem + 4.8571vw, 3.75rem);
  font-weight: 700;
  position: relative;
  z-index: 2;
}
.main-plan__description {
  margin: 0 0 30px 0;
  opacity: 0.9;
  font-size: 16px;
  position: relative;
  z-index: 2;
}
.main-plan__price-wrapper {
  margin: 40px 0;
  position: relative;
  z-index: 2;
}
.main-plan__price-label {
  font-size: 20px;
  margin-bottom: 10px;
  opacity: 0.9;
}
.main-plan__price {
  font-size: clamp(2.25rem, 0rem + 12vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}
.main-plan__price-unit {
  font-size: clamp(1.75rem, 0.3571rem + 7.4286vw, 5rem);
}
.main-plan__price-tax {
  font-size: 16px;
  opacity: 0.8;
}
.main-plan__annual {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}
.main-plan__annual-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}
.main-plan__annual-price {
  font-size: 24px;
  font-weight: 700;
}
.main-plan__annual-tax {
  font-size: 20px;
}
.sub-plan-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.sub-plan-card {
  background: #fff;
  border: 2px solid var(--accent-color);
  padding: 40px;
  text-align: center;
}
.sub-plan-card__title {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
}
.sub-plan-card__price-wrapper {
  margin: 20px 0;
}
.sub-plan-card__price {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent-color);
  line-height: 1;
}
.sub-plan-card__note {
  margin: 0;
  color: var(--text-light);
  line-height: 1.6;
}

/* --- 導入の流れセクション --- */
.flow-container {
  max-width: 800px;
  margin: 80px auto 0;
}
.flow-item {
  background: #fff;
  border: 2px solid var(--accent-color);
  padding: 2rem;
  box-shadow: none !important; /* ドロップシャドウを削除 */
}
.flow-item__content {
  display: flex;
  align-items: center;
  gap: 30px;
}
.flow-item__image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}
.flow-item__text {
  flex: 1;
  position: relative;
  text-align: left;
}
.flow-item__badge {
  background: var(--accent-color);
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
  display: inline-block;
}
.flow-item__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}
.flow-arrow {
  text-align: center;
  margin: 20px 0;
  font-size: 32px;
  color: var(--accent-color);
  font-weight: 700;
}

/* 導入の流れレスポンシブ対応 */
@media (max-width: 768px) {
  .flow-item__content {
    flex-direction: column;
    text-align: center;
  }
  .flow-item__text {
    text-align: center;
    padding-top: 20px;
  }
  .flow-item__image {
    width: 300px;
    height: 200px;
  }
  .flow-item__badge {
    /* モバイルではバッジを中央に配置 */
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   提携・協賛ページ / MERITセクションのスタイル
   ========================================================= */

.merit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 60px;
  text-align: left;
}

.merit-card {
  position: relative; /* 数字を配置するための基準点 */
  padding: 40px;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden; /* 番号がはみ出さないように */
}

/* 右上に表示する大きな番号のスタイル */
.merit-card__number {
  position: absolute;
  top: 25px; /* さらに下に配置 (10px -> 25px) */
  right: 35px; /* さらに左に配置 (20px -> 35px) */
  font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-size: clamp(120px, 20vw, 180px); /* さらにサイズを大きく */
  font-weight: 800;
  color: rgba(0, 0, 0, 0.15);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* 見出しや文章が番号の上に表示されるように設定 */
.merit-card__content {
  position: relative;
  z-index: 1;
}

.merit-card__content h3 {
  margin-bottom: 20px;
  font-size: 30px;
}

.merit-card__content p {
  line-height: 1.8;
}


.section-red .merit-card__content h3,
.section-red .merit-card__content p,
.section-red {
  color: #ffffff;
}
/* =========================================================
   提携・協賛ページ / ご協賛・ご提携のかたちセクション
   ========================================================= */

.partnership-grid {
  display: grid;
  /* PCでは2列で表示 */
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
  text-align: left;
}

.partnership-card {
  background: #fff;
  padding: 15px;
  border-top: 4px solid var(--accent-color);
  border: 1px solid #e5e7eb; /* 影の代わりに境界線を追加 */
}

.partnership-card__title {
  color: var(--accent-color);
  margin-bottom: 20px;
  font-size: 24px;
}

.partnership-card__description {
  line-height: 1.8;
  color: #000;
  margin-bottom: 20px;
}

/* モバイル（768px以下）では1列表示に切り替え */
@media (max-width: 768px) {
  .partnership-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* =========================================================
   汎用コンポーネント：コラージュ付きコンテンツ
   概要：背景に画像をコラージュ配置し、中央にテキストを置くレイアウト。
         スマホでは背景画像を非表示にし、専用の画像クラスターを表示する。
   ========================================================= */

/* --- コンポーネントの親要素 --- */
.content-with-collage {
  position: relative;
}

/* --- (PC用) 背景画像コンテナ --- */
.collage-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* コンテンツより下の階層へ */
  pointer-events: none; /* 画像が操作の邪魔にならないように */
}

/* --- テキストコンテンツ --- */
.collage-content {
  position: relative;
  z-index: 1; /* 背景画像より上の階層へ */
  max-width: 650px;
  margin: 0 auto;
}
.collage-content .text-content-box--no-bg p {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
}
.collage-content .text-content-box--dark p {
  color: #fff; /* ダークモード用の文字色 */
}

.lo-bg {
  position: absolute;
  top: 30%;
  right: -5%;
  width: 20%;
  height: 20%;
  z-index: 0; /* コンテンツより下の階層へ */
  pointer-events: none; /* 画像が操作の邪魔にならないように */
}

/* --- テキストコンテンツ --- */
.lo-content {
  position: relative;
  z-index: 1; /* 背景画像より上の階層へ */
  max-width: 650px;
  margin: 0 auto;
}
.lo-content .lo-content-box--no-bg p {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
}

/* --- (スマホ用) 画像クラスター --- */
.collage-mobile-images {
  display: none; /* PCでは非表示 */
}

/* --- 画像の共通スタイル --- */
.collage-img {
  position: absolute;
  border: 6px solid white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.lo-img {
  position: absolute;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- レスポンシブ対応 (768px以下) --- */
@media (max-width: 768px) {
  /* PC用の背景画像を非表示に */
  .collage-bg {
    display: none;
  }

  .lo-bg {
    width: 50%;
    opacity: 0.2;
    z-index: -1;
  }

  /* スマホ用の画像クラスターを表示 */
  .collage-mobile-images {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 30px auto 40px;
    width: 90%;
  }
  .collage-mobile-images .collage-img:nth-child(1) {
    width: 60%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .collage-mobile-images .collage-img:nth-child(2) {
    width: 55%;
    top: 30%;
    right: 0;
    z-index: 2;
  }
  .collage-mobile-images .collage-img:nth-child(3) {
    width: 60%;
    bottom: 0;
    left: 15%;
    z-index: 3;
  }

  /* スマホ用の画像クラスターを表示 */
  .lo-mobile-images {
    display: block;
    position: relative;
    width: 30%;
  }
  .lo-mobile-images .collage-img:nth-child(1) {
    width: 60%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .lo-mobile-images .collage-img:nth-child(2) {
    width: 55%;
    top: 30%;
    right: 0;
    z-index: 2;
  }
  .lo-mobile-images .collage-img:nth-child(3) {
    width: 60%;
    bottom: 0;
    left: 15%;
    z-index: 3;
  }
}

/* =========================================================
   各セクション固有の画像配置
   メモ：これらのスタイルは各ページで異なるため、汎用化せず個別に管理します。
   ========================================================= */

/* --- 個人向けページ / 理念 --- */
.collage-img--ph1 {
  width: 35%;
  top: 30%;
  left: -20%;
}
.collage-img--ph2 {
  width: 40%;
  top: 5%;
  right: -30%;
}
.collage-img--ph3 {
  width: 30%;
  bottom: 5%;
  right: -15%;
}

/* --- 個人向けページ / 民間最強の理由 --- */
.collage-img--r1 {
  width: 35%;
  top: 30%;
  right: -20%;
}
.collage-img--r2 {
  width: 40%;
  top: -10%;
  left: -30%;
}
.collage-img--r3 {
  width: 30%;
  bottom: -20%;
  left: -15%;
}

/* --- 法人向けページ / サービス概要 --- */
.collage-img--cp1 {
  width: 30%;
  top: -10%;
  right: -25%;
}
.collage-img--cp2 {
  width: 30%;
  top: 30%;
  left: -15%;
}
.collage-img--cp3 {
  width: 35%;
  bottom: -10%;
  right: -16%;
}

/* --- 提携・協賛募集 / WHAT IS --- */
.collage-img--ss1 {
  width: 30%;
  top: 10%;
  right: -15%;
}
.collage-img--ss2 {
  width: 40%;
  top: 30%;
  left: -25%;
}
.collage-img--ss3 {
  width: 35%;
  bottom: 10%;
  right: -16%;
}

/* --- 提携・協賛募集 / LOGO --- */
.collage-img--lo1 {
  width: 20%;
  bottom: 10%;
  left: -16%;
}

/* =========================================================
   2カラムコラージュレイアウト（結成の真意・提携協賛募集ページ用）
   ========================================================= */

.collage-layout {
    display: flex;
  width: 100%;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.336);
}
.image-cluster {
  position: relative;
  aspect-ratio: 4 / 3;
}
.content-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
/* 画像コンテナに背景色を適用 */
.image-cluster {
  background-color: var(--accent-color, #d00b0c);
}
.text-content-box {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 40px;
  text-align: left;
}
/* ...（.quote-box などの関連スタイルは変更なし）... */

@media (min-width: 769px) {
  .collage-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .collage-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .image-cluster {
    order: 1;
  }
  .content-wrapper {
    order: 2;
  }
}
/* ...（「結成の真意」と「提携・協賛募集」の個別画像配置スタイルは変更なし）... */
.collage-img--c1 {
  width: 60%;
  top: 0;
  left: 0;
  z-index: 1;
}
.collage-img--c2 {
  width: 45%;
  top: 30%;
  right: 0;
  z-index: 2;
}
.collage-img--c3 {
  width: 65%;
  bottom: 0;
  left: 15%;
  z-index: 3;
}
.collage-img--p1 {
  width: 50%;
  top: 0;
  right: 0;
  z-index: 2;
}
.collage-img--p2 {
  width: 30%;
  top: 40%;
  left: 0;
  z-index: 3;
}
.collage-img--p3 {
  width: 70%;
  top: 25%;
  left: 15%;
  z-index: 1;
}

/* =========================================================
   お問い合わせカード ＆ LINEボタン
   ========================================================= */
/* ...（このセクションのコードは変更ありません）... */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}
.contact-card {
  background: #fff;
  padding: 40px;
  text-align: center;
  border-top: 4px solid #00b900;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-card .icon-image-xlarge {
  margin-left: auto;
  margin-right: auto;
}
.contact-card h3 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 2.2rem;
  color: var(--accent-color);
}
.contact-card p {
  font-size: 1.5rem;
  line-height: 1.7;
  flex-grow: 1;
  color: #333;
  margin-bottom: 30px;
}
.cta_btn05 {
  background-color: #06c755 !important;
  border: 2px solid #06c755 !important;
  color: #fff !important;
  font-weight: 700;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 14px !important;
  text-decoration: none;
}
.cta_btn05:hover {
  background-color: #05b34c !important;
  border-color: #05b34c !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.cta_btn05 .fa-brands.fa-line {
  font-size: 2.2rem;
}
.cta_btn05 span {
  line-height: 1;
}
.cta_btn05 p {
  display: none;
}

/* =========================================================
   CTAセクションのボタンスタイル
   ========================================================= */
.cta-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* --- 
  コラージュレイアウト内のテキスト 
  (例：「警心ガーディアンズ・コーポレートとは」セクション) 
--- */
.collage-content,
.content-wrapper {
  text-align: left;
}

/* --- 
  「ご協力いただくことで得られること」セクションのカード内テキスト 
--- */
.merit-card__content {
  text-align: left;
}

/* --- 
  「ご協賛・ご提携のかたち」セクションのカード内テキスト 
--- */
.partnership-card {
  text-align: left;
}

/* --- 
  「お問い合わせ方法」セクションのカード内説明文 
--- */
.contact-card p {
  text-align: left;
}

/* --- ヘッダー全体 --- */
.header {
    position: fixed; /* ヘッダーを画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* ヘッダーの高さを指定 */
    display: flex;
    justify-content: space-between; /* 横並びの要素を両端に配置 */
    align-items: center; /* 縦方向の中央揃え */
    padding: 0 20px;
    background-color: transparent; /* 初期背景色は透明 */
    transition: background-color 0.3s ease; /* 背景色変化を滑らかに */
    z-index: 1000;
    box-sizing: border-box;
}

/* スクロール時にヘッダー背景を白にするクラス（JavaScriptで付与） */
.header.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を付けて境界を明確に */
}

/* --- ロゴ --- */
.logo a {
    display: block;
    height: 100%; /* aタグの高さをヘッダーに合わせる */
}

.logo img {
    height: 60px; /* ロゴの高さを固定 */
    width: auto;  /* 幅は高さに応じて自動調整 */
    object-fit: contain; /* アスペクト比を維持して、潰れないように調整 */
    max-height: 100%;
}

/* --- 中央の協会名 --- */
.header-center {
    position: absolute; /* 中央配置の基準 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #333; /* 文字色が見えるように指定 */
}

/* --- PC表示のナビゲーション（タブレット以下では非表示） --- */
.pc-nav {
    display: block; /* PCでは表示 */
}


/* --- ここからレスポンシブ設定（タブレット＆スマホ） --- */
@media screen and (max-width: 1024px) {

    /* --- タブレット＆スマホの共通設定 --- */
    .pc-nav {
        display: none; /* PC用メニューを非表示 */
    }

    /* ハンバーガーメニューボタン（トグル） */
    .hamburger-toggle {
        display: block; /* ハンバーガーボタンを表示 */
        /* 以下、ボタンのデザイン（適宜調整してください） */
        width: 30px;
        height: 22px;
        position: relative;
        cursor: pointer;
        z-index: 1002;
    }
    .hamburger-toggle span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }
    .hamburger-toggle span:nth-child(1) { top: 0; }
    .hamburger-toggle span:nth-child(2) { top: 10px; }
    .hamburger-toggle span:nth-child(3) { top: 20px; }


    /* --- ハンバーガーメニュー本体 --- */
    .sp-nav {
        display: block;
        position: fixed;
        top: 0; /* 画面の上端を基準にする */
        left: -100%; /* 初期状態では画面外に隠す */
        width: 100%;
        height: 100vh; /* 画面全体の高さ */
        padding-top: 80px; /* ヘッダーの高さ分だけ中身を下げる */
        background-color: rgba(255, 255, 255, 0.95);
        transition: left 0.3s ease;
        z-index: 1001;
        box-sizing: border-box;
    }

    /* メニューが開いた状態のスタイル（JavaScriptでクラスを付与） */
    .sp-nav.open {
        left: 0; /* 画面内にスライドイン */
    }

    /* メニュー内のリストのデザイン */
    .sp-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sp-nav li a {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #eee;
    }

} /* @media (max-width: 1024px) 終了 */


/* --- スマホにのみ適用させたい場合（必要であれば） --- */
@media screen and (max-width: 767px) {
    .header {
        padding: 0 15px; /* スマホでは左右の余白を少し詰める */
    }
    .logo img {
        height: 50px; /* スマホではロゴを少し小さくする */
    }
    .header-center {
        font-size: 16px; /* スマホでは協会名の文字を少し小さくする */
    }
}

/* Animated-itemのスタイルを上書きして透明度を調整 */
.hero-slideshow .animated-item.hero-tagline {
    opacity: 0.4 !important;
      font-family: "BigShoulders-Ex", system-ui, sans-serif;
  font-size: 2em;
}
.hero-content {
    /* 子要素を縦方向に並べるFlexboxとして設定 */
    display: flex;
    flex-direction: column;
    /* 子要素間の間隔を調整 */
    gap: 50px; /* 例: 50pxの間隔を追加。必要に応じて調整 */
}

/*
 * ヒーローセクションのスタイルを修正
 */
.hero-slideshow .sub-headline {
    /* 明朝体フォントを適用 */
    font-family: 'Noto Serif JP Custom', serif;
}
/*
 * プロダクトタグ
 */
.product-tag-wrapper {
  margin-top: 0;
  margin-bottom: 16px; /* タグとタイトルの間の最小限の余白 */
}

.product-tag {
  display: inline-block;
  padding: 3px 12px; /* 上下左右のパディングを調整 */
  border: 1px solid #ccc !important;
  border-radius: 14px !important ;
  background-color: #ffffff;
  color: #797979;
  font-size: 0.85em; /* フォントサイズを微調整 */
}

/* =========================================================
   協賛・提携のかたち / 2カラムレイアウト（カード内画像配置）
   ========================================================= */

/* --- 独自ラッパークラス（containerを使わない） --- */
.partnership-wrapper {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 0.8rem; /* 左右の余白を最小限に */
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center; /* ヘッダー要素の中央寄せ */
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .partnership-wrapper {
    padding: 0 0.5rem; /* モバイルではさらに削減 */
  }
}

@media (max-width: 480px) {
  .partnership-wrapper {
    padding: 0 0.3rem; /* 超小型では最小限に */
  }
}

/* --- パートナーシップグリッドを2カラムに変更 --- */
.partnership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px; /* 隙間を40pxから30pxに縮小 */
  margin-top: 60px;
  text-align: left;
}

/* --- パートナーシップカードの新しいレイアウト（右画像・左テキスト・さらに大きいサイズ） --- */
.partnership-card {
  background: #fff;
  border-top: 4px solid var(--accent-color);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  height: 400px; /* カード高さをさらに拡大 */
}

/* --- カード内のコンテンツエリア（左側） --- */
.partnership-card__content {
  padding: 25px; /* パディングを大幅削減 */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央揃え */
  order: 1; /* 左側に配置 */
}

/* --- カード内の画像エリア（右側・全画面表示） --- */
.partnership-card__image {
  width: 45%; /* 幅を少し大きく */
  height: 100%; /* カード高さ全体を使用 */
  overflow: hidden;
  flex-shrink: 0;
  order: 2; /* 右側に配置 */
  display: flex;
  align-items: center; /* 画像を縦方向中央揃え */
}

.partnership-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が縦横全体を覆うように */
  object-position: center; /* 画像の中央部分を表示 */
  display: block;
}

.partnership-card__title {
  color: var(--accent-color);
  margin-bottom: 20px;
  font-size: 24px;
}

.partnership-card__description {
  line-height: 1.8;
  color: #000;
  margin-bottom: 0;
}

/* --- レスポンシブ対応（タブレット：1024px以下） --- */
@media (max-width: 1024px) {
  .partnership-card {
    height: 320px; /* タブレットでカード高さを縮小 */
  }
  
  .partnership-card__content {
    padding: 20px; /* パディングを縮小 */
  }
  
  .partnership-card__title {
    font-size: 20px; /* タイトルサイズを縮小 */
  }
  
  .partnership-card__description {
    font-size: 14px; /* 説明文サイズを縮小 */
    line-height: 1.6;
  }
}

/* --- レスポンシブ対応（小型タブレット：900px以下） --- */
@media (max-width: 900px) {
  .partnership-grid {
    gap: 25px; /* グリッド間隔をさらに縮小 */
  }
  
  .partnership-card {
    height: 280px; /* カード高さをさらに縮小 */
  }
  
  .partnership-card__content {
    padding: 18px; /* パディングをさらに縮小 */
  }
  
  .partnership-card__image {
    width: 40%; /* 画像エリアを少し縮小してテキストエリアを拡大 */
  }
  
  .partnership-card__title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .partnership-card__description {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* --- レスポンシブ対応（タブレット：768px以下） --- */
@media (max-width: 768px) {
  .partnership-grid {
    grid-template-columns: 1fr; /* モバイルでは1カラムに */
    gap: 30px;
  }
  
  .partnership-card {
    height: 300px; /* モバイルでは高さを大きく調整 */
  }
  
  .partnership-card__image {
    width: 40%; /* 画像エリアを縮小してテキストエリアを拡大 */
  }
  
  .partnership-card__content {
    padding: 15px; /* パディングを大幅削減 */
  }
  
  .partnership-card__title {
    font-size: 16px; /* タイトルサイズをさらに縮小 */
    margin-bottom: 15px;
  }
  
  .partnership-card__description {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* --- 小型スマートフォン対応（480px以下） --- */
@media (max-width: 480px) {
  .partnership-card {
    height: 350px; /* さらに高さを大きく */
  }
  
  .partnership-card__image {
    width: 35%; /* 画像をさらに縮小 */
  }
  
  .partnership-card__content {
    padding: 12px; /* パディングをさらに削減 */
  }
  
  .partnership-card__title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  .partnership-card__description {
    font-size: 12px; /* 文字サイズをより小さく */
    line-height: 1.7; /* 行間を広めに */
  }
}

/* --- 超小型スマートフォン対応（360px以下） --- */
@media (max-width: 360px) {
  .partnership-card {
    height: 380px; /* 高さをさらに拡大 */
  }
  
  .partnership-card__image {
    width: 30%; /* 画像エリアを最小限に */
  }
  
  .partnership-card__content {
    padding: 10px; /* パディングを最小限に */
  }
  
  .partnership-card__title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .partnership-card__description {
    font-size: 11px;
    line-height: 1.8; /* 行間をさらに広く */
  }
}

/* PC（1025px以上）ではこのクラスを持つ要素を非表示にする */
.sp-only {
  display: none;
}

/* スマホ・タブレット（1024px以下）では表示する */
@media (max-width: 1024px) {
  .sp-only {
    display: block;
  }
}

/* 修正①：PC用ボタンをモバイルで非表示にする */
@media (max-width: 1024px) {
  a.link.pc {
    display: none;
  }
}

/* 修正②：モバイルメニューのボタンホバーを修正 */
.global-nav.active .sp-link:hover {
  color: var(--accent-color) !important;
}