@charset "utf-8";
/* ============================================================
   特定非営利活動法人 学生団体スピカ 公式サイト
   共通スタイルシート
   基調カラー：#187fc3(紺) / #ed806b(赤) / #ffc200(黄) / #bada54(緑)
   第1ブレイクポイント：1024px ／ 第2ブレイクポイント：400px
   ============================================================ */

/* ---------- 変数 ---------- */
:root{
  --navy:#187fc3;
  --red:#ed806b;
  --yellow:#ffc200;
  --green:#bada54;
  --bg-a:#fffdf5;
  --bg-b:#f6f4f2;
  --white:#ffffff;
  --text:#333333;

  --fs-head:42px;
  --fs-body:18px;

  --line-gap:10px;   /* 本文の行間（全ページ共通・行送り1.0＋10px） */

  --header-h:96px;

  --ph:#d9d5cd;      /* 画像プレースホルダ（ベタ塗り） */
  --ph-dark:#b9c9d6; /* 背景画像プレースホルダ（ベタ塗り） */
  --ph-light:#fffdf5;/* 紺地上のプレースホルダ（ベタ塗り） */
}

/* ---------- リセット ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;}
a{color:inherit;}

body{
  /* 丸ゴシック体を優先し、環境にない場合も可能な限り丸みのある書体へ落とす。
     角ゴシック（游ゴシック等）は最後の保険としてのみ置く */
  font-family:"筑紫A丸ゴシック","TsukuARdGothicStd","Tsukushi A Round Gothic",
              "ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN",
              "ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro",
              "M PLUS Rounded 1c","Zen Maru Gothic",
              "Rounded Mplus 1c","Kosugi Maru",
              "Varela Round","Quicksand",
              "游ゴシック体","YuGothic","Yu Gothic",sans-serif;
  font-synthesis:weight style;   /* 単一ウェイトの書体でも太字を合成させる */
  font-size:var(--fs-body);
  line-height:1.0;
  color:var(--text);
  background:var(--bg-a);
  padding-top:var(--header-h);
  overflow-x:clip;              /* 横方向のはみ出しに対する保険 */
}

/* 本文の行間は全ページで統一（行送り1.0＝文字サイズ＋10px） */
p,dt,dd,li,.hevent{line-height:calc(1em + var(--line-gap));}
.gnav li,.drawer-menu li{line-height:1.0;}

/* 空行（仕様書の「//」）による段落分け＝1行あける */
.p-gap{margin-top:calc(1em + var(--line-gap));}

/* 筑紫ゴシック指定用 */
.gothic{
  font-family:"筑紫ゴシック","TsukuGoPro","Tsukushi Gothic",
              "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",
              "游ゴシック体","YuGothic",sans-serif;
}

/* ============================================================
   セクション共通
   ============================================================ */
.section{padding:40px 0;background:var(--bg-a);}
.section.bg-a{background:var(--bg-a);}
.section.bg-b{background:var(--bg-b);}
.inner{width:min(1120px,calc(100% - 48px));margin-inline:auto;}

.section-title{
  font-size:var(--fs-head);
  font-weight:700;
  text-align:center;
  line-height:1.0;
  margin-bottom:40px;
}
.section-title span{
  display:inline-block;
  padding-bottom:10px;
  border-bottom:3px solid var(--navy);
}

/* ------------------------------------------------------------
   「/」位置での改行を保持する本文
   --chars（その段落の最長行の文字数）と --side（左右の余白合計）から
   はみ出さない最大の文字サイズを自動算出する
   ------------------------------------------------------------ */
.keep-lines{
  white-space:nowrap;
  font-size:min(
    var(--fs-body),
    calc(min(1120px, 100vw - var(--side,48px)) / var(--chars,40))
  );
}
/* 第1ブレイクポイント以下でのみ有効になる改行 */
br.sp-br{display:none;}
/* 第2ブレイクポイント以下でのみ有効になる改行 */
br.sp2-br{display:none;}
/* 第2ブレイクポイントより上でのみ有効になる改行 */
br.bp1-br{display:inline;}
/* 第2ブレイクポイントより上／以下で出し分ける段落 */
.bp1-only{display:block;}
.bp2-only{display:none;}
/* 折り返した行の始まりを1文字分下げる（ぶら下げ無しの字下げ） */
.hang{padding-left:1em;}

.center{text-align:center;}

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-a);
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:10px;
  padding:14px 24px;
  font-weight:700;
  text-decoration:none;
  line-height:1.0;
}
.btn::after{content:"→";margin-left:10px;font-weight:700;}
.btn-sm{padding:8px 14px;font-size:14px;}

/* ============================================================
   ヘッダー（PC）
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  background:var(--navy);color:var(--white);
}
.header-inner{
  height:100%;
  width:min(1280px,calc(100% - 32px));
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);}
/* ▼ロゴ挿入スペース（ベタ塗り） */
.logo-ph{width:64px;height:64px;background:var(--ph-light);flex:none;border-radius:4px;object-fit:contain;}
.brand-name{display:flex;flex-direction:column;gap:4px;font-weight:700;line-height:1.0;white-space:nowrap;}
.brand-name .corp{font-size:12px;}
.brand-name .main{font-size:22px;}

.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.header-top{display:flex;gap:10px;align-items:center;}
/* ボタンではない標準フォントのリンク */
.text-link{
  color:var(--white);text-decoration:none;
  font-size:14px;line-height:1.0;white-space:nowrap;
}
.text-link:hover{text-decoration:underline;}

.gnav{display:flex;gap:24px;}
.gnav > li{position:relative;}
.gnav > li > span,
.gnav > li > a{
  display:block;padding:6px 2px;
  font-weight:700;font-size:16px;color:var(--white);text-decoration:none;cursor:pointer;
}
.gnav .dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--navy);min-width:190px;padding:8px 0;display:none;
}
.gnav > li:hover .dropdown,
.gnav > li:focus-within .dropdown{display:block;}
.gnav .dropdown a{
  display:block;padding:10px 16px;
  color:#ffffff;text-decoration:none;font-size:15px;white-space:nowrap;
}
.gnav .dropdown a:hover{background:#1069a3;}

.hamburger{
  display:none;width:40px;height:34px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;padding:4px 0;
}
.hamburger span{
  display:block;height:3px;background:var(--white);border-radius:2px;
  transform-origin:center;
  transition:transform .2s ease, opacity .2s ease;
}
/* メニューを開いている間は3本線を×印に変形させる */
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(11.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg);}

.drawer{
  display:none;
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:var(--navy);color:var(--white);
  padding:24px;overflow-y:auto;z-index:999;
}
.drawer.open{display:block;}
.drawer-menu{font-size:16px;}
.drawer-menu li{padding:9px 0;}
.drawer-menu a{color:var(--white);text-decoration:none;}
.drawer-menu .plain{color:var(--white);}
/* 上位階層（ホーム・団体概要・ご利用案内・寄付・協賛・活動に携わる）は太字。
   ヒラギノ丸ゴ ProN のように太字を持たない書体でも太く見えるよう輪郭を補強する */
.drawer-menu .top,
.drawer-menu .plain{
  font-weight:700;
  -webkit-text-stroke:.32px currentColor;
}
.drawer-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;}
.drawer-faq{text-align:center;margin-top:16px;}
.drawer-faq a{color:var(--white);text-decoration:none;}
.drawer-faq a:hover{text-decoration:underline;}

/* ============================================================
   フッター（PC）
   ============================================================ */
.footer{background:var(--navy);color:var(--white);padding:40px 0;}
.footer-inner{
  width:min(900px,calc(100% - 48px));
  margin-inline:auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:40px;
}
.footer-name{font-weight:700;font-size:20px;margin-bottom:14px;}
.footer-address{font-size:var(--fs-body);}
.footer-right{display:flex;flex-direction:column;align-items:center;gap:16px;}
.sns{display:flex;gap:16px;}
/* ▼SNSロゴ挿入スペース（ベタ塗り） */
.sns-ph{width:36px;height:36px;background:var(--ph-light);border-radius:6px;display:block;object-fit:contain;}

/* ============================================================
   定義リスト型テーブル（罫線なし・事項名の右端から60px）
   ============================================================ */
.deflist{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:60px;row-gap:28px;align-items:start;
}
.deflist dt{font-weight:700;text-align:left;}
.deflist dd{text-align:left;overflow-wrap:anywhere;}
.deflist dd p + p{margin-top:0;}
.deflist a{color:var(--navy);}
.deflist--center{
  width:-moz-fit-content;width:fit-content;
  max-width:100%;margin-inline:auto;
}

/* ============================================================
   画像（未設置時はベタ塗りでスペースを確保）
   すべて image フォルダ内の同名ファイルを参照する
   ============================================================ */
.ph{background:var(--ph);display:block;width:100%;height:auto;object-fit:cover;}

/* ============================================================
   ホーム
   ============================================================ */
.hero-home{
  display:grid;
  grid-template-columns:minmax(0,1fr);                               /* 背景画像とボックスを同一セルに重ねる */
  padding:0;
  background-color:var(--ph-dark);            /* 未設置時のベタ塗り */
}
/* --- home セクション1 背景スライドショー -------------------------------
   4枚の画像を3.0秒ごとに切り替える（1周12.0秒）。
   切り替わりは0.5秒のクロスフェードで、拡大縮小は行わない。
   4枚とも同一のアニメーションを使い、負の animation-delay で位相をずらす。
   読み込み直後は1枚目が表示され、2.5秒後に2枚目への切り替えが始まる。 */
.hero-home .hero-slideshow{
  grid-area:1/1;
  position:relative;
  z-index:0;
  width:100%;max-width:100%;min-width:0;
  aspect-ratio:18/7;                          /* 画面幅に関わらず常に 18:7 */
  overflow:hidden;
  background:var(--ph-dark);                  /* 未設置時のベタ塗り */
}
.hero-slideshow .slide{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  animation:home-slideshow 12s linear infinite;
}
.hero-slideshow .slide-01{background-image:url("../image/home-sec1-1.png");animation-delay:-0.5s;}
.hero-slideshow .slide-02{background-image:url("../image/home-sec1-2.png");animation-delay:-9.5s;}
.hero-slideshow .slide-03{background-image:url("../image/home-sec1-3.png");animation-delay:-6.5s;}
.hero-slideshow .slide-04{background-image:url("../image/home-sec1-4.png");animation-delay:-3.5s;}

@keyframes home-slideshow{
  0%      {opacity:0;}   /*  0.0秒　フェードイン開始 */
  4.167%  {opacity:1;}   /*  0.5秒　フェードイン完了 */
  25%     {opacity:1;}   /*  3.0秒　表示終了・フェードアウト開始 */
  29.167% {opacity:0;}   /*  3.5秒　フェードアウト完了 */
  100%    {opacity:0;}   /* 12.0秒　次の周期へ */
}

/* 動きを抑える設定の環境では1枚目を静止表示する */
@media (prefers-reduced-motion: reduce){
  .hero-slideshow .slide{animation:none;}
  .hero-slideshow .slide-01{opacity:1;}
}
/* セクション2：団体スローガン（中央配置） */
.slogan{
  display:block;
  margin:0 auto 24px;
  width:min(480px,100%);
  aspect-ratio:48/11;                         /* 画面幅に関わらず常に 48:11 */
  height:auto;min-width:0;
  background:transparent;                     /* ベタ塗りの枠は設けない */
  object-fit:contain;
}
.slogan-text{text-align:center;}
.pc-only{display:block;}   /* 1024pxより上でのみ表示 */
.sp-only{display:none;}    /* 1024px以下でのみ表示 */

/* 主要な活動（PC：4点を横並び／SP：2×2） */
/* 主要な活動：コンテンツ幅(1120px)を超えて画面幅いっぱい近くまで拡張する */
.activities{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  width:calc(100vw - 48px);
  max-width:calc(100vw - 48px);
  margin-inline:calc(50% - (100vw - 48px) / 2);
}
.activities a{display:block;}
.activities .ph{aspect-ratio:1/1;}

/* 訴求ボックス */
.promos{display:flex;gap:24px;justify-content:center;align-items:stretch;}
.promo{flex:1;min-width:0;background:var(--white);display:flex;flex-direction:column;}
.promo .ph{aspect-ratio:16/9;}
.promo-body p{font-size:var(--fs-body);}
.promo-body{
  flex:1;padding:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:20px;
  text-align:center;
}

/* お知らせ：日付・カテゴリー・タイトルを1行に並べたカードを縦に積む
   （既存の見出し・背景色・余白・ボタン意匠はそのまま） */
.news-list{
  width:min(880px,100%);
  margin-inline:auto;
  border-top:1px solid rgba(24,127,195,.35);
}
.news-item{border-bottom:1px solid rgba(24,127,195,.35);}
.news-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  column-gap:16px;row-gap:8px;
  width:100%;
  padding:16px 0;
  background:none;border:0;
  font:inherit;color:inherit;
  text-align:left;
  cursor:pointer;
}
.news-date{white-space:nowrap;line-height:1.0;}
.news-cat{
  background:var(--navy);
  color:var(--white);
  padding:5px 12px;
  font-size:.85em;
  line-height:1.0;
  white-space:nowrap;
  justify-self:start;
}
.news-cat.is-empty{display:none;}
.news-title{
  min-width:0;
  line-height:calc(1em + var(--line-gap));
  text-decoration:underline;
}
.news-row:hover .news-title{color:var(--navy);}

.news-status{text-align:center;margin-bottom:16px;}
.news-status:empty{display:none;}
.news-more{margin-top:40px;}

/* 記事モーダル：ヘッダーより下に、上下左右のマージンを残して展開する */
.news-modal{
  display:none;
  position:fixed;
  top:var(--header-h);left:0;right:0;bottom:0;
  z-index:900;
  background:rgba(51,51,51,.55);
  padding:24px;
}
.news-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
.news-modal-box{
  position:relative;
  width:min(880px,100%);
  max-height:100%;
  overflow-y:auto;
  background:var(--bg-a);
  padding:48px 24px 32px;
}
.news-modal-close{
  position:absolute;top:8px;right:8px;
  width:40px;height:40px;
  background:none;border:0;
  font-size:28px;line-height:1.0;
  color:var(--navy);
  cursor:pointer;
}
.news-modal-meta{
  display:flex;align-items:center;gap:16px;
  margin-bottom:20px;
}
.news-modal-title{
  text-align:center;
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.3);
  line-height:calc(1em + var(--line-gap));
  margin-bottom:24px;
}
.news-modal-thumb{
  display:block;
  width:min(560px,100%);
  margin:0 auto 24px;
  height:auto;
}
.news-modal-body{line-height:calc(1em + var(--line-gap));white-space:pre-wrap;}
.news-modal-link{margin-top:20px;line-height:calc(1em + var(--line-gap));}
.news-modal-link a{color:var(--navy);overflow-wrap:anywhere;}
.news-modal-body p + p{margin-top:calc(1em + var(--line-gap));}
.news-modal-body img{max-width:100%;height:auto;margin:16px auto;}
.news-modal-body a{color:var(--navy);overflow-wrap:anywhere;}

/* ニュースページの「前の画面に戻る」 */
.news-back{margin-bottom:24px;}
.btn-back::after{content:"";margin-left:0;}
.btn-back::before{content:"←";margin-right:10px;font-weight:700;}

/* ============================================================
   下層ページ共通ヒーロー
   ============================================================ */
.hero-page{
  display:grid;
  grid-template-columns:minmax(0,1fr);                               /* 背景画像と見出しを同一セルに重ねる */
  padding:0;
  background-color:var(--ph-dark);            /* 未設置時のベタ塗り */
}
.hero-page .hero-bg{
  grid-area:1/1;
  width:100%;max-width:100%;min-width:0;
  aspect-ratio:36/10;                         /* 画面幅に関わらず常に 36:10 */
  object-fit:cover;
  background:var(--ph-dark);
}
.hero-page .section-title{
  grid-area:1/1;
  align-self:center;justify-self:center;
  margin:0;color:#ffffff;font-style:italic;
}
.hero-page .section-title span{border-bottom:none;padding-bottom:0;}

/* ============================================================
   スピカについて（沿革）
   ============================================================ */
.issue-copy{text-align:center;font-size:32px;font-weight:700;margin-bottom:32px;}

.history{overflow-x:auto;padding-bottom:8px;}
.history-line{display:flex;align-items:flex-start;min-width:900px;}
.hy{flex:none;width:84px;}
.hy span{
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;
  border:3px solid var(--navy);background:var(--white);
  color:var(--navy);font-weight:700;font-size:20px;line-height:1.0;
}
.hseg{position:relative;flex:1;min-width:150px;}
.hseg::before{content:"";position:absolute;top:40px;left:-2px;right:-2px;height:3px;background:var(--navy);}
.hseg-events{display:flex;gap:20px;justify-content:center;padding-top:83px;}
.hevent{
  position:relative;background:var(--white);padding:16px 12px;
  writing-mode:vertical-rl;text-orientation:upright;
  min-height:260px;font-size:16px;
}
.hevent::before{
  content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:3px;height:40px;background:var(--navy);
}
.hevent .m{font-weight:700;}

/* ============================================================
   定義リストと地図をまとめるブロック
   地図の横幅は、見出し項の左端から本文の右端までに一致する
   ============================================================ */
.table-block{
  width:-moz-fit-content;width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.table-block--full{width:100%;}
.map-embed{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  border:0;
  margin-top:40px;
}

/* ============================================================
   ホーム セクション6：これまでの実績
   ============================================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.stat{
  background:var(--white);
  padding:24px 12px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.stat-label{font-weight:700;}
/* 小見出しは指定位置でのみ改行する（各断片の内部では折り返さない）。
   断片が横並びのまま収まれば1行、収まらなければ指定位置で2行になる */
.stat-label span{display:inline-block;white-space:nowrap;}
.stat-value{
  color:var(--navy);
  font-weight:700;
  font-size:calc(var(--fs-head) * 0.9);
  line-height:1.0;
}
.stat-unit{font-size:calc(var(--fs-body) * 1.1);margin-left:2px;}

.stats-sub{
  text-align:center;
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.2);
  margin-top:40px;
  margin-bottom:20px;
}
/* 新聞掲載：左に画像、右上に本文、右下にボタン */
.press{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:24px;row-gap:16px;
  width:min(880px,100%);
  margin-inline:auto;
}
.press-thumb{
  grid-column:1;grid-row:1 / span 2;
  align-self:center;
  width:320px;
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--ph);          /* 未設置時のベタ塗り */
}
.press-text{grid-column:2;grid-row:1;align-self:end;white-space:nowrap;}
.press-action{grid-column:2;grid-row:2;align-self:start;}
.grantors{
  width:min(880px,100%);
  margin-inline:auto;
  text-align:center;
}

/* ============================================================
   よくある質問（faq.html）
   Qが太字・Aが標準。details/summary による折りたたみ
   ============================================================ */
.faq-list{
  width:min(880px,100%);
  margin-inline:auto;
  border-top:1px solid rgba(24,127,195,.35);
}
.faq-item{border-bottom:1px solid rgba(24,127,195,.35);}
.faq-q{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 40px 18px 0;
  position:relative;
  font-weight:700;                       /* Qは太字 */
  cursor:pointer;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{
  content:"";
  position:absolute;right:8px;top:50%;
  width:10px;height:10px;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.faq-item[open] .faq-q::after{transform:translateY(-20%) rotate(-135deg);}
.faq-a{
  display:flex;align-items:flex-start;gap:12px;
  padding:0 40px 18px 0;
  font-weight:400;                       /* Aは標準 */
}
.faq-mark{
  flex:none;
  width:1.6em;
  color:var(--navy);
  font-weight:700;
  font-size:1.1em;
  line-height:calc(1em + var(--line-gap));
}
.faq-a .faq-mark{color:var(--red);}
.faq-text{flex:1;min-width:0;line-height:calc(1em + var(--line-gap));}

/* ============================================================
   相談受付
   ============================================================ */
.qa{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:60px;row-gap:32px;align-items:start;}
.qa dt{font-weight:700;}

/* ============================================================
   寄付
   ============================================================ */
/* ボタンの高さ = 文字(=--fs-body) + 上下padding14px + 上下border2px */
.donate-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:40px;align-items:center;
  --btn-h:calc(var(--fs-body) + 32px);
}
.donate-lead .btn{justify-self:end;}
/* 説明文は2行でボタンの縦幅にちょうど収まる大きさにする。
   2行の高さ = 文字サイズ × 行送り1.25 × 2 = 文字サイズ × 2.5 */
.donate-lead .note{
  justify-self:start;text-align:left;
  line-height:1.25;
  white-space:nowrap;                       /* 「/」位置以外で折り返さない */
  font-size:min(
    calc(var(--btn-h) / 2.5),
    calc((min(1120px, 100vw - 48px) - 40px) / 2 / var(--chars,20))
  );
}

/* 寄与度・協賛方法カード */
.cards{display:flex;gap:24px;justify-content:center;align-items:stretch;}
.card{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.card .card-title{font-weight:700;font-size:22px;white-space:nowrap;}
.card .ph{aspect-ratio:3/2;width:100%;}   /* 縦横比 縦2：横3 */

/* 協賛：2枚のカード幅を「全カードを通じた最長テキスト行の幅」で揃える
   1fr トラックが等幅になる性質と、コンテナの fit-content を組み合わせて
   グリッド全体を最長行の幅×2＋gap に収める */
.cards--fit{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  align-items:start;
}
.cards--fit .card{width:auto;min-width:0;}
/* width:0 + min-width:100% とすることで、画像の実寸がカード幅を押し広げない */
.cards--fit .card .ph{width:0;min-width:100%;}
.cards--fit .card p{white-space:nowrap;}

.bank{text-align:center;}

/* ============================================================
   レスポンシブ（第1ブレイクポイント：1024px ／ 第2ブレイクポイント：400px）
   ============================================================ */
@media (max-width:1024px){
  :root{
    --fs-head:26px;
    --fs-body:12px;
    --header-h:64px;
  }
  body{font-size:var(--fs-body);}

  /* ブレイクポイント以下でのみ有効になる改行 */
  br.sp-br{display:inline;}

  /* ヒラギノ丸ゴ ProN のように太字を持たない書体でも
     太字がはっきり見えるよう、輪郭をわずかに太らせる */
  .section-title,
  .deflist dt,
  .qa dt,
  .stat-label,
  .card-title,
  .faq-q,
  .faq-group,
  .faq-mark,
  .caution-title,
  .case-title,
  .case-sub,
  .stats-sub,
  .hevent .m,
  .issue-copy,
  .brand-name,
  .footer-name,
  .news-cat,
  .btn{
    -webkit-text-stroke:.32px currentColor;
  }

  /* SP専用の改行位置を持つ段落は --chars-sp / --side-sp を優先 */
  .keep-lines{
    font-size:min(
      var(--fs-body),
      calc(min(1120px, 100vw - var(--side-sp, var(--side,48px))) / var(--chars-sp, var(--chars,40)))
    );
  }

  /* ヘッダー */
  .logo-ph{width:44px;height:44px;}
  .brand-name .corp{font-size:9px;}
  .brand-name .main{font-size:15px;}
  .header-right{display:none;}
  .hamburger{display:flex;}

  /* フッター */
  .footer-inner{
    flex-direction:column;align-items:center;text-align:center;gap:20px;
    width:calc(100% - 32px);
  }
  .footer-name{display:flex;flex-direction:column;gap:4px;font-size:16px;}
  .footer-name .corp{font-size:11px;}
  .footer-right{flex-direction:row;align-items:center;justify-content:center;gap:20px;}
  .sns{gap:20px;}

  /* ホーム */
  .pc-only{display:none;}                     /* 961pxより上でのみ表示する段落 */
  .sp-only{display:block;}

  /* home セクション1：スローガンの幅を広げて下部に寄せる */
  .slogan{width:calc(100% - 32px);margin-bottom:16px;}

  .activities{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
               width:auto;max-width:none;margin-inline:0;}   /* 2×2・.inner幅に戻す */
  .promos{gap:12px;}                                           /* 横並びをキープ */
  .promo-body{padding:12px;gap:12px;}

  /* 定義リスト */
  .deflist{column-gap:24px;row-gap:20px;}   /* 見出し項と本文を近づける */
  .qa{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:12px;}

  .issue-copy{font-size:20px;}

  /* 沿革：縦並び（文字方向・紺線の向きを90度変更） */
  .history{overflow-x:visible;}
  .history-line{flex-direction:column;min-width:0;align-items:flex-start;}
  .hy{width:auto;}
  .hy span{width:64px;height:64px;font-size:15px;}
  .hseg{width:100%;min-width:0;}
  .hseg::before{top:-2px;bottom:-2px;left:30px;right:auto;width:3px;height:auto;}
  .hseg-events{
    flex-direction:column;gap:14px;padding-top:0;padding-left:70px;
    padding-block:14px;align-items:flex-start;
  }
  .hevent{writing-mode:horizontal-tb;min-height:0;width:100%;font-size:12px;padding:12px;}
  .hevent::before{left:-40px;top:50%;transform:translateY(-50%);width:40px;height:3px;}

  /* 寄付：三角形配置（1つ目を上段中央、2・3を下段に横並び） */
  .cards.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
  .cards.tri .card:first-child{grid-column:1 / -1;width:calc(50% - 6px);margin-inline:auto;}
  .cards.tri .card p{white-space:nowrap;font-size:min(12px,2.0vw);}
  .cards.tri .card .card-title{font-size:min(15px,2.6vw);}

  /* 協賛：横並びをキープ（2カラム等幅のまま） */
  .cards--fit{gap:12px;}
  .cards--fit .card p{font-size:min(12px,2.9vw);}
  .cards--fit .card .card-title{font-size:min(15px,3.0vw);}
  .cards{gap:12px;}
  .card{gap:10px;}

  .btn{padding:10px 16px;}
  .btn-sm{padding:6px 10px;font-size:11px;}
}


/* ============================================================
   レスポンシブ（第1ブレイクポイント以下・第2ブレイクポイント以上：401〜1024px）
   ============================================================ */
@media (min-width:401px) and (max-width:1024px){
  :root{--fs-body:15px;}          /* 本文の文字サイズ */
  body{font-size:var(--fs-body);}

  /* 本文：改行位置は画面幅に合わせ、文節単位で折り返す */
  .keep-lines{
    white-space:normal;
    font-size:var(--fs-body);
    word-break:auto-phrase;
    line-break:strict;
  }
  .keep-lines br{display:none;}

  /* ボタン：文字が1列に収まる範囲で最大の文字サイズ（上限16px。
     最も窮屈なフッター行を基準に算出） */
  .btn,
  .btn-sm{
    white-space:nowrap;
    font-size:min(16px, calc((100vw - 228px) / 7));
  }
  .btn{padding:12px 20px;}
  .btn-sm{padding:8px 12px;}

  /* home セクション2：スローガンの幅は画面幅の3/5 */
  .slogan{width:60vw;margin-bottom:16px;}

  /* 沿革 */
  .hevent{font-size:var(--fs-body);}

  /* 寄付セクション2：ボタンは必要な幅だけを取り、残り全部を説明文に割り当てる。
     等分割のままだと401px付近で8px程度まで縮んでしまうため */
  .donate-lead{
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:12px;justify-content:center;align-items:center;
    --btn-h:calc(16px + 28px);   /* ボタン文字16px + 上下padding12px + 上下border2px */
  }
  .donate-lead .btn{justify-self:start;}
  .donate-lead .note{
    justify-self:start;text-align:left;
    font-size:min(
      calc(var(--btn-h) / 2.5),
      calc((100vw - 186px) / var(--chars,20))
    );
  }

  /* 寄付セクション3：最長行が画像幅に収まる文字サイズを全テキストに適用 */
  .cards.tri .card p,
  .cards.tri .card .card-title{
    white-space:nowrap;
    font-size:min(var(--fs-body), calc((min(1120px, 100vw - 48px) - 12px) / 2 / var(--maxchars,17.5)));
  }

  /* 協賛セクション3：指定の改行位置を保ったまま文字を大きくする */
  .cards--fit .card p,
  .cards--fit .card .card-title{
    white-space:nowrap;
    font-size:min(var(--fs-body), calc((min(1120px, 100vw - 48px) - 12px) / 2 / 14));
  }

  /* 寄付・協賛：セクション間の余白を狭める
     ただし見出しの上は規定どおり40pxを確保する */
  .page-donate .section:not(.hero-page),
  .page-sponsor .section:not(.hero-page){padding:18px 0;}
  .page-donate .section:not(.hero-page) > .inner > .section-title,
  .page-sponsor .section:not(.hero-page) > .inner > .section-title{margin-top:22px;}
}

/* ============================================================
   レスポンシブ（第2ブレイクポイント：400px）
   ============================================================ */
@media (max-width:400px){
  :root{
    --fs-head:20px;                 /* 見出しは一律20px */
    --fs-body:13px;                 /* 本文は一律13px */
  }
  body{font-size:var(--fs-body);}

  /* 各ページの両サイドの余白は5px */
  .inner{width:calc(100% - 10px);}
  .header-inner{width:calc(100% - 10px);}
  .footer-inner{width:calc(100% - 10px);}
  .drawer{padding:10px;}

  /* 本文：14pxで統一し、改行位置は文節に沿って自動で決める */
  .keep-lines{
    white-space:normal;
    font-size:var(--fs-body);
    word-break:auto-phrase;
    line-break:strict;
  }
  .keep-lines br{display:none;}
  br.sp2-br{display:inline;}
  br.bp1-br{display:none;}
  .bp1-only{display:none;}
  .bp2-only{display:block;}

  /* ボタン：内部テキストを1段で表示し、文字サイズを統一する
     （最も窮屈なフッター行を基準に算出。推奨値は14px） */
  .btn,
  .btn-sm{
    white-space:nowrap;
    font-size:min(14px, calc((100vw - 180px) / 7));
  }
  .btn{padding:8px 10px;}
  .btn-sm{height:36px;padding:0 10px;}   /* SNSアイコンと縦幅を揃える */

  /* ヘッダー：法人名の2段構成をフォントサイズで維持する */
  .logo-ph{width:40px;height:40px;}
  .brand-name .corp{font-size:min(9px, calc((100vw - 130px) / 9));}
  .brand-name .main{font-size:min(15px, calc((100vw - 130px) / 7));}

  /* フッター */
  .footer{padding:16px 0 24px;}          /* 法人名の位置を上へ */
  .footer-name{font-size:20px;margin-bottom:8px;}
  .footer-inner{gap:12px;}
  .footer-right{gap:12px;}
  .sns{gap:8px;}                          /* アイコン間を狭める */
  .sns-ph{width:36px;height:36px;}
  .footer-address{font-size:var(--fs-body);text-align:left;}

  /* home セクション2：スローガン（横幅を4/5に縮小） */
  .slogan{width:80%;margin-bottom:10px;}

  /* home セクション2・4：両サイド余白に合わせて拡大 */
  .activities{gap:6px;}

  /* home セクション4：2段配置にして拡大（490px以下は下の指定で統一） */
  .promos{gap:6px;}

  /* 各種表：項目名と詳細の間隔を詰める */
  .deflist{column-gap:8px;row-gap:14px;}    /* 見出し項と本文をさらに近づける */
  .qa{row-gap:10px;}

  /* 寄付・協賛：セクション間の余白を詰める
     ただし見出しの上は規定どおり40pxを確保する */
  .page-donate .section:not(.hero-page),
  .page-sponsor .section:not(.hero-page){padding:14px 0;}
  .page-donate .section:not(.hero-page) > .inner > .section-title,
  .page-sponsor .section:not(.hero-page) > .inner > .section-title{margin-top:26px;}

  /* 寄付セクション2：本文はボタンの横に置き、指定位置で改行する */
  .donate-lead{
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:10px;justify-content:center;align-items:center;
    --btn-h:calc(14px + 20px);   /* ボタン文字14px + 上下padding8px + 上下border2px */
  }
  .donate-lead .btn{justify-self:start;}
  .donate-lead .note{
    justify-self:start;text-align:left;
    white-space:nowrap;
    font-size:min(
      calc(var(--btn-h) / 2.5),
      calc((100vw - 132px) / var(--chars,20))
    );
  }

  /* カード類 */
  .cards{gap:6px;}
  .cards.tri{gap:6px;}
  .cards--fit{width:auto;max-width:100%;gap:6px;}

  /* 寄付：最長行(--maxchars)が画像幅ぴったりになる文字サイズを全テキストに適用 */
  .cards.tri .card p,
  .cards.tri .card .card-title{
    white-space:nowrap;
    font-size:calc((100vw - 16px) / 2 / var(--maxchars,17.5));
  }
  /* 協賛：指定の改行位置を保ったまま14pxで表示 */
  .cards--fit .card p,
  .cards--fit .card .card-title{
    white-space:nowrap;
    font-size:var(--fs-body);
  }

  /* 沿革 */
  .hevent{font-size:var(--fs-body);}
}

/* ============================================================
   お知らせ（home-sec4）：画面幅700px以上では常に横1列
   ブレイクポイントより後に置き、2×2の指定を上書きする
   ============================================================ */

@media (max-width:490px){
  .promos{flex-direction:column;}
  .stats{gap:10px;}
  .stat{padding:14px 8px;gap:8px;}

  .map-embed{margin-top:20px;}
}

/* ============================================================
   新聞掲載：739px以下では本文 → 画像 → ボタンの順に縦積みにする
   （横並びのまま本文の改行位置を保てる下限が740px）
   ============================================================ */
@media (max-width:739px){
  .press{grid-template-columns:minmax(0,1fr);row-gap:12px;justify-items:center;text-align:center;}
  .press-text{
    grid-column:1;grid-row:1;
    font-size:min(var(--fs-body), calc((100vw - 24px) / 21));
  }
  .press-thumb{grid-column:1;grid-row:2;width:min(320px,100%);}
  .press-action{grid-column:1;grid-row:3;}
}

/* ============================================================
   お知らせカード：狭い画面ではタイトルを2行目に送る
   ============================================================ */
@media (max-width:560px){
  .news-row{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;
  }
  .news-title{grid-column:1 / -1;}
  .news-modal{padding:12px;}
  .news-modal-box{padding:44px 14px 24px;}
  .news-modal-close{width:34px;height:34px;font-size:24px;}
}


/* ============================================================
   実績ボックス：800px以下では2×2に切り替える
   小見出しの最長断片「放課後クラブ」を収めたうえで、
   ボックス同士が窮屈にならない横4列の下限が約792pxのため
   ============================================================ */
@media (max-width:800px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .stat{padding:16px 10px;gap:10px;}
}

/* ============================================================
   お知らせ一覧のページャー（news.html）
   ============================================================ */
.news-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:40px;
}
.news-pager button{
  min-width:40px;
  padding:8px 12px;
  background:var(--bg-a);
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:10px;
  font:inherit;
  font-weight:700;
  line-height:1.0;
  cursor:pointer;
}
.news-pager button[aria-current="true"]{
  background:var(--navy);
  color:var(--white);
}
.news-pager button[disabled]{
  opacity:.35;
  cursor:default;
}

@media (max-width:400px){
  .news-pager{gap:6px;}
  .news-pager button{min-width:34px;padding:6px 8px;}
}


/* ============================================================
   相談受付：番号付きの手順（折り返し行を番号の右端に揃える）
   ============================================================ */
.deflist dd p.num{
  display:flex;
  align-items:flex-start;
  gap:.2em;
}
.deflist dd p.num > span{flex:1;min-width:0;}

/* ============================================================
   寄付：ご寄付が必要な理由／注意点
   ============================================================ */
.reason{
  width:min(880px,100%);
  margin-inline:auto;
  text-align:left;
}
.reason + .reason{margin-top:calc(1em + var(--line-gap));}
.caution{
  width:min(880px,100%);
  margin:40px auto 0;
  text-align:left;
}
.donate-lead{margin-top:40px;}
.bank + .caution{margin-top:40px;}
.caution + .donate-lead{margin-top:40px;}
.cards.tri + .bank{margin-top:40px;}
.caution-title{font-weight:700;margin-bottom:10px;}

/* ============================================================
   協賛：協働事例
   ============================================================ */
.case{
  width:min(880px,100%);
  margin-inline:auto;
  text-align:left;
}
/* セクション2内で導入文・カード・締め文の間隔を確保する */
.cards--fit{margin-top:40px;}
.cards--fit + .keep-lines{margin-top:40px;}
.case-title{
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.2);
  line-height:calc(1em + var(--line-gap));
  margin-bottom:16px;
}
.case-lead{margin-bottom:24px;}
.case-sub{font-weight:700;margin-bottom:10px;}
.case-points{margin-bottom:20px;}
.case-points li{
  position:relative;
  padding-left:1.2em;
  line-height:calc(1em + var(--line-gap));
}
.case-points li + li{margin-top:0;}   /* 行間は line-height で本文と統一 */
.case-points li::before{
  content:"・";
  position:absolute;left:0;top:0;
  color:var(--navy);
  font-weight:700;
}
.case-source a{color:var(--navy);overflow-wrap:anywhere;}

/* ============================================================
   よくある質問：カテゴリー小見出し
   ============================================================ */
.faq-group{
  width:min(880px,100%);
  margin:0 auto 16px;
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.2);
  line-height:calc(1em + var(--line-gap));
}
.faq-list + .faq-group{margin-top:40px;}