/* =========================================================
 * 4.5 フッター直前CTAブロック
 * ========================================================= */
.kc-cta-block {
  background: var(--kc-color-pink-50);
  padding: var(--kc-space-3xl) 0;
  margin-top: var(--kc-space-4xl);
}

.kc-cta-block__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--kc-space-xl);
  align-items: center;
}

.kc-cta-block__portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kc-color-bg-card);
  flex-shrink: 0;
}

.kc-cta-block__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc-cta-block__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-2xl);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-sm);
}

.kc-cta-block__text {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  margin-bottom: var(--kc-space-md);
}

.kc-cta-block__sns {
  display: flex;
  gap: var(--kc-space-sm);
  flex-wrap: wrap;
}

.kc-cta-block__sns-link {
  display: inline-block;
  padding: var(--kc-space-xs) var(--kc-space-md);
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-full);
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-primary);
  transition: background var(--kc-transition-fast);
}

.kc-cta-block__sns-link:hover {
  background: var(--kc-color-pink-100);
  opacity: 1;
}

@media (max-width: 767px) {
  .kc-cta-block__inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .kc-cta-block__portrait {
    width: 100px;
    height: 100px;
  }
}

/* =========================================================
 * 4.6 ボタンコンポーネント
 * ========================================================= */
.kc-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--kc-space-sm) var(--kc-space-xl);
  border-radius: var(--kc-radius-md);
  font-family: var(--kc-font-sans);
  font-size: var(--kc-font-size-base);
  font-weight: var(--kc-font-weight-medium);
  line-height: 1.4;
  text-decoration: none;
  transition: opacity var(--kc-transition-fast), transform var(--kc-transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
}

.kc-button:hover {
  opacity: 0.9;
}

.kc-button:active {
  transform: scale(0.98);
}

.kc-button--primary {
  background: var(--kc-color-pink-400);
  color: var(--kc-color-text-inverse);
}

.kc-button--secondary {
  background: var(--kc-color-bg-card);
  color: var(--kc-color-text-primary);
  border-color: var(--kc-color-border-default);
}

.kc-button--large {
  padding: var(--kc-space-md) var(--kc-space-2xl);
  font-size: var(--kc-font-size-lg);
  min-width: 240px;
}

.kc-button__sublabel {
  font-size: var(--kc-font-size-xs);
  font-weight: var(--kc-font-weight-regular);
  opacity: 0.9;
  margin-top: 2px;
}

/* =========================================================
 * 4.7 セクションコンポーネント
 * ========================================================= */
.kc-section {
  padding: var(--kc-space-4xl) 0;
}

.kc-section--subtle {
  background: var(--kc-color-bg-subtle);
}

.kc-section--pink {
  background: var(--kc-color-pink-50);
}

.kc-section__header {
  text-align: center;
  margin-bottom: var(--kc-space-3xl);
}

.kc-section__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-3xl);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
}

.kc-section__subtitle {
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-text-secondary);
}

.kc-section__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--kc-color-pink-400);
  margin: var(--kc-space-md) auto 0;
}

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

@media (max-width: 767px) {
  .kc-section {
    padding: var(--kc-space-2xl) 0;
  }
}

/* =========================================================
 * 4.8 カードコンポーネント(基本)
 * ========================================================= */
.kc-card {
  background: var(--kc-color-bg-card);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-xl);
  border: 1px solid var(--kc-color-border-subtle);
  transition: border-color var(--kc-transition-base), box-shadow var(--kc-transition-base);
}

.kc-card:hover {
  border-color: var(--kc-color-pink-100);
  box-shadow: var(--kc-shadow-card);
}

.kc-card__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-xl);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
}

.kc-card__body {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
}

.kc-card__footer {
  margin-top: var(--kc-space-lg);
  text-align: right;
}

.kc-card--featured {
  border-color: var(--kc-color-pink-100);
  background: linear-gradient(135deg, var(--kc-color-bg-card) 0%, var(--kc-color-pink-50) 100%);
}

/* =========================================================
 * 5.1.2 ヒーローエリア(最新定義はファイル末尾にまとめた。
 * スクロールヒントと Part 2 のイラストのみ別途保持する)
 * ========================================================= */

/* =========================================================
 * 5.1.3 ストーリーセクション
 * ========================================================= */
.kc-story__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kc-space-xl);
  margin-bottom: var(--kc-space-3xl);
  counter-reset: story-counter;
}

.kc-story__item {
  background: var(--kc-color-bg-card);
  border-radius: var(--kc-radius-lg);
  overflow: hidden;
  padding-bottom: var(--kc-space-lg);
  counter-increment: story-counter;
  position: relative;
  transition: transform var(--kc-transition-base), box-shadow var(--kc-transition-base);
}

.kc-story__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--kc-shadow-card);
}

.kc-story__item::before {
  content: counter(story-counter, decimal-leading-zero);
  position: absolute;
  top: var(--kc-space-md);
  right: var(--kc-space-md);
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-xl);
  color: var(--kc-color-pink-400);
  font-style: italic;
  z-index: 2;
}

.kc-story__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--kc-color-bg-subtle);
  overflow: hidden;
  margin-bottom: var(--kc-space-md);
}

.kc-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc-story__stage {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  padding: 0 var(--kc-space-lg);
  margin-bottom: var(--kc-space-sm);
}

.kc-story__text {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
  padding: 0 var(--kc-space-lg);
}

.kc-story__quote {
  background: var(--kc-color-bg-card);
  border-left: 4px solid var(--kc-color-pink-400);
  padding: var(--kc-space-xl) var(--kc-space-2xl);
  max-width: var(--kc-container-narrow);
  margin: 0 auto;
}

.kc-story__quote-text {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-2xl);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-sm);
  line-height: var(--kc-line-height-tight);
}

.kc-story__quote-note {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
}

@media (max-width: 1023px) {
  .kc-story__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kc-space-md);
  }
}

@media (max-width: 767px) {
  .kc-story__list {
    grid-template-columns: 1fr;
  }

  .kc-story__quote {
    padding: var(--kc-space-lg);
  }

  .kc-story__quote-text {
    font-size: var(--kc-font-size-xl);
  }
}

/* =========================================================
 * 5.1.4 重点政策グリッド
 * ========================================================= */
.kc-policy-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--kc-space-lg);
}

.kc-policy-card {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-xl);
  display: flex;
  flex-direction: column;
  position: relative;
  grid-column: span 2;
  transition: border-color var(--kc-transition-base), transform var(--kc-transition-base);
}

/* デスクトップ: 1行目3枚、2行目2枚を中央揃え(6カラムGrid上で
   4枚目をcol 2開始、5枚目をcol 4開始にすることで左右に1カラム余白) */
.kc-policy-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.kc-policy-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.kc-policy-card:hover {
  border-color: var(--kc-color-pink-100);
  transform: translateY(-2px);
}

.kc-policy-card--center {
  background: linear-gradient(135deg, var(--kc-color-bg-card) 0%, var(--kc-color-pink-50) 100%);
  border-color: var(--kc-color-pink-100);
}

.kc-policy-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kc-color-pink-50);
  color: var(--kc-color-pink-600);
  border-radius: var(--kc-radius-full);
  margin-bottom: var(--kc-space-md);
}

.kc-policy-card__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
  line-height: var(--kc-line-height-tight);
}

.kc-policy-card__text {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
  flex: 1;
  margin-bottom: var(--kc-space-md);
}

.kc-policy-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-xs);
  color: var(--kc-color-text-accent);
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-font-weight-medium);
  align-self: flex-start;
  transition: gap var(--kc-transition-fast);
}

.kc-policy-card__link:hover {
  gap: var(--kc-space-sm);
  opacity: 1;
}

@media (max-width: 1023px) {
  .kc-policy-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .kc-policy-card {
    grid-column: span 2;
  }
  .kc-policy-card:nth-child(4) {
    grid-column: 1 / span 2;
  }
  .kc-policy-card:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 767px) {
  .kc-policy-grid {
    grid-template-columns: 1fr;
  }
  .kc-policy-card,
  .kc-policy-card:nth-child(4),
  .kc-policy-card:nth-child(5) {
    grid-column: 1;
  }
}

/* =========================================================
 * 5.1.5 活動報告カードグリッド
 * ========================================================= */
.kc-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kc-space-lg);
  margin-bottom: var(--kc-space-2xl);
}

.kc-article-card {
  background: var(--kc-color-bg-card);
  border-radius: var(--kc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--kc-color-border-subtle);
  transition: border-color var(--kc-transition-base), transform var(--kc-transition-base);
}

.kc-article-card:hover {
  border-color: var(--kc-color-pink-100);
  transform: translateY(-2px);
}

.kc-article-card__link {
  display: flex;
  flex-direction: column;
  padding: var(--kc-space-xl);
  height: 100%;
  color: var(--kc-color-text-primary);
}

.kc-article-card__link:hover {
  opacity: 1;
}

.kc-article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--kc-space-md);
  margin-bottom: var(--kc-space-md);
}

.kc-article-card__date {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  font-family: var(--kc-font-serif);
  letter-spacing: 0.05em;
}

.kc-article-card__category {
  display: inline-block;
  padding: 2px var(--kc-space-sm);
  background: var(--kc-color-pink-50);
  color: var(--kc-color-pink-600);
  font-size: var(--kc-font-size-xs);
  font-weight: var(--kc-font-weight-medium);
  border-radius: var(--kc-radius-sm);
}

.kc-article-card__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
  line-height: var(--kc-line-height-tight);
}

.kc-article-card__excerpt {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
  flex: 1;
  margin-bottom: var(--kc-space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kc-article-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-xs);
  color: var(--kc-color-text-accent);
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-font-weight-medium);
  align-self: flex-start;
  transition: gap var(--kc-transition-fast);
}

.kc-article-card:hover .kc-article-card__more {
  gap: var(--kc-space-sm);
}

@media (max-width: 1023px) {
  .kc-article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kc-article-grid > li:last-child {
    grid-column: span 2;
    max-width: calc((100% - var(--kc-space-lg)) / 2);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .kc-article-grid {
    grid-template-columns: 1fr;
  }

  .kc-article-grid > li:last-child {
    grid-column: span 1;
    max-width: 100%;
  }
}

/* =========================================================
 * ========== Warm Elegance 拡張(design-spec.md §3,5,6,7,8)
 * 既存クラスを壊さず、カスケード上書きで質感を格上げする。
 * ========================================================= */

/* ---------------------------------------------------------
 * §8 セクション余白の拡張
 * ------------------------------------------------------- */
.kc-section {
  padding: var(--kc-space-5xl) 0;
}

@media (min-width: 1024px) {
  .kc-section {
    padding: var(--kc-space-6xl) 0;
  }
}

@media (max-width: 767px) {
  .kc-section {
    padding: var(--kc-space-3xl) 0;
  }
}

.kc-section--compact {
  padding: var(--kc-space-3xl) 0;
}

/* ---------------------------------------------------------
 * §3.1 ヒーロータイポは末尾の最終定義ブロックに統合したため削除
 * ------------------------------------------------------- */

/* ---------------------------------------------------------
 * §3.2 セクションタイトルの構造強化(eyebrow追加)
 * ------------------------------------------------------- */
.kc-section__header {
  margin-bottom: var(--kc-space-4xl);
  position: relative;
}

.kc-section__eyebrow {
  display: block;
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  font-style: italic;
  color: var(--kc-color-pink-400);
  letter-spacing: var(--kc-letter-spacing-wider);
  margin-bottom: var(--kc-space-md);
}

.kc-section__title {
  font-size: var(--kc-font-size-display-sm);
  letter-spacing: var(--kc-letter-spacing-tight);
  line-height: var(--kc-line-height-display);
  margin-bottom: var(--kc-space-lg);
}

.kc-section__title::after {
  width: 48px;
  height: 1px;
  background: var(--kc-color-pink-400);
  margin: var(--kc-space-lg) auto 0;
}

.kc-section__subtitle {
  line-height: var(--kc-line-height-expanded);
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .kc-section__title {
    font-size: var(--kc-font-size-3xl);
  }
}

/* ---------------------------------------------------------
 * §5.2 スクロールリビール アニメーション定義
 * ------------------------------------------------------- */
[data-kc-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--kc-transition-reveal),
    transform var(--kc-transition-reveal);
}

[data-kc-reveal="fade"] {
  transform: none;
}

[data-kc-reveal="rise"] {
  transform: translateY(48px);
}

[data-kc-reveal="rise-slow"] {
  transform: translateY(64px);
  transition:
    opacity 1400ms var(--kc-ease-gentle),
    transform 1400ms var(--kc-ease-gentle);
}

[data-kc-reveal="scale-soft"] {
  transform: scale(0.96);
}

[data-kc-reveal].kc-reveal--visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-kc-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------
 * §6.1 カード系ホバー統一(ゆったりした動きに)
 * ------------------------------------------------------- */
.kc-story__item {
  transition:
    transform 800ms var(--kc-ease-gentle),
    box-shadow 800ms var(--kc-ease-gentle);
  box-shadow: var(--kc-shadow-soft);
}

.kc-story__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--kc-shadow-elegant);
}

.kc-policy-card {
  transition:
    border-color 600ms var(--kc-ease-gentle),
    transform 800ms var(--kc-ease-gentle),
    box-shadow 800ms var(--kc-ease-gentle);
  box-shadow: var(--kc-shadow-soft);
}

.kc-policy-card:hover {
  border-color: var(--kc-color-pink-100);
  transform: translateY(-4px);
  box-shadow: var(--kc-shadow-elegant);
}

.kc-policy-card--center:hover {
  box-shadow: var(--kc-shadow-dreamy);
}

.kc-article-card {
  transition:
    border-color 600ms var(--kc-ease-gentle),
    transform 800ms var(--kc-ease-gentle),
    box-shadow 800ms var(--kc-ease-gentle);
  box-shadow: var(--kc-shadow-soft);
}

.kc-article-card:hover {
  border-color: var(--kc-color-pink-100);
  transform: translateY(-4px);
  box-shadow: var(--kc-shadow-elegant);
}

/* ---------------------------------------------------------
 * §6.3 ボタンホバーの上質化
 * ------------------------------------------------------- */
.kc-button {
  position: relative;
  overflow: hidden;
  transition:
    transform 500ms var(--kc-ease-gentle),
    box-shadow 500ms var(--kc-ease-gentle),
    background-color 400ms var(--kc-ease-gentle);
}

.kc-button--primary {
  box-shadow: 0 2px 8px rgba(212, 83, 126, 0.25);
}

.kc-button--primary:hover {
  background: var(--kc-color-pink-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 83, 126, 0.35);
  opacity: 1;
}

.kc-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(212, 83, 126, 0.25);
}

.kc-button--secondary {
  box-shadow: var(--kc-shadow-soft);
}

.kc-button--secondary:hover {
  background: var(--kc-color-pink-50);
  border-color: var(--kc-color-pink-400);
  color: var(--kc-color-pink-600);
  transform: translateY(-2px);
  box-shadow: var(--kc-shadow-elegant);
  opacity: 1;
}

/* ---------------------------------------------------------
 * §6.4 ストーリーカード画像のホバーズーム
 * ------------------------------------------------------- */
.kc-story__image img {
  transition: transform 1200ms var(--kc-ease-gentle);
}

.kc-story__item:hover .kc-story__image img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------
 * §7.1 ヒーロー下部のスクロールヒント
 * ------------------------------------------------------- */
.kc-hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  z-index: 2;
}

.kc-hero__scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--kc-color-pink-400));
  animation: kc-scroll-hint 2.4s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes kc-scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top center; }
  50%  { transform: scaleY(1); transform-origin: top center; }
  50.1% { transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-hero__scroll-line {
    animation: none;
    transform: scaleY(1);
  }
}

@media (max-width: 767px) {
  .kc-hero__scroll-hint {
    display: none;
  }
}

/* =========================================================
 * ============ 5.2.2 共通ページヘッダー(kc-page-header)
 * 政策・活動報告・後援会・プライバシーポリシー で再利用。
 * ========================================================= */
.kc-page-header {
  padding: var(--kc-space-3xl) 0 var(--kc-space-2xl);
  background: var(--kc-color-bg-base);
  border-bottom: 1px solid var(--kc-color-border-subtle);
  position: relative;
  overflow: hidden;
}

.kc-page-header > .kc-container {
  position: relative;
  z-index: 2;
}

.kc-breadcrumb {
  margin-bottom: var(--kc-space-lg);
}

.kc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-xs);
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
}

.kc-breadcrumb__item {
  display: flex;
  align-items: center;
}

.kc-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-left: var(--kc-space-xs);
  color: var(--kc-color-border-default);
}

.kc-breadcrumb__item a {
  color: var(--kc-color-text-secondary);
}

.kc-breadcrumb__item--current {
  color: var(--kc-color-text-primary);
}

.kc-page-header__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-4xl);
  font-weight: var(--kc-font-weight-medium);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
  position: relative;
  padding-bottom: var(--kc-space-md);
}

.kc-page-header__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--kc-color-pink-400);
}

.kc-page-header__lead {
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
  max-width: var(--kc-container-narrow);
}

@media (max-width: 767px) {
  .kc-page-header {
    padding: var(--kc-space-2xl) 0 var(--kc-space-xl);
  }

  .kc-page-header__title {
    font-size: var(--kc-font-size-3xl);
  }
}

/* =========================================================
 * ============ 5.2.3 政策ページ: 目次(kc-toc)
 * ========================================================= */
.kc-toc {
  background: var(--kc-color-pink-50);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-xl) var(--kc-space-2xl);
}

.kc-toc__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
  padding-bottom: var(--kc-space-sm);
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-toc__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kc-space-md);
}

.kc-toc__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--kc-space-md) var(--kc-space-lg);
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-md);
  color: var(--kc-color-text-primary);
  transition: border-color var(--kc-transition-fast), transform var(--kc-transition-fast);
}

.kc-toc__link::after {
  content: "→";
  color: var(--kc-color-pink-400);
  font-weight: var(--kc-font-weight-medium);
  transition: transform var(--kc-transition-fast);
  margin-left: var(--kc-space-sm);
}

.kc-toc__link:hover {
  border-color: var(--kc-color-pink-400);
  opacity: 1;
}

.kc-toc__link:hover::after {
  transform: translateX(4px);
}

.kc-toc__label {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-base);
  font-weight: var(--kc-font-weight-medium);
  flex: 1;
}

.kc-toc__count {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  margin-right: var(--kc-space-sm);
}

@media (max-width: 767px) {
  .kc-toc {
    padding: var(--kc-space-lg);
  }

  .kc-toc__list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * ============ 5.2.4 政策ページ: カテゴリとアコーディオン
 * ========================================================= */
.kc-policy-category {
  padding: var(--kc-space-3xl) 0;
}

.kc-policy-category--alt {
  background: var(--kc-color-bg-subtle);
}

.kc-category-header {
  text-align: center;
  margin-bottom: var(--kc-space-2xl);
}

.kc-category-header__eyebrow {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-pink-400);
  letter-spacing: 0.2em;
  font-style: italic;
  margin-bottom: var(--kc-space-sm);
}

.kc-category-header__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-3xl);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-md);
}

.kc-category-header__lead {
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-text-secondary);
  max-width: var(--kc-container-narrow);
  margin: 0 auto;
}

.kc-policy-list {
  max-width: var(--kc-container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-md);
}

.kc-policy-item {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  overflow: hidden;
  transition: border-color var(--kc-transition-base);
}

.kc-policy-item:hover {
  border-color: var(--kc-color-pink-100);
}

.kc-policy-item--featured {
  border-color: var(--kc-color-pink-100);
  background: linear-gradient(135deg, var(--kc-color-bg-card) 0%, var(--kc-color-pink-50) 100%);
}

.kc-policy-item__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--kc-space-md);
  padding: var(--kc-space-lg) var(--kc-space-xl);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--kc-transition-fast);
}

.kc-policy-item__trigger:hover {
  background: rgba(212, 83, 126, 0.04);
}

.kc-policy-item__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-pink-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.kc-policy-item__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-xs);
}

.kc-policy-item__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  font-weight: var(--kc-font-weight-medium);
  line-height: var(--kc-line-height-tight);
}

.kc-policy-item__summary {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
}

.kc-policy-item__icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--kc-color-text-secondary);
  transition: transform var(--kc-transition-base);
}

.kc-policy-item__trigger[aria-expanded="true"] .kc-policy-item__icon {
  transform: rotate(180deg);
}

.kc-policy-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--kc-transition-base);
}

.kc-policy-item__trigger[aria-expanded="true"] + .kc-policy-item__body {
  grid-template-rows: 1fr;
}

.kc-policy-item__body-inner {
  overflow: hidden;
  padding: 0 var(--kc-space-xl) var(--kc-space-xl);
}

.kc-policy-item__body-inner > * + * {
  margin-top: var(--kc-space-md);
}

.kc-policy-item__body-inner p {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
  line-height: var(--kc-line-height-base);
}

.kc-policy-item__points {
  list-style: none;
  padding-left: var(--kc-space-md);
  border-left: 2px solid var(--kc-color-pink-100);
}

.kc-policy-item__points li {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  padding-left: var(--kc-space-md);
  position: relative;
  margin-bottom: var(--kc-space-xs);
}

.kc-policy-item__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--kc-color-pink-400);
  border-radius: 50%;
}

@media (max-width: 767px) {
  .kc-policy-item__trigger {
    padding: var(--kc-space-md);
  }

  .kc-policy-item__body-inner {
    padding: 0 var(--kc-space-md) var(--kc-space-md);
  }

  .kc-policy-item__title {
    font-size: var(--kc-font-size-base);
  }
}

/* =========================================================
 * ============ 5.3.2 活動報告: 2カラムレイアウト
 * ========================================================= */
.kc-activity-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--kc-space-2xl);
}

.kc-activity-main {
  min-width: 0;
}

.kc-activity-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-xl);
}

@media (max-width: 1023px) {
  .kc-activity-layout {
    grid-template-columns: 1fr;
    gap: var(--kc-space-xl);
  }

  .kc-activity-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--kc-space-md);
  }

  .kc-activity-sidebar > .kc-sidebar-block {
    flex: 1 1 240px;
  }
}

@media (max-width: 767px) {
  .kc-activity-sidebar {
    flex-direction: column;
  }

  .kc-activity-sidebar > .kc-sidebar-block {
    flex: 1;
  }
}

/* =========================================================
 * ============ 5.3.3 カテゴリフィルター
 * ========================================================= */
.kc-filter-bar {
  margin-bottom: var(--kc-space-xl);
  padding-bottom: var(--kc-space-lg);
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-filter-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-sm);
}

.kc-filter-bar__button {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-xs);
  padding: var(--kc-space-sm) var(--kc-space-lg);
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-full);
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
  cursor: pointer;
  transition: all var(--kc-transition-fast);
}

.kc-filter-bar__button:hover {
  border-color: var(--kc-color-pink-400);
  color: var(--kc-color-pink-600);
}

.kc-filter-bar__button--active {
  background: var(--kc-color-pink-400);
  border-color: var(--kc-color-pink-400);
  color: var(--kc-color-text-inverse);
}

.kc-filter-bar__button--active:hover {
  background: var(--kc-color-pink-600);
  border-color: var(--kc-color-pink-600);
  color: var(--kc-color-text-inverse);
}

.kc-filter-bar__count {
  font-size: var(--kc-font-size-xs);
  opacity: 0.75;
}

/* =========================================================
 * ============ 5.3.4 活動報告: 記事リスト(row 型)
 * ========================================================= */
.kc-article-list {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-lg);
  margin-bottom: var(--kc-space-2xl);
}

.kc-article-list__item {
  transition: opacity var(--kc-transition-base);
}

.kc-article-list__item[hidden] {
  display: none;
}

.kc-article-row {
  padding: var(--kc-space-xl);
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  transition: border-color var(--kc-transition-base);
}

.kc-article-row:hover {
  border-color: var(--kc-color-pink-100);
}

.kc-article-row__meta {
  display: flex;
  align-items: center;
  gap: var(--kc-space-md);
  margin-bottom: var(--kc-space-sm);
}

.kc-article-row__date {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  letter-spacing: 0.05em;
}

.kc-article-row__category {
  display: inline-block;
  padding: 2px var(--kc-space-sm);
  font-size: var(--kc-font-size-xs);
  font-weight: var(--kc-font-weight-medium);
  border-radius: var(--kc-radius-sm);
}

.kc-article-row__category--council {
  background: var(--kc-color-pink-50);
  color: var(--kc-color-pink-600);
}

.kc-article-row__category--community {
  background: #E1F5EE;
  color: #0F6E56;
}

.kc-article-row__category--daily {
  background: #FAEEDA;
  color: #854F0B;
}

.kc-article-row__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-xl);
  margin-bottom: var(--kc-space-md);
  line-height: var(--kc-line-height-tight);
}

.kc-article-row__title a {
  color: var(--kc-color-text-primary);
}

.kc-article-row__title a:hover {
  color: var(--kc-color-pink-600);
  opacity: 1;
}

.kc-article-row__excerpt {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
  margin-bottom: var(--kc-space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kc-article-row__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-xs);
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-accent);
  font-weight: var(--kc-font-weight-medium);
  transition: gap var(--kc-transition-fast);
}

.kc-article-row__more:hover {
  gap: var(--kc-space-sm);
  opacity: 1;
}

@media (max-width: 767px) {
  .kc-article-row {
    padding: var(--kc-space-md);
  }

  .kc-article-row__title {
    font-size: var(--kc-font-size-lg);
  }
}

/* =========================================================
 * ============ 5.3.5 ページネーション
 * ========================================================= */
.kc-pagination {
  text-align: center;
  margin-top: var(--kc-space-2xl);
}

.kc-pagination__list {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-xs);
}

.kc-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--kc-space-md);
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-md);
  transition: all var(--kc-transition-fast);
}

.kc-pagination__link:hover {
  border-color: var(--kc-color-pink-400);
  color: var(--kc-color-pink-600);
  opacity: 1;
}

.kc-pagination__link--current {
  background: var(--kc-color-pink-400);
  border-color: var(--kc-color-pink-400);
  color: var(--kc-color-text-inverse);
  cursor: default;
}

.kc-pagination__link--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kc-pagination__link--disabled:hover {
  border-color: var(--kc-color-border-subtle);
  color: var(--kc-color-text-primary);
}

/* =========================================================
 * ============ 5.3.6 活動報告: サイドバー
 * ========================================================= */
.kc-sidebar-block {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-lg);
}

.kc-sidebar-block__title {
  font-family: var(--kc-font-sans);
  font-size: var(--kc-font-size-xs);
  font-weight: var(--kc-font-weight-medium);
  color: var(--kc-color-text-accent);
  letter-spacing: 0.15em;
  margin-bottom: var(--kc-space-md);
  padding-bottom: var(--kc-space-sm);
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-sidebar-sns li {
  margin-bottom: var(--kc-space-sm);
}

.kc-sidebar-sns li:last-child {
  margin-bottom: 0;
}

.kc-sidebar-sns a {
  display: block;
  padding: var(--kc-space-sm) var(--kc-space-md);
  background: var(--kc-color-bg-base);
  border-radius: var(--kc-radius-md);
  color: var(--kc-color-text-primary);
  transition: background var(--kc-transition-fast);
}

.kc-sidebar-sns a:hover {
  background: var(--kc-color-pink-50);
  opacity: 1;
}

.kc-sidebar-sns__label {
  display: block;
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-base);
  font-weight: var(--kc-font-weight-medium);
  color: var(--kc-color-text-primary);
}

.kc-sidebar-sns__note {
  display: block;
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  margin-top: 2px;
}

.kc-sidebar-list li {
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-sidebar-list li:last-child {
  border-bottom: none;
}

.kc-sidebar-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--kc-space-sm) 0;
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
}

.kc-sidebar-list a:hover {
  color: var(--kc-color-pink-600);
  opacity: 1;
}

.kc-sidebar-list__count {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  font-family: var(--kc-font-serif);
}

/* =========================================================
 * ============ 5.4.2 後援会: 趣旨ブロック
 * ========================================================= */
.kc-supporter-intro {
  text-align: left;
}

.kc-supporter-intro__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-2xl);
  color: var(--kc-color-text-primary);
  text-align: center;
  margin-bottom: var(--kc-space-xl);
  position: relative;
  padding-bottom: var(--kc-space-md);
}

.kc-supporter-intro__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--kc-color-pink-400);
}

.kc-supporter-intro__body > * + * {
  margin-top: var(--kc-space-md);
}

.kc-supporter-intro__body p {
  font-size: var(--kc-font-size-base);
  line-height: var(--kc-line-height-base);
  color: var(--kc-color-text-primary);
}

.kc-supporter-intro__list {
  list-style: none;
  padding: var(--kc-space-lg);
  background: var(--kc-color-pink-50);
  border-radius: var(--kc-radius-lg);
}

.kc-supporter-intro__list li {
  position: relative;
  padding-left: var(--kc-space-xl);
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-text-primary);
  line-height: var(--kc-line-height-base);
  margin-bottom: var(--kc-space-sm);
}

.kc-supporter-intro__list li:last-child {
  margin-bottom: 0;
}

.kc-supporter-intro__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 14px;
  height: 6px;
  border-left: 2px solid var(--kc-color-pink-400);
  border-bottom: 2px solid var(--kc-color-pink-400);
  transform: rotate(-45deg);
}

.kc-supporter-intro__note {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  padding: var(--kc-space-md);
  background: var(--kc-color-bg-subtle);
  border-radius: var(--kc-radius-md);
}

/* =========================================================
 * ============ 5.4.3 後援会: 入会3ステップ
 * ========================================================= */
.kc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kc-space-xl);
  counter-reset: steps-counter;
}

.kc-steps__item {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-xl);
  text-align: center;
  position: relative;
  counter-increment: steps-counter;
}

.kc-steps__item:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: calc(var(--kc-space-xl) * -1);
  transform: translateY(-50%);
  color: var(--kc-color-pink-400);
  font-size: var(--kc-font-size-lg);
  z-index: 2;
}

.kc-steps__number {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  font-style: italic;
  color: var(--kc-color-pink-400);
  letter-spacing: 0.1em;
  margin-bottom: var(--kc-space-sm);
}

.kc-steps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--kc-color-pink-50);
  color: var(--kc-color-pink-600);
  border-radius: var(--kc-radius-full);
  margin-bottom: var(--kc-space-md);
}

.kc-steps__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-sm);
}

.kc-steps__text {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-secondary);
  line-height: var(--kc-line-height-base);
}

@media (max-width: 767px) {
  .kc-steps {
    grid-template-columns: 1fr;
    gap: var(--kc-space-md);
  }

  .kc-steps__item:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 50%;
    bottom: calc(var(--kc-space-md) * -1);
    transform: translateX(50%);
  }
}

/* =========================================================
 * ============ 5.4.4 後援会: フォーム
 * ========================================================= */
.kc-form {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-2xl);
}

.kc-form__field {
  margin-bottom: var(--kc-space-lg);
}

.kc-form__field:last-of-type {
  margin-bottom: 0;
}

.kc-form__label {
  display: block;
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-font-weight-medium);
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-sm);
}

.kc-form__required {
  display: inline-block;
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-state-error);
  margin-left: var(--kc-space-xs);
}

.kc-form__optional {
  display: inline-block;
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  font-weight: var(--kc-font-weight-regular);
  margin-left: var(--kc-space-xs);
}

.kc-form__input,
.kc-form__textarea {
  width: 100%;
  padding: var(--kc-space-md);
  font-size: var(--kc-font-size-base);
  font-family: inherit;
  color: var(--kc-color-text-primary);
  background: var(--kc-color-bg-base);
  border: 1px solid var(--kc-color-border-default);
  border-radius: var(--kc-radius-md);
  transition: border-color var(--kc-transition-fast), background var(--kc-transition-fast);
}

.kc-form__input:focus,
.kc-form__textarea:focus {
  outline: none;
  border-color: var(--kc-color-pink-400);
  background: var(--kc-color-bg-card);
  box-shadow: 0 0 0 3px rgba(212, 83, 126, 0.15);
}

.kc-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.kc-form__help {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  margin-top: var(--kc-space-xs);
}

.kc-form__error {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-state-error);
  margin-top: var(--kc-space-xs);
}

.kc-form__field--error .kc-form__input,
.kc-form__field--error .kc-form__textarea {
  border-color: var(--kc-color-state-error);
  background: rgba(163, 45, 45, 0.03);
}

.kc-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--kc-space-sm);
  cursor: pointer;
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
  line-height: var(--kc-line-height-base);
}

.kc-form__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--kc-color-pink-400);
}

.kc-form__note {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  padding: var(--kc-space-md);
  background: var(--kc-color-bg-subtle);
  border-radius: var(--kc-radius-md);
  margin-top: var(--kc-space-xl);
  margin-bottom: var(--kc-space-xl);
  line-height: var(--kc-line-height-base);
}

.kc-form__actions {
  text-align: center;
  margin-top: var(--kc-space-xl);
}

.kc-form__success {
  text-align: center;
  padding: var(--kc-space-2xl);
  background: var(--kc-color-pink-50);
  border-radius: var(--kc-radius-lg);
  margin-top: var(--kc-space-xl);
}

.kc-form__success-title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-xl);
  color: var(--kc-color-pink-600);
  margin-bottom: var(--kc-space-sm);
}

.kc-form__success-text {
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-primary);
}

@media (max-width: 767px) {
  .kc-form {
    padding: var(--kc-space-lg);
  }
}

/* =========================================================
 * ============ 5.4.6 後援会: 事務所連絡先
 * ========================================================= */
.kc-contact-box {
  background: var(--kc-color-bg-card);
  border: 1px solid var(--kc-color-border-subtle);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-space-xl);
}

.kc-contact-box__list {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-md);
}

.kc-contact-box__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--kc-space-md);
  padding-bottom: var(--kc-space-md);
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-contact-box__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.kc-contact-box__label {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-text-accent);
  padding-top: 2px;
}

.kc-contact-box__value {
  font-size: var(--kc-font-size-base);
  color: var(--kc-color-text-primary);
  line-height: var(--kc-line-height-base);
}

.kc-contact-box__value a {
  color: var(--kc-color-text-primary);
  font-weight: var(--kc-font-weight-medium);
}

.kc-contact-box__value a:hover {
  color: var(--kc-color-pink-600);
  opacity: 1;
}

.kc-contact-box__note {
  display: block;
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  margin-top: 2px;
}

@media (max-width: 767px) {
  .kc-contact-box__row {
    grid-template-columns: 1fr;
    gap: var(--kc-space-xs);
  }
}

/* =========================================================
 * ============ 5.4.7 後援会ページ用CTA調整
 * ========================================================= */
.kc-cta-block--no-action .kc-cta-block__action {
  display: none;
}

.kc-cta-block--no-action .kc-cta-block__inner {
  grid-template-columns: auto 1fr;
}

@media (max-width: 767px) {
  .kc-cta-block--no-action .kc-cta-block__inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * ============ 5.5.3 プライバシー: 法的文書スタイル
 * ========================================================= */
.kc-legal {
  font-size: var(--kc-font-size-base);
  line-height: var(--kc-line-height-base);
  color: var(--kc-color-text-primary);
}

.kc-legal__section {
  margin-bottom: var(--kc-space-xl);
}

.kc-legal__section:last-of-type {
  margin-bottom: var(--kc-space-2xl);
}

.kc-legal__title {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-lg);
  color: var(--kc-color-text-primary);
  padding-bottom: var(--kc-space-sm);
  margin-bottom: var(--kc-space-md);
  border-bottom: 1px solid var(--kc-color-border-subtle);
}

.kc-legal p {
  margin-bottom: var(--kc-space-md);
  line-height: var(--kc-line-height-base);
}

.kc-legal p:last-child {
  margin-bottom: 0;
}

.kc-legal ul {
  list-style: disc;
  padding-left: var(--kc-space-xl);
  margin-bottom: var(--kc-space-md);
}

.kc-legal ul li {
  margin-bottom: var(--kc-space-xs);
  line-height: var(--kc-line-height-base);
}

.kc-legal__contact {
  background: var(--kc-color-bg-subtle);
  padding: var(--kc-space-lg);
  border-radius: var(--kc-radius-md);
  margin-top: var(--kc-space-md);
}

.kc-legal__footer {
  padding-top: var(--kc-space-xl);
  border-top: 1px solid var(--kc-color-border-subtle);
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-secondary);
  text-align: right;
}

/* =========================================================
 * ============ Part 2: carekura 風リッチ化(design-spec §13-§15)
 * Part 1 のルールを壊さず、カスケード上書きで質感を増す。
 * ========================================================= */

/* ---------------------------------------------------------
 * §13.1 英字 eyebrow の強化(装飾線付き)
 * ------------------------------------------------------- */
.kc-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-md);
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-weight-serif-bold);
  font-style: italic;
  color: var(--kc-color-pink-400);
  letter-spacing: var(--kc-letter-spacing-wider);
  margin-bottom: var(--kc-space-lg);
  text-transform: none;
}

.kc-section__eyebrow::before,
.kc-section__eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---------------------------------------------------------
 * §13.2 エディトリアル見出し構成は撤回(日本語中心の見出しに統一)
 * ------------------------------------------------------- */

/* ---------------------------------------------------------
 * §14.4.1 ヒーローに歩く人イラスト
 * ------------------------------------------------------- */
.kc-hero__illust {
  position: absolute;
  bottom: 40px;
  right: 5%;
  width: 80px;
  height: 80px;
  opacity: 0.7;
  z-index: 1;
  will-change: transform;
}

@media (max-width: 767px) {
  .kc-hero__illust {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 10px;
    opacity: 0.6;
  }
}

/* ---------------------------------------------------------
 * §14.4.6 ヒーロータグラインの葉イラストは撤去済み(HTML から削除)
 * ------------------------------------------------------- */

/* ---------------------------------------------------------
 * §14.4.2 ストーリーセクションに花瓶イラスト
 * ------------------------------------------------------- */
.kc-story-illust {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 100px;
  height: 100px;
  opacity: 0.6;
  z-index: 1;
  will-change: transform;
}

@media (max-width: 767px) {
  .kc-story-illust {
    width: 60px;
    height: 60px;
    top: 2%;
    right: 15px;
  }
}

/* ---------------------------------------------------------
 * §14.4.3 政策カードの右上にイラスト
 * (.kc-policy-card は既に position: relative なのでそのまま利用)
 * ------------------------------------------------------- */
.kc-policy-card__illust {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 60px;
  height: 60px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--kc-transition-base);
}

.kc-policy-card:hover .kc-policy-card__illust {
  opacity: 0.7;
}

/* カード内コンテンツはイラストより前面に */
.kc-policy-card__icon,
.kc-policy-card__title,
.kc-policy-card__text,
.kc-policy-card__link {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .kc-policy-card__illust {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }
}

/* ---------------------------------------------------------
 * §14.4.4 活動報告セクションに本の山イラスト
 * ------------------------------------------------------- */
.kc-activity-illust {
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  z-index: 1;
  will-change: transform;
}

@media (max-width: 767px) {
  .kc-activity-illust {
    width: 60px;
    height: 60px;
    bottom: 5%;
    left: 15px;
    opacity: 0.4;
  }
}

/* ---------------------------------------------------------
 * §14.4.5 各ページヘッダーのイラスト(index以外でも使用)
 * ------------------------------------------------------- */
.kc-page-header__illust {
  position: absolute;
  top: 30%;
  right: 8%;
  width: 90px;
  height: 90px;
  opacity: 0.5;
  z-index: 1;
}

@media (max-width: 767px) {
  .kc-page-header__illust {
    width: 50px;
    height: 50px;
    top: 20%;
    right: 15px;
    opacity: 0.4;
  }
}

/* ---------------------------------------------------------
 * §15.2 ストーリーセクションのコラージュグリッド
 * ------------------------------------------------------- */
.kc-story__collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: var(--kc-space-md);
  margin-top: var(--kc-space-3xl);
  margin-bottom: var(--kc-space-3xl);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.kc-collage-item {
  overflow: hidden;
  border-radius: var(--kc-radius-lg);
  background: var(--kc-color-bg-subtle);
  box-shadow: var(--kc-shadow-soft);
  transition: transform 800ms var(--kc-ease-gentle),
              box-shadow 800ms var(--kc-ease-gentle);
}

.kc-collage-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--kc-shadow-elegant);
}

.kc-collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--kc-ease-gentle);
}

.kc-collage-item:hover img {
  transform: scale(1.05);
}

.kc-collage-item:nth-child(1) { grid-column: 1 / span 5; grid-row: 1 / span 3; }
.kc-collage-item:nth-child(2) { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.kc-collage-item:nth-child(3) { grid-column: 9 / span 4; grid-row: 1 / span 3; }
.kc-collage-item:nth-child(4) { grid-column: 6 / span 3; grid-row: 3 / span 2; }
.kc-collage-item:nth-child(5) { grid-column: 1 / span 4; grid-row: 4 / span 2; }
.kc-collage-item:nth-child(6) { grid-column: 9 / span 4; grid-row: 4 / span 2; }

@media (max-width: 1023px) {
  .kc-story__collage {
    grid-template-columns: repeat(6, 1fr);
  }

  .kc-collage-item:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .kc-collage-item:nth-child(2) { grid-column: 5 / span 2; grid-row: 1 / span 1; }
  .kc-collage-item:nth-child(3) { grid-column: 5 / span 2; grid-row: 2 / span 1; }
  .kc-collage-item:nth-child(4) { grid-column: 1 / span 2; grid-row: 3 / span 1; }
  .kc-collage-item:nth-child(5) { grid-column: 3 / span 2; grid-row: 3 / span 1; }
  .kc-collage-item:nth-child(6) { grid-column: 5 / span 2; grid-row: 3 / span 1; }
}

@media (max-width: 767px) {
  .kc-story__collage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;          /* 120px固定をやめる */;
  }

  .kc-collage-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
	aspect-ratio: 3 / 2;           /* 高さは縦横比で決める。正方形で顔切れを防ぐ */
  }

  .kc-collage-item:nth-child(1),
  .kc-collage-item:nth-child(3) {
    grid-column: span 2 !important;
  }
}

/* =========================================================
 * ============ 章13 v3: 縦書き見出し + 左右非対称レイアウト
 * design-spec.md §13.3〜§13.9 を適用。
 * 英字 editorial 見出し(v2)は撤回済み(§13.0)。日本語中心・縦書き主軸。
 * 既存の kc-hero / kc-section 関連ルールを末尾で上書きする。
 * ========================================================= */

/* ---------------------------------------------------------
 * §13.9 セクション余白の拡張バリアント
 * ------------------------------------------------------- */
.kc-section--spacious {
  padding-top: var(--kc-space-7xl);
  padding-bottom: var(--kc-space-7xl);
}

@media (max-width: 767px) {
  .kc-section--spacious {
    padding-top: var(--kc-space-4xl);
    padding-bottom: var(--kc-space-4xl);
  }
}

/* ---------------------------------------------------------
 * §13.3 ヒーロー CSS はファイル末尾の「ヒーロー再設計」ブロックに統合
 * ------------------------------------------------------- */

/* ---------------------------------------------------------
 * §13.4 セクション split レイアウト(左に縦書き見出し sticky)
 * ------------------------------------------------------- */
.kc-section--split .kc-section__split-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 3fr;
  gap: var(--kc-space-4xl);
  align-items: start;
}

.kc-section__split-headline {
  position: sticky;
  top: var(--kc-space-6xl);
  padding-top: var(--kc-space-xl);
  display: flex;
  justify-content: center;
}

/* §13.4 v3 の .kc-section__title-vertical 系は撤去済み。
 * About は末尾の kc-about__ 名前空間で新構造に置換。 */

.kc-section__split-content {
  min-width: 0;
}

@media (max-width: 1023px) {
  .kc-section--split .kc-section__split-layout {
    grid-template-columns: 1fr;
    gap: var(--kc-space-2xl);
  }

  .kc-section__split-headline {
    position: static;
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
 * §13.8 フルワイド写真バンド
 * ------------------------------------------------------- */
.kc-fullwidth-photo {
  position: relative;
  width: 100%;
  height: clamp(320px, 50vh, 560px);
  overflow: hidden;
  margin: 0; /* 改善6: 上下余白を詰めて次セクションと直接繋げる */
}

.kc-fullwidth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kc-fullwidth-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(58, 37, 25, 0.1) 0%,
    rgba(58, 37, 25, 0.35) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.kc-fullwidth-photo__caption {
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  color: var(--kc-color-text-inverse);
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0 var(--kc-space-xl);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .kc-fullwidth-photo {
    height: 280px;
    margin: 0; /* 改善6: モバイルも上下余白0で直接接続 */
  }
}

/* =========================================================
 * 改善2・3: 主要セクション(重点政策・活動報告)の横書き大見出し
 * 縦書きsplit構造を使わず中央揃え + アクセント線。
 * ========================================================= */
.kc-section__header--featured {
  text-align: center;
  margin-bottom: var(--kc-space-4xl);
  position: relative;
}

.kc-section__title-large {
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: var(--kc-line-height-tight);
  letter-spacing: 0.08em;
  color: var(--kc-color-text-primary);
  margin-bottom: var(--kc-space-lg);
  position: relative;
  display: inline-block;
  padding-bottom: var(--kc-space-md);
}

.kc-section__title-large::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--kc-color-pink-400);
}

@media (max-width: 767px) {
  .kc-section__title-large {
    font-size: 2rem;
  }
}

/* =========================================================
 * 旧 About 縦書き見出し(kc-section__title-vertical/main/sub)は
 * ファイル末尾の kc-about__ 名前空間にリプレース済み。
 * ========================================================= */

/* =========================================================
 * ============ ヒーロー再設計(grid 2カラム + 右 flex column)
 * .kc-hero__layout (grid 2col) → 左: portrait / 右: kc-hero__right
 *   └ kc-hero__right (flex col) → title-area (2つの縦書き列) + intro-area
 *     └ kc-hero__title-area (flex row, height: 55vh で縦書きの箱を固定)
 *       ├ kc-hero__title-column--name
 *       └ kc-hero__title-column--tagline
 * ========================================================= */
.kc-hero {
  min-height: 100vh;
  padding: calc(72px + var(--kc-space-xl)) 0 var(--kc-space-2xl);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.kc-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--kc-space-3xl);
  align-items: center;
  width: 100%;
}

.kc-hero__portrait {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  justify-self: center;
  overflow: hidden;
  border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-dreamy);
  background: var(--kc-color-bg-subtle);
}

.kc-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc-hero__right {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2xl);
}

.kc-hero__title-area {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--kc-space-xl);
  height: 55vh;
  max-height: 560px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding-right: clamp(40px, 6vw, 120px);
  position: relative;
  z-index: 2;
}

.kc-hero__title-column {
  display: flex;
  height: 100%;
}

.kc-hero__title-column--name {
  align-items: flex-start;
}

.kc-hero__title-column--tagline {
  align-items: flex-start;
  padding-top: var(--kc-space-2xl);
}

.kc-hero__name-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--kc-color-text-primary);
  white-space: nowrap;
}

.kc-hero__tagline-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.6;
  letter-spacing: 0.15em;
  color: var(--kc-color-text-secondary);
  white-space: nowrap;
}

.kc-hero__intro-area {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-md);
}

.kc-hero__role {
  font-family: var(--kc-font-serif);
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-weight-serif-bold);
  letter-spacing: var(--kc-letter-spacing-wider);
  color: var(--kc-color-pink-600);
}

.kc-hero__lead {
  font-family: var(--kc-font-sans);
  font-size: var(--kc-font-size-base);
  line-height: var(--kc-line-height-expanded);
  color: var(--kc-color-text-primary);
  max-width: 480px;
}

.kc-hero__actions {
  display: flex;
  gap: var(--kc-space-md);
  flex-wrap: wrap;
  margin-top: var(--kc-space-md);
}

/* タブレット */
@media (max-width: 1023px) {
  .kc-hero__layout {
    grid-template-columns: 1fr;
    gap: var(--kc-space-2xl);
  }

  .kc-hero__portrait {
    max-width: 320px;
  }

  .kc-hero__title-area {
    flex-direction: row-reverse;
    height: 45vh;
    max-height: 420px;
    justify-content: center;
    padding-right: 0;
  }

  .kc-hero__intro-area {
    align-items: center;
    text-align: center;
  }

  .kc-hero__actions {
    justify-content: center;
  }
}

/* モバイル: 縦書き → 横書き */
@media (max-width: 767px) {
  .kc-hero {
    min-height: auto;
    padding: calc(72px + var(--kc-space-lg)) 0 var(--kc-space-xl);
  }

  .kc-hero__title-area {
    flex-direction: column;
    height: auto;
    max-height: none;
    gap: var(--kc-space-sm);
    align-items: center;
    text-align: center;
  }

  .kc-hero__title-column {
    height: auto;
  }

  .kc-hero__title-column--tagline {
    padding-top: 0;
  }

  .kc-hero__name-vertical,
  .kc-hero__tagline-vertical {
    writing-mode: horizontal-tb;
    white-space: normal;
  }

  .kc-hero__name-vertical {
    font-size: 2.5rem;
  }

  .kc-hero__tagline-vertical {
    font-size: 1.125rem;
  }
}

/* =========================================================
 * ============ About の縦書き見出し(hero と同方式 / kc-about__ 名前空間)
 * .kc-about__title-area (flex row-reverse) → 2つの縦書き列
 *   ├ .kc-about__title-column--main  → h2.kc-about__title-main-vertical
 *   └ .kc-about__title-column--sub   → span.kc-about__title-sub-vertical
 * ========================================================= */
.kc-about__title-area {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--kc-space-xl);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.kc-about__title-column {
  display: flex;
  height: 100%;
}

.kc-about__title-column--main {
  align-items: flex-start;
}

.kc-about__title-column--sub {
  align-items: flex-start;
  padding-top: var(--kc-space-2xl);
}

.kc-about__title-main-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--kc-color-text-primary);
  white-space: nowrap;
  margin: 0;
}

.kc-about__title-sub-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--kc-font-serif);
  font-weight: var(--kc-weight-serif-light);
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  letter-spacing: 0.2em;
  color: var(--kc-color-text-secondary);
  white-space: nowrap;
}

/* タブレット */
@media (max-width: 1023px) {
  .kc-about__title-area {
    flex-direction: row-reverse;
    justify-content: center;
  }
}

/* モバイル: 縦書き → 横書き */
@media (max-width: 767px) {
  .kc-about__title-area {
    flex-direction: column;
    height: auto;
    max-height: none;
    gap: var(--kc-space-sm);
    align-items: center;
    text-align: center;
  }

  .kc-about__title-column {
    height: auto;
  }

  .kc-about__title-column--sub {
    padding-top: 0;
  }

  .kc-about__title-main-vertical,
  .kc-about__title-sub-vertical {
    writing-mode: horizontal-tb;
    white-space: normal;
  }

  .kc-about__title-main-vertical {
    font-size: 2rem;
  }

  .kc-about__title-sub-vertical {
    font-size: 1rem;
  }
}
/* =========================================================
 * 背景装飾システム(design-spec.md §4)
 *
 * components.css の後に読み込むこと。
 * .kc-section の position/overflow を拡張し、blob や grain が
 * セクション外にはみ出さないようにする。
 * ========================================================= */

/* ===== SVG装飾ラッパー ===== */
.kc-bg-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.kc-bg-decoration__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== ぼかしブロブ ===== */
.kc-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.kc-blob--pink-warm {
  background: radial-gradient(circle, var(--kc-color-pink-100) 0%, var(--kc-color-pink-50) 60%, transparent 100%);
}

.kc-blob--blush-soft {
  background: radial-gradient(circle, var(--kc-color-blush) 0%, transparent 70%);
}

.kc-blob--rose-dust {
  background: radial-gradient(circle, var(--kc-color-rose-dust) 0%, transparent 70%);
}

/* ===== グレインパターン(セクションローカル用) ===== */
.kc-pattern-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("../images/decorative/grain.svg");
  z-index: 0;
}

/* ===== セクションを装飾のキャンバスに ===== */
.kc-section {
  position: relative;
  overflow: hidden;
}

.kc-section > .kc-container {
  position: relative;
  z-index: 2;
}

/* ===== セクション区切りの装飾イラスト ===== */
.kc-divider {
  display: flex;
  justify-content: center;
  margin: var(--kc-space-3xl) 0;
}

.kc-divider img {
  width: 200px;
  height: 40px;
  opacity: 0.6;
}

/* =========================================================
 * 改善7(再修正): フッター上部の街並みシルエット
 * inline SVG で currentColor を確実に適用。
 * color は .kc-footer の background と完全一致させる(現在 bg-subtle)。
 * ========================================================= */
.kc-footer-skyline {
  color: var(--kc-color-bg-subtle);
  line-height: 0;
  margin-bottom: -1px;
  overflow: hidden;
  display: block;
  font-size: 0;
}

.kc-footer-skyline svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 80px;
}

/* スカイラインの直後に来るフッターは、layout.css で設定されている
 * margin-top: var(--kc-space-4xl) を打ち消して直接接続させる。
 * 他ページ(まだスカイライン未配置)ではフッターの元のマージンが維持される。 */
.kc-footer-skyline + .kc-footer {
  margin-top: 0;
}

@media (max-width: 767px) {
  .kc-footer-skyline svg {
    min-height: 60px;
  }
}