/* =====================================================================
   むすび社会保険労務士事務所　共通CSS（全ページで読む。ここ1か所に書く）
   ・土台はトップ（サイトver2_レスポンシブ.html）の値。トップだけのヒーローは index.html 側に置く。
   ・基本の値＝PC。画面幅ごとの違いは下の @media に「基本との差分」だけを書く。
   ・色は下の5つの変数だけを使う。動きの演出（自動で動くもの・時間をかけて変わるもの）は使わない。
   ===================================================================== */

/* ---- 1. 変数と土台 ---- */
:root{
  --navy:#101841;   /* 紺：地の色・本文の文字 */
  --blue:#144da0;   /* 青：面・強調・線 */
  --sky:#70acce;    /* 水色：細い線・キーボード操作時の枠・ナビのhover */
  --white:#ffffff;  /* 白 */
  --pale:#f3f6fb;   /* 円の明るい帯・準備中の枠の地 */
  --serif:"Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
/* 文字色の白は body から全体に継承させる（トップの見た目と同じ状態にするため） */
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--sans)}
button{font:inherit}

/* ---- 2. ナビ（4つのリンクはすべて同じ見た目＝文字だけ。全ページ共通） ---- */
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;font-family:var(--serif);background:var(--navy);border-bottom:1px solid var(--blue)}
/* 事務所名はトップへのリンク。リンク標準の色・下線は出さない */
.brand{font-size:23px;line-height:1.35;letter-spacing:.035em;font-weight:600;color:inherit;text-decoration:none}
.nav-toggle{display:none}
.navlinks{display:flex;gap:24px;align-items:center;font:14px var(--sans)}
.navlinks a{color:var(--white);text-decoration:none}

/* ---- 仮置き帯（全ページのヘッダー直下に1行で置く）。文章が仮であることを画面上で示す ----
   公開前の外し方：各ページの <p class="draft-banner" …> の1行を消す。
   または、すぐ下の行の display:block を display:none に変える（ここ1か所で全ページから消える） */
.draft-banner{display:block;margin:0;padding:10px 5.5%;border-bottom:1px solid var(--sky);background:var(--pale);color:var(--navy);font-size:14px;line-height:22px;text-align:center}
/* （行の高さを px で決めているのは、帯の高さを整数にして、下の内容が小数点のずれで描き直されないようにするため） */

/* ---- 3. フッター（全ページ共通） ---- */
.footer{display:flex;justify-content:space-between;padding:18px 7%;background:var(--navy);font-size:13px}
.footer a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ---- 4. カード（トップの支援領域と、支援内容の一覧で共通）。カード全体がリンク ---- */
.card{position:relative;display:block;min-height:116px;padding:17px 16px;border:1px solid var(--blue);background:var(--white);color:inherit;text-decoration:none}
.card small{font:14px Georgia;letter-spacing:.1em;color:var(--blue)}
/* 見出しが折り返すときは、行の長さをそろえ（balance）、文節で区切る（auto-phrase）。最後の1文字だけが次の行に回るのを防ぐため */
.card-title{margin:10px 0 15px;font:500 18px/1.65 var(--serif);color:var(--navy);text-wrap:balance;word-break:auto-phrase}
.card p{margin:0;font-size:16px;line-height:1.8;color:var(--navy)}

/* ---- 5. トップの部品（支援領域・ブリッジ帯・読みもの） ---- */
.section{padding:30px 7% 34px;background:var(--navy)}
.sectionhead{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.section h2{margin:0;font:500 22px var(--serif)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bridge{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 7% 28px;padding:15px 18px;background:var(--blue)}
.bridge strong{font:500 16px var(--serif)}
.bridge span{font-size:14px}
/* 線は上だけ。色は border-color で4辺そろえる（確定版の計算後の値と同じにするため） */
.articles{padding:24px 7% 32px;border-top:1px solid;border-color:var(--sky);background:var(--white)}
.articles h2{margin:0;font:500 25px var(--serif);color:var(--navy)}
.content-link{display:inline-block;padding:8px 12px;background:var(--blue);color:var(--white);font:14px var(--sans);letter-spacing:.06em;text-decoration:none}
.article-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid;border-color:var(--sky);color:var(--navy);font:15px var(--serif);text-decoration:none}
.article-row small{font:13px var(--sans);color:var(--blue)}

/* ---- 6. 内容ページの型（トップ以外の全ページ） ---- */
/* 上：青い見出し帯（ページ名＝h1 と短い説明） */
.page-head{padding:48px 7% 40px;background:var(--blue)}
/* 長いページ名が折り返すときは、カード見出しと同じく行の長さをそろえ、文節で区切る */
.page-head h1{margin:0;font:500 32px/1.5 var(--serif);letter-spacing:.04em;text-wrap:balance;word-break:auto-phrase}
.page-lead{margin:12px 0 0;font-size:16px;line-height:1.8}
/* 下：本文エリア（白地）。.prose には Markdown から変換した HTML をそのまま入れる */
.page-body{padding:48px 7% 64px;background:var(--white);color:var(--navy)}
.prose{max-width:720px;margin:0 auto;font-size:16px;line-height:1.9}
.prose h2{margin:2.2em 0 .8em;font:500 24px/1.5 var(--serif)}
.prose h3{margin:1.8em 0 .6em;font:500 19px/1.6 var(--serif)}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.5em}
.prose li{margin:.3em 0}
.prose a{color:var(--blue);text-underline-offset:3px}
.prose blockquote{margin:0 0 1.2em;padding:.2em 0 .2em 1em;border-left:3px solid var(--sky)}
.prose hr{margin:2em 0;border:0;border-top:1px solid var(--sky)}
/* 公開後に掲載するもの・準備中のものを置く枠 */
.placeholder{max-width:720px;margin:32px auto 0;padding:28px 20px;border:1px dashed var(--sky);background:var(--pale);color:var(--blue);font-size:15px;text-align:center}
/* 支援内容の一覧。カードを足すだけで並ぶ（5つになっても折り返して並ぶ） */
.service-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;max-width:1100px;margin:0 auto}

/* ---- 7. キーボード操作時の枠（常に有効）。outline は場所を取らないのでレイアウトはずれない ---- */
a:focus-visible,button:focus-visible,.services:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* ---- 8. マウスなど「ホバーできる」環境だけで色を変える（タッチ画面で色が残らないようにするため） ---- */
@media (hover:hover){
  .navlinks a:hover{color:var(--sky);text-decoration:underline}
  .card:hover{background:var(--blue)}
  .card:hover small,.card:hover .card-title,.card:hover p{color:var(--white)}
  .article-row:hover span{color:var(--blue);text-decoration:underline}
}

/* ---- 9. トップのカードの横スライド（900px未満）。指で左右に動かし、カードの左端で止まる ---- */
@media (width < 900px){
  .services{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory}
  .services .card{scroll-snap-align:start}
}
/* 次のカードが少し見える幅にする */
@media (width < 700px){
  .services{grid-auto-columns:80%}
}
@media (700px <= width < 900px){
  .services{grid-auto-columns:45%}
}

/* ---- 10. スマホ（768px未満） ---- */
@media (width < 768px){
  /* ナビ：事務所名と☰。開くとリンク4つが縦に並ぶ（押せる高さは44px以上） */
  .nav{flex-wrap:wrap;height:auto;min-height:58px;padding:7px 20px}
  .brand{font-size:16px}
  .nav-toggle{display:block;width:44px;height:44px;padding:0;border:0;background:none;color:var(--white);font-size:24px;line-height:44px;cursor:pointer}
  .navlinks{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 8px;font-size:16px}
  .nav.is-open .navlinks{display:flex}
  .navlinks a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--blue)}
  /* 左右の余白は20pxにそろえる */
  .section,.articles,.footer,.page-head,.page-body{padding-left:20px;padding-right:20px}
  .sectionhead{flex-wrap:wrap;gap:12px}
  /* ブリッジ帯・読みもの・フッターは縦に積む */
  .bridge{display:block;margin:0 20px 28px}
  .bridge strong{display:block;margin-bottom:8px}
  .bridge span{display:block;font-size:15px}
  .article-row{flex-direction:column;gap:4px}
  .footer{flex-direction:column;gap:8px}
  /* 内容ページ：見出し帯と本文の上下を詰める */
  .page-head{padding-top:32px;padding-bottom:28px}
  .page-head h1{font-size:26px}
  .page-body{padding-top:32px;padding-bottom:48px}
}