/* =========================================================
   トップページ専用スタイル

   デザイントークン（--ks-* / --fp-*）は ks-common.css で定義している。
   このファイルは ks-common.css の後に読み込まれる前提。
   font-size は賢威8の html{font-size:62.5%} に合わせて 1rem = 10px。
   ========================================================= */

/* 2カラム設定時の保険：keni-main_outer の 1200px 制限を解除する。
   2026-08-30 に賢威の基本レイアウトを本番と同じ col1 に揃えたため
   通常はこのルールは効かない（誰かが2カラムに戻した場合のフォールバック）。*/
html.col2 .home .keni-main_outer {
  max-width: none !important;
  padding: 0;
  width: 100%;
}

/* ===== 共通 ===== */

.fp-wrap {
  font-family: 'Zen Maru Gothic', sans-serif;
  background: var(--fp-cream);
  color: var(--fp-ink);
}

.fp-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.fp-section-label {
  display: inline-block;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fp-sky);
  border-bottom: 2px solid var(--fp-sky);
  padding-bottom: 0.32rem;
  margin-bottom: 1.6rem;
}

/* 親テーマ（賢威8）の h1〜h3 装飾（青ベタ帯・下線・パディング）を打ち消す。
   margin はセクション側で個別に指定するため、ここでは触らない。 */
.fp-wrap h1,
.fp-wrap h2,
.fp-wrap h3 {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
}
.fp-wrap h1::before, .fp-wrap h1::after,
.fp-wrap h2::before, .fp-wrap h2::after,
.fp-wrap h3::before, .fp-wrap h3::after { content: none; }

.fp-wrap .fp-section-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: 3.04rem;
  line-height: 1.5;
  color: var(--ks-ink);
  margin: 0 0 3.2rem;
}

.fp-section-sub {
  font-size: 1.44rem;
  color: var(--fp-ink-soft);
  margin-top: -2.4rem;
  margin-bottom: 3.2rem;
}

/* ===== ボタン ===== */

.fp-btn-primary {
  display: inline-block;
  background: var(--fp-sky);
  color: white;
  text-decoration: none;
  font-weight: 700;
  padding: 1.52rem 3.52rem;
  border-radius: 4.8rem;
  font-size: 1.6rem;
  box-shadow: 0 5px 0 var(--ks-blue-d);
  white-space: nowrap;
  transition: transform 0.15s;
}
.fp-btn-primary:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ks-blue-d); color: white; }

.fp-btn-ghost {
  display: inline-block;
  background: white;
  color: var(--fp-ink);
  text-decoration: none;
  font-weight: 700;
  padding: 1.6rem 4rem;
  border-radius: 4.8rem;
  font-size: 1.6rem;
  box-shadow: 0 5px 0 #E0E6F0;
  white-space: nowrap;
  transition: transform 0.15s;
}
.fp-btn-ghost:hover { transform: translateY(2px); box-shadow: 0 3px 0 #E0E6F0; color: var(--fp-ink); }

.fp-btn-donate {
  display: inline-block;
  background: var(--ks-blue);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1.52rem 3.52rem;
  border-radius: 4.8rem;
  box-shadow: 0 5px 0 var(--ks-blue-d);
  white-space: nowrap;
  transition: transform 0.15s;
}
.fp-btn-donate:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ks-blue-d); color: white; }

.fp-btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--fp-sky);
  text-decoration: none;
  font-weight: 700;
  padding: 1.2rem 3.2rem;
  border-radius: 4.8rem;
  font-size: 1.44rem;
  border: 2px solid var(--fp-sky);
  transition: background 0.15s, color 0.15s;
}
.fp-btn-outline:hover { background: var(--fp-sky); color: white; }

/* =========================================================
   ① ヒーロー
   背景画像は左＝クリーム地＋街イラスト / 右＝写真 が
   1枚に焼き込まれた状態（2560×681）。
   PCは絶対配置でテキストを左半分に重ね、
   SPは「画像帯 → テキスト」に縦積みする。
   ========================================================= */

.ks-hero {
  position: relative;
  width: 100%;
  min-height: 340px;   /* 狭い画面でもテキストが収まる高さを確保 */
  overflow: hidden;
  background: #fff;
}

/* 背景写真の URL は front-page.php が CSS変数で渡す
   （カスタマイザーの「トップページ ヒーロー」で差し替え可能） */
.ks-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--ks-hero-pc);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 画像のアスペクト比で高さを決めるスペーサー */
.ks-hero::before {
  content: '';
  display: block;
  padding-top: 26.6%;      /* 681 / 2560 */
}

.ks-hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 4.8rem);
  display: flex;
  align-items: center;
}

.ks-hero-text {
  width: min(48%, 560px);
  /* 背景画像の左下に街のイラストが焼き込まれているので、
     テキストが重ならないよう中央よりやや上に置く。
     （ヒーローのボタンを外してブロックが短くなった分も見込んでいる） */
  transform: translateY(-14%);
}

/* --- 見出し --- */

.fp-wrap .ks-hero-h1 {
  font-family: 'Yomogi', 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 3.5vw, 5.12rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ks-ink);
  margin: 0 0 clamp(0.96rem, 1.4vw, 1.92rem);
  position: relative;
}

.ks-hl-yellow { color: #F2A20C; }
.ks-hl-green  { color: var(--ks-green); }

/* 見出し左上のキラキラ */
.ks-hero-sparkle {
  position: absolute;
  top: -0.7em;
  left: -0.15em;
  width: clamp(28px, 3.4vw, 52px);
  height: auto;
  pointer-events: none;
}

.ks-hero-desc {
  font-size: clamp(1.25rem, 1.15vw, 1.68rem);
  line-height: 1.9;
  color: var(--ks-ink);
  margin: 0 0 clamp(1.44rem, 1.8vw, 2.72rem);
}

/* --- ヒーローのボタン --- */

.ks-hero-buttons {
  display: flex;
  gap: clamp(0.8rem, 1vw, 1.6rem);
  flex-wrap: wrap;
}

/* ボタン（.ks-btn / .ks-btn-primary / .ks-btn-ghost）は
   下層ページでも使うので ks-common.css で定義している。 */

/* --- 次回開催の丸バッジ（カスタマイザーで内容を編集） --- */

.ks-hero-badge {
  position: absolute;
  z-index: 3;
  right: clamp(1.28rem, 5vw, 8.8rem);
  bottom: clamp(0.96rem, 3.5vw, 5.12rem);
  width: clamp(112px, 13.5vw, 176px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FFFBEE;
  border: 3px solid var(--ks-yellow);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  text-align: center;
  text-decoration: none;
  color: var(--ks-ink);
  line-height: 1.35;
  transition: transform 0.15s;
}
.ks-hero-badge:hover { transform: translateY(-3px); color: var(--ks-ink); }

.ks-badge-lead  { font-size: clamp(0.99rem, 0.88vw, 1.41rem); }
.ks-badge-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: clamp(1.12rem, 1vw, 1.6rem);
  color: var(--ks-blue);
}
.ks-badge-date {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 1.65vw, 2.64rem);
  color: #E9860B;
}
.ks-badge-foot { font-size: clamp(0.99rem, 0.88vw, 1.41rem); }

.ks-badge-go {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 2.1em;
  height: 2.1em;
  font-size: clamp(0.99rem, 0.9vw, 1.52rem);
  border-radius: 50%;
  background: var(--ks-yellow);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* --- ヒーロー SP --- */

@media (max-width: 860px) {
  /* --sp-band = スマホでの写真帯の高さ。バッジの位置もこの値から計算するので、
     ここを変えるだけで写真とバッジが一緒に動く。 */
  .ks-hero { display: flex; flex-direction: column; min-height: 0; --sp-band: 210px; }
  .ks-hero::before { content: none; }

  /* スマホ用の縦長写真が設定されているときは帯を高くする */
  .ks-hero.has-sp-bg { --sp-band: min(122vw, 500px); }

  .ks-hero-bg {
    position: relative;
    inset: auto;
    height: var(--sp-band);
    background-image: var(--ks-hero-sp, var(--ks-hero-pc));
    background-size: cover;
    /* PC用画像を流用する場合は写真側（右寄り）だけを見せる。
       これより左だと街イラストの端が中途半端に写り込む。 */
    background-position: 88% center;
  }
  .ks-hero.has-sp-bg .ks-hero-bg { background-position: center; }

  .ks-hero-inner {
    position: relative;
    inset: auto;
    display: block;
    padding: 2.56rem 2.08rem 3.2rem;
    background: linear-gradient(180deg, #FFFDF4 0%, #FFFFFF 70%);
  }

  /* スマホでは中央寄せ。行の長さがほぼ揃っているので階段状にならず、
     左右の余白も均等になる。 */
  .ks-hero-text { width: 100%; transform: none; text-align: center; }
  .ks-hero-h1   { font-size: 2.64rem; }
  /* 下マージンはヒーローのボタンがあった頃の名残。PCでは縦位置の計算に
     使っているので残し、SPでは不要なので消す。 */
  .ks-hero-desc { font-size: 1.44rem; margin-bottom: 0; }
  .ks-btn       { font-size: 1.36rem; }

  /* 見出しを中央寄せにすると左上のキラキラだけ取り残されるので中央上へ */
  .ks-hero-sparkle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* バッジは写真の中（右下）へ。
     文章の下に置くと縦の場所を取り、読む流れも止めてしまうため。 */
  .ks-hero-badge {
    position: absolute;
    top: calc(var(--sp-band) - 142px);
    right: 1.6rem;
    bottom: auto;
    left: auto;
    margin: 0;
    width: 130px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  }
}

/* =========================================================
   ③ 私たちの想い
   丸写真 / 本文＋詳しく見る / 3つのアイコン の3カラム
   ========================================================= */

.ks-omoi {
  background: #fff;
  padding: clamp(4rem, 5vw, 7.2rem) 0;
}

.ks-omoi-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 3.2rem);
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1.3fr) minmax(0, 1.35fr);
  gap: clamp(1.92rem, 3vw, 4.16rem);
  align-items: center;
}

/* --- 丸写真（カスタマイザーで差し替え） --- */

/* 外周をふわっとぼかして地の色になじませる。
   マスクした縁に影を落とすと四角い影がはみ出て見えるので box-shadow は使わない。 */
.ks-omoi-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, rgba(0,0,0,0.45) 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 74%, rgba(0,0,0,0.45) 90%, transparent 100%);
}

.ks-omoi-photo.is-placeholder {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.75), transparent 55%),
    linear-gradient(140deg, #FBE3C4 0%, #F3CFA8 100%);
}

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

/* --- 本文 --- */

.fp-wrap .ks-omoi-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: clamp(1.68rem, 1.6vw, 2.24rem);
  color: var(--ks-blue);
  margin: 0 0 1.44rem;
}

.ks-omoi-lead {
  font-weight: 700;
  font-size: clamp(1.41rem, 1.1vw, 1.6rem);
  line-height: 1.9;
  margin: 0 0 1.44rem;
}

.ks-omoi-text {
  font-size: clamp(1.4rem, 0.98vw, 1.6rem);
  line-height: 2;
  margin: 0 0 1.92rem;
}

.ks-omoi-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ks-blue);
  font-weight: 700;
  font-size: clamp(1.28rem, 0.95vw, 1.44rem);
  text-decoration: none;
}
.ks-omoi-more:hover { color: var(--ks-blue-d); text-decoration: underline; }

/* --- 3つのアイコン --- */

.ks-omoi-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ks-omoi-point {
  text-align: center;
  padding: 0 clamp(0.32rem, 0.6vw, 0.96rem);
}
.ks-omoi-point + .ks-omoi-point { border-left: 1px solid var(--ks-line); }

.ks-omoi-point--pink   { --c: var(--ks-pink);   --tint: #FDEEF0; }
.ks-omoi-point--green  { --c: var(--ks-green);  --tint: #EAF6EF; }
.ks-omoi-point--yellow { --c: var(--ks-yellow); --tint: #FFF6DE; }

.ks-omoi-ico {
  width: clamp(46px, 4.4vw, 62px);
  height: clamp(46px, 4.4vw, 62px);
  margin: 0 auto 1.12rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* WP/親テーマ側に svg{fill:...} があり属性の fill="none" が負けるため CSS で明示する */
.ks-omoi-ico svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
}

.ks-omoi-point p {
  font-size: clamp(1.3rem, 0.9vw, 1.45rem);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 960px) {
  .ks-omoi-inner { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); }
  .ks-omoi-points { grid-column: 1 / -1; margin-top: 0.8rem; }
}

@media (max-width: 560px) {
  .ks-omoi-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ks-omoi-photo { width: 150px; }
  /* 3アイコンは縦積みにすると間延びするので、SPでも横3列のまま */
  .ks-omoi-points { width: 100%; }
  .ks-omoi-point { padding: 0 0.4rem; }
  .ks-omoi-point p { font-size: 1.15rem; }
}

/* =========================================================
   ④ 活動の様子（Instagram）
   カルーセル化はプラグイン有効化後に対応（Phase 3 後半）
   ========================================================= */

.ks-insta {
  background: var(--ks-cream);
  padding: clamp(4rem, 5vw, 7.2rem) 0;
}

.ks-insta-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 3.2rem);
}

.ks-insta-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-bottom: clamp(1.92rem, 3vw, 3.2rem);
}

.ks-insta-icon {
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
  color: var(--ks-pink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-insta-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }

.fp-wrap .ks-insta-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 2vw, 2.8rem);
  color: var(--ks-ink);
  margin: 0;
}

.ks-insta-sub {
  font-size: clamp(1.25rem, 0.95vw, 1.44rem);
  color: var(--ks-ink-soft);
  margin: 0;
}

/* --- カルーセル本体 ---
   #sbi_images は Smash Balloon が inline style で grid を当てるため
   打ち消しには !important が要る。 */

.ks-insta-carousel { position: relative; }

.ks-insta-feed .sb_instagram_header,
.ks-insta-feed #sbi_load { display: none !important; }

.ks-insta-feed #sbi_images {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 1.6rem !important;
  padding: 0 0 0.8rem !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧Edge */
}
.ks-insta-feed #sbi_images::-webkit-scrollbar { width: 0; height: 0; display: none; }

.ks-insta-feed .sbi_item {
  flex: 0 0 clamp(150px, 18.7%, 200px);
  scroll-snap-align: start;
  padding: 0 !important;
  margin: 0 !important;
}

.ks-insta-feed .sbi_photo_wrap,
.ks-insta-feed .sbi_photo {
  border-radius: 0.8rem;
  overflow: hidden;
}

/* --- 左右の丸矢印 --- */

.ks-insta-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ks-blue);
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}
.ks-insta-nav:hover:not(:disabled) { background: var(--ks-blue-d); }
.ks-insta-nav:disabled { opacity: 0.35; cursor: default; }
.ks-insta-nav[hidden] { display: none; }

.ks-insta-prev { left: -1.8rem; }
.ks-insta-next { right: -1.8rem; }

.ks-insta-nav span {
  display: block;
  margin-top: -0.2em;   /* ‹ › の視覚的な中心合わせ */
}

.ks-insta-more { text-align: center; margin-top: clamp(1.92rem, 3vw, 3.2rem); }

/* =========================================================
   ⑤ 最新のお知らせ
   左＝サムネ付き3件リスト / 右＝一覧リンク＋写真コラージュ
   ========================================================= */

.ks-news {
  background: #fff;
  padding: clamp(4rem, 5vw, 7.2rem) 0;
}

.ks-news-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 3.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.4rem, 4vw, 5.6rem);
  align-items: start;
}

.ks-news-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-bottom: 1.6rem;
}

.fp-wrap .ks-news-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 2vw, 2.8rem);
  color: var(--ks-ink);
  margin: 0;
}

.ks-news-sub {
  font-size: clamp(1.25rem, 0.95vw, 1.44rem);
  color: var(--ks-ink-soft);
  margin: 0;
}

/* --- 記事リスト --- */

.ks-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-news-item + .ks-news-item { border-top: 1px solid var(--ks-line); }

.ks-news-link {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 0.4rem;
  text-decoration: none;
  color: var(--ks-ink);
  transition: background 0.15s;
}
.ks-news-link:hover { background: #F7FBFD; color: var(--ks-ink); }

.ks-news-thumb {
  width: 8rem;
  aspect-ratio: 4 / 3;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--ks-blue-l);
  display: block;
}
.ks-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ks-news-body { display: block; min-width: 0; }

.ks-news-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.ks-news-new {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  background: #F08A2B;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  letter-spacing: 0.04em;
}

.ks-news-meta time {
  font-size: 1.25rem;
  color: var(--ks-ink-soft);
  white-space: nowrap;
}

.ks-news-headline {
  display: block;
  font-size: clamp(1.4rem, 1.05vw, 1.6rem);
  line-height: 1.6;
}
.ks-news-link:hover .ks-news-headline { color: var(--ks-blue); }

.ks-news-chev {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ks-ink-soft);
  text-align: right;
}
.ks-news-link:hover .ks-news-chev { color: var(--ks-blue); }

/* --- 右カラム：一覧リンク＋コラージュ --- */

.ks-news-all {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  float: right;
  margin-bottom: 1.6rem;
  color: var(--ks-blue);
  font-weight: 700;
  font-size: clamp(1.3rem, 0.95vw, 1.5rem);
  text-decoration: none;
}
.ks-news-all:hover { color: var(--ks-blue-d); text-decoration: underline; }

.ks-news-collage {
  clear: both;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.2rem;
  align-items: center;
}

/* 四辺をふわっとぼかす。縦横2枚のグラデーションを重ねて交差部分だけ残す。
   （丸写真と同じく、マスクと box-shadow は併用しない） */
.ks-collage-photo {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%,  #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%,  #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari */
          mask-composite: intersect;   /* 標準 */
}
.ks-collage-photo--2 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.ks-collage-photo.is-placeholder {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.7), transparent 55%),
    linear-gradient(140deg, #DCEAF2 0%, #C6DCE8 100%);
}

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

.ks-collage-msg {
  font-family: 'Yomogi', 'Zen Maru Gothic', sans-serif;
  font-size: clamp(1.25rem, 1vw, 1.5rem);
  line-height: 1.9;
  color: #5A6672;
  text-align: center;
  margin: 0;
}

@media (max-width: 860px) {
  .ks-news-inner { grid-template-columns: 1fr; }
  .ks-news-all   { float: none; }
  .ks-news-side  { display: flex; flex-direction: column; }
  /* 右寄せのままだと、画面右上に固定されるハンバーガーボタンに隠れる */
  .ks-news-all   { align-self: flex-start; }
}

/* SPではコラージュを縦積みに。
   2列のままだと手書きメッセージが右端に押しやられ、
   ハンバーガーボタンの下に潜り込んでしまう。 */
@media (max-width: 600px) {
  .ks-news-collage { grid-template-columns: 1fr; }
  .ks-collage-photo--2 { grid-column: auto; }
  .ks-collage-msg { margin: 0.4rem 0; }
}

@media (max-width: 480px) {
  .ks-news-link  { grid-template-columns: 6.4rem minmax(0, 1fr) 1.4rem; gap: 1.2rem; }
  .ks-news-thumb { width: 6.4rem; }
}

/* =========================================================
   ⑥ 一緒に活動しませんか？
   カード1枚ごとに --c（テーマ色）と --bg（淡い地色）を差し替えるだけで
   4色分けできるようにしてある
   ========================================================= */

.ks-join {
  background: var(--ks-cream);
  padding: clamp(4rem, 5vw, 7.2rem) 0;
}

.ks-join-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 3.2rem);
}

.fp-wrap .ks-join-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 2vw, 2.8rem);
  color: var(--ks-ink);
  margin: 0 0 0.8rem;
}

.ks-join-sub {
  font-size: clamp(1.22rem, 0.95vw, 1.44rem);
  color: var(--ks-ink-soft);
  margin: 0 0 clamp(1.92rem, 2.5vw, 3.2rem);
}

.ks-join-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.28rem, 1.6vw, 2.4rem);
}

.ks-join-card {
  position: relative;
  display: block;
  background: var(--bg);
  border: 2px solid var(--c);
  border-radius: 1.44rem;
  padding: clamp(2.4rem, 2.8vw, 3.68rem) clamp(1.28rem, 1.4vw, 1.92rem) clamp(4.48rem, 4vw, 5.76rem);
  text-align: center;
  text-decoration: none;
  color: var(--ks-ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ks-join-card:hover {
  color: var(--ks-ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.09);
}

.ks-join--pink   { --c: var(--ks-pink);   --bg: #FFF9FA; }
.ks-join--green  { --c: var(--ks-green);  --bg: #F7FCF9; }
.ks-join--yellow { --c: var(--ks-yellow); --bg: #FFFCF2; }
.ks-join--blue   { --c: var(--ks-blue);   --bg: #F7FBFE; }

.ks-join-ico {
  display: block;
  width: clamp(40px, 3.7vw, 52px);
  height: auto;
  margin: 0 auto 1.2rem;
  color: var(--c);
  fill: currentColor;
  stroke: none;
}

.fp-wrap .ks-join-name {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(1.52rem, 1.25vw, 1.84rem);
  color: var(--c);
  margin: 0 0 0.96rem;
}

.ks-join-desc {
  font-size: clamp(1.3rem, 0.9vw, 1.45rem);
  line-height: 1.8;
  color: var(--ks-ink-soft);
  margin: 0;
}

.ks-join-go {
  position: absolute;
  right: clamp(1.12rem, 1.2vw, 1.76rem);
  bottom: clamp(1.12rem, 1.2vw, 1.76rem);
  width: 2em;
  height: 2em;
  font-size: clamp(1.25rem, 1vw, 1.52rem);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   ⑦ 活動にご協力いただいているみなさま

   ロゴは大きさも縦横比もバラバラなので、高さを揃えた白いカードに
   contain で収める。カード側で揃えることで一覧が整って見える。
   ========================================================= */

.ks-partners {
  background: #FFFFFF;
  padding: clamp(4rem, 5vw, 7.2rem) 0;
  border-top: 1px solid var(--ks-line);
}

.ks-partners-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 3vw, 3.2rem);
  text-align: center;
}

.fp-wrap .ks-partners-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 1.7vw, 2.2rem);
  color: var(--ks-ink);
  margin: 0 0 0.8rem;
}

.ks-partners-sub {
  font-size: clamp(1.25rem, 0.95vw, 1.44rem);
  line-height: 1.9;
  color: var(--ks-ink-soft);
  margin: 0 0 clamp(2.4rem, 3.5vw, 4rem);
}

/* --- グループ見出し（パートナー様 / 協賛企業様） --- */

.ks-partners-group + .ks-partners-group { margin-top: clamp(2.8rem, 4vw, 4.4rem); }

.fp-wrap .ks-partners-label {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: 84rem;
  margin: 0 auto clamp(1.6rem, 2.2vw, 2.4rem);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--ks-ink-soft);
}
.fp-wrap .ks-partners-label::before,
.fp-wrap .ks-partners-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ks-line);
}

/* --- ロゴの並び ---
   3列。最後の行が余っても中央に寄るよう flex を使っている
   （grid だと5社のとき2行目が左に寄ってしまう）。 */
.ks-partners-list {
  --gap: clamp(1.2rem, 1.8vw, 2rem);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 84rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.ks-partner {
  margin: 0;
  flex: 0 0 calc((100% - var(--gap) * 2) / 3);
}

.ks-partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(8rem, 8.5vw, 10.4rem);
  padding: clamp(1.2rem, 1.6vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--ks-line);
  border-radius: 1.2rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

a.ks-partner-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,0.09);
}

.ks-partner-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ks-partners-note {
  font-size: 1.25rem;
  color: var(--ks-ink-soft);
  margin: clamp(1.6rem, 2.5vw, 2.4rem) 0 0;
}

@media (max-width: 560px) {
  .ks-partners-list { --gap: 1rem; }
  .ks-partner { flex: 0 0 calc((100% - var(--gap)) / 2); }
  .ks-partner-card { height: 7.6rem; padding: 1rem; }
}

/* ===== SP対応（③⑥以外の共通部分） ===== */

@media (max-width: 760px) {
  .fp-section-inner  { padding: 0 1.92rem; }
  .fp-section-title  { font-size: 2.4rem; }
  .fp-news-link      { flex-wrap: wrap; gap: 0.8rem; }
  .ks-join-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* 4枚を1列にすると縦に長くなりすぎるので、狭い端末まで2列を保つ */
@media (max-width: 380px) {
  .ks-join-grid      { grid-template-columns: 1fr; }
}