/* =========================================================
   SHINDO ── レスポンシブ対応（追加分）

   既存HTMLのインラインスタイル（デスクトップ幅前提の数値）を、
   画面幅に応じて上書きします。
   HTML本体の構造・文言・デザインは変更していません。
   デスクトップ（901px以上）の表示は一切変わりません。
   ========================================================= */

img, video, iframe { max-width: 100%; height: auto; }

/* ---------- タブレット以下：900px ---------- */
@media (max-width: 900px) {

  /* 左右の余白 60px / 48px → 28px */
  [style*="px 60px"], [style*="0 60px"],
  [style*="px 48px"], [style*="0 48px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* 3列・4列 → 2列 */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 固定px幅を含む段組み（サイドバー型・表組み型）→ 1列 */
  [style*="grid-template-columns:170px"], [style*="grid-template-columns: 170px"],
  [style*="grid-template-columns:120px"], [style*="grid-template-columns: 120px"],
  [style*="grid-template-columns:180px"], [style*="grid-template-columns: 180px"],
  [style*="grid-template-columns:200px"], [style*="grid-template-columns: 200px"],
  [style*="grid-template-columns:280px"], [style*="grid-template-columns: 280px"],
  [style*="1fr 320px"], [style*="1fr 360px"], [style*="1fr 90px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="gap:60px"], [style*="gap: 60px"] { gap: 32px !important; }

  /* 見出しの固定幅・固定高を解除 */
  h1, h2, h3 { width: auto !important; height: auto !important; }
}

/* ---------- スマートフォン：640px ---------- */
@media (max-width: 640px) {

  html, body { overflow-x: hidden; }

  /* 固定px幅を画面内に収める */
  div, section, article, header, footer,
  h1, h2, h3, h4, p, a, span, ul, ol, li, table {
    max-width: 100% !important;
  }

  [style*="px 60px"], [style*="0 60px"],
  [style*="px 48px"], [style*="0 48px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 段組みはすべて1列 */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  [style*="gap:60px"], [style*="gap: 60px"],
  [style*="gap:30px"], [style*="gap: 30px"],
  [style*="gap:28px"], [style*="gap: 28px"] { gap: 18px !important; }

  /* ---------- 文字サイズ：モバイル用の階層 ----------
     本文（12.5〜14px）はデスクトップの値のままだと日本語では小さすぎるため
     15〜16px まで引き上げる。それに合わせて見出しも調整する。
     従来は見出しを詰めすぎており（32px→23px 等）本文との差が出なかったので、
     縮小率を緩めて階層を取り戻す。48px は従来ルールから漏れていた。 */
  [style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 11px !important; }
  [style*="font-size:10.5px"], [style*="font-size: 10.5px"] { font-size: 11.5px !important; }
  [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
  [style*="font-size:11.5px"], [style*="font-size: 11.5px"] { font-size: 12.5px !important; }
  [style*="font-size:12px"], [style*="font-size: 12px"] { font-size: 13px !important; }
  [style*="font-size:12.5px"], [style*="font-size: 12.5px"] { font-size: 15px !important; }
  [style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 15px !important; }
  [style*="font-size:13.5px"], [style*="font-size: 13.5px"] { font-size: 15.5px !important; }
  [style*="font-size:14px"], [style*="font-size: 14px"] { font-size: 16px !important; }
  [style*="font-size:15px"], [style*="font-size: 15px"] { font-size: 16px !important; }
  [style*="font-size:16px"], [style*="font-size: 16px"] { font-size: 17px !important; }
  [style*="font-size:17px"], [style*="font-size: 17px"] { font-size: 18px !important; }
  [style*="font-size:18px"], [style*="font-size: 18px"] { font-size: 19px !important; }
  [style*="font-size:19px"], [style*="font-size: 19px"] { font-size: 20px !important; }
  [style*="font-size:20px"], [style*="font-size: 20px"] { font-size: 21px !important; }
  [style*="font-size:21px"], [style*="font-size: 21px"] { font-size: 21.5px !important; }
  [style*="font-size:23px"], [style*="font-size: 23px"] { font-size: 22.5px !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"] { font-size: 23px !important; }
  [style*="font-size:25px"], [style*="font-size: 25px"] { font-size: 23.5px !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 24px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 25px !important; }
  [style*="font-size:29px"], [style*="font-size: 29px"] { font-size: 25.5px !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 26px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 27px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 27.5px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 27.5px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 31px !important; }

  h1, h2 { letter-spacing: .03em !important; }

  /* 帯状の背景画像の高さを抑える */
  [style*="height:500px"], [style*="height: 500px"] { height: 260px !important; }
  [style*="height:460px"], [style*="height: 460px"] { height: 240px !important; }
  [style*="height:420px"], [style*="height: 420px"] { height: 220px !important; }
  [style*="height:380px"], [style*="height: 380px"] { height: 210px !important; }
  [style*="height:340px"], [style*="height: 340px"] { height: 200px !important; }
  [style*="height:300px"], [style*="height: 300px"] { height: 190px !important; }

  /* 上下の余白を圧縮 */
  [style*="padding:96px"], [style*="padding: 96px"],
  [style*="padding:88px"], [style*="padding: 88px"],
  [style*="padding:84px"], [style*="padding: 84px"],
  [style*="padding:80px"], [style*="padding: 80px"],
  [style*="padding:76px"], [style*="padding: 76px"] {
    padding-top: 44px !important;
    padding-bottom: 36px !important;
  }

  /* ヘッダー：ロゴ・タグライン・ナビを折り返す */
  [style*="position:sticky"] > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  [style*="position:sticky"] > div > div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    row-gap: 6px !important;
  }

  /* 横並びで詰まる箇所を折り返す */
  [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    row-gap: 14px !important;
  }

  [style*="white-space:nowrap"] { white-space: normal !important; }

  table { display: block; overflow-x: auto; }
}

/* ---------- 仕上げの微調整：640px以下 ---------- */
@media (max-width: 640px) {

  /* 本文中の強制改行（<br>）を無効化し、画面幅で自然に折り返す。
     デスクトップ用に入れられた改行位置が、狭い画面では
     「拠点に、」のような不自然な行を生むため。
     ロゴ横のタグライン・フッターの住所表記など、
     意図的な改行は除外する。 */
  p[style*="line-height:2.15"] br,
  p[style*="line-height: 2.15"] br { display: none; }

  /* ヒーローの募集ボタン：正方形から横長へ。指で押しやすくする */
  a[href="recruit.html"][style*="min-height:168px"],
  a[href="recruit.html"][style*="min-height: 168px"] {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 20px !important;
  }

  /* 本文の行間を少し詰める（狭い画面では間延びして見えるため） */
  p[style*="line-height:2.15"], p[style*="line-height: 2.15"] { line-height: 1.95 !important; }
}

/* =========================================================
   モバイル用ハンバーガーメニュー（640px以下）

   チェックボックスとlabelだけで開閉する。JavaScript は使わない。
   デスクトップの表示には一切影響しない。
   ========================================================= */

/* 開閉状態を保持するチェックボックス本体。
   display:none にするとキーボード操作ができなくなるため、
   見えない大きさに潰して残す。 */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

/* 三本線アイコンはデスクトップでは出さない */
.nav-burger{display:none}

/* 適用範囲は 767px まで。641〜767px ではナビ5項目が横に収まらず、
   各リンクが縦に折り返されてヘッダーが最大245pxまで伸びてしまうため
   （画面の3割をヘッダーが占める状態になる）。 */
@media (max-width: 767px){

  /* メニューを開いたときにナビを次の行へ送れるようにする */
  [style*="position:sticky"] > div{flex-wrap:wrap !important}

  /* --- 三本線アイコン：ヘッダー右端に置く --- */
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;
    gap:5px;width:26px;height:26px;flex:0 0 auto;
    cursor:pointer;
    /* DOM上はロゴより前にあるが、表示はヘッダー右端に置く。
       （:checked ~ .site-nav の兄弟セレクタを保つためDOM順は変えない） */
    order:1;margin-left:auto;
    /* タップ時に既定の青い矩形が光るのを抑える */
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger span{
    display:block;width:22px;height:1.5px;background:#4A1520;
    transition:transform .25s ease,opacity .15s ease;
  }

  /* --- 既定はメニューを閉じておく --- */
  .site-nav{display:none !important}

  /* --- 開いたとき：縦並びのリストにする --- */
  .nav-toggle:checked ~ .site-nav{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    margin-left:0 !important;
    gap:0 !important;
    padding-top:6px;
    order:2;              /* 三本線より後ろ＝次の行に折り返す */
  }
  .nav-toggle:checked ~ .site-nav a{
    padding:13px 2px;
    border-top:1px solid #D9C97E;
    font-size:14px;
    letter-spacing:.14em;
  }

  /* --- 開いている間はアイコンを × に変える --- */
  .nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* キーボード操作でフォーカスが当たっている位置を示す */
  .nav-toggle:focus-visible + .nav-burger{outline:2px solid #93293C;outline-offset:3px}
}

/* =========================================================
   about.html「奥会津に建てる、5つの柱。」の中央縦線

   3列レイアウト（1fr 90px 1fr）は900px以下で1列に畳まれるが、
   縦線は left:50% に絶対配置されたままなので、
   畳まれた本文の上を縦断して可読性を損なう。
   レイアウトが畳まれる幅から線を消す。
   ========================================================= */
@media (max-width: 900px){

  /* 中央の縦線は、1列に畳まれた時点で本文の上を縦断してしまうので消す */
  [style*="linear-gradient(#CBB96A,#93293C,#CBB96A)"]{display:none !important}

  /* 円（場・食・住・エネ・健康・共育）を左端に縦一列で揃え、
     ラベルと本文を右側の列にまとめる。

     元のHTMLは行ごとに左右が入れ替わる作りで、
     奇数行はラベルが左・見出しが右、偶数行はその逆になっている。
     そのままでは読む順序がばらつくため、グリッドの明示配置で
     「ラベル → 見出し・本文」の順に揃える。 */
  .pillar-row{
    grid-template-columns:66px 1fr !important;
    column-gap:20px;
    row-gap:4px;
    align-items:start !important;
    padding:22px 0 !important;
  }
  .pillar-circle{
    grid-column:1;
    grid-row:1 / span 2;
    justify-content:flex-start !important;
  }
  .pillar-label{
    grid-column:2;
    grid-row:1;
    text-align:left !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .pillar-text{
    grid-column:2;
    grid-row:2;
    text-align:left !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* =========================================================
   トップページ People セクション（640px以下）

   1列に畳まれると、丸い写真が画面幅いっぱい（375px幅で339px）に
   広がってしまい、囲みも無いため各人の区切りが分からなくなる。
   people.html と同じ「枠線＋上部に4:3の写真＋余白付きの本文」の
   体裁に揃える。デスクトップの4列表示は変更しない。
   ========================================================= */
@media (max-width: 640px){

  .people-grid{gap:16px !important}

  /* 3人のカードを四角で囲う（people.html と同じ配色） */
  .person-card{
    border:1px solid #D9C97E;
    background:#EFE49B;
  }
  .person-card .people-photo{
    aspect-ratio:4/3 !important;      /* 正円をやめて横長に。高さを抑える */
    border-radius:0 !important;
    border-bottom:1px solid #D9C97E;
    margin-bottom:0 !important;
  }
  .person-body{padding:20px 22px 24px}

  /* 無の会カードも写真の縦横比を揃える */
  .org-card .people-photo{aspect-ratio:4/3 !important}
}

/* =========================================================
   セクション見出しの行（640px以下）

   「ラベル ／ 見出し ／ 全員を見る→」を1行に並べる作りだが、
   狭い画面では見出しが数文字ずつ折り返され、右端のリンクも
   縦積みになって読みにくい。見出しに1行を与えて縦に並べる。
   ========================================================= */
@media (max-width: 640px){
  [style*="display:flex;align-items:baseline;gap:18px"]{
    flex-wrap:wrap !important;
    row-gap:12px !important;
  }
  [style*="display:flex;align-items:baseline;gap:18px"] > h2{
    flex:1 0 100%;
  }
  [style*="display:flex;align-items:baseline;gap:18px"] > a{
    margin-left:0 !important;
  }
}

/* =========================================================
   カード下部の矢印リンク（画面幅を問わず適用）

   元はただのテキスト（span）だったものをリンク化した箇所。
   色はカードの配色に合わせてインラインで指定しているため、
   ここでは下線のホバー反応だけを与える。
   ========================================================= */
.card-link{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.card-link:hover{border-bottom-color:currentColor}


/* =========================================================
   アンカーの着地位置

   ヘッダーは sticky で、幅によって高さが 62px（ハンバーガー時）〜
   75px（デスクトップ）と変わる。HTML側の scroll-margin-top は
   88px / 80px とばらつきがあり、条件によっては見出しの先頭が
   ヘッダーの裏へ潜り込むため、余裕を持たせて統一する。
   ========================================================= */
[style*="scroll-margin-top"]{scroll-margin-top:96px !important}
@media (max-width: 767px){
  [style*="scroll-margin-top"]{scroll-margin-top:84px !important}
}

/* =========================================================
   トップページ「パートナーと現場メンバーを募集しています」

   ヒーローは 1fr / 360px の2段組だが、900px以下では1列に畳まれる。
   このボックスには width:221px が焼き込まれているため、
   畳まれると画面左端に寄ってしまう。幅はそのままに中央へ置く。
   ========================================================= */
@media (max-width: 900px){
  .hero-cta{margin-left:auto !important;margin-right:auto !important}
}