/* 一枚構成派生案。ヘッダーとスライドの既存スタイルを変更しない。 */
.one-page .lp-section { padding: 58px 0; scroll-margin-top: 24px; }
.one-page .lp-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 54px; align-items: start; }
.one-page .lp-heading h2 { font-size: 25px; line-height: 1.55; margin: 0 0 12px; color: var(--brand-dark); }
.one-page .lp-heading p { font-size: 13px; color: var(--muted); line-height: 1.85; }
.one-page .lp-content { min-width: 0; }
.one-page .lp-content > p { font-size: 15px; line-height: 1.95; margin-bottom: 16px; }
.one-page .service-rows { border-top: 2px solid var(--brand); }
.one-page .service-row { display: grid; grid-template-columns: 140px minmax(0,1fr) 164px; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; scroll-margin-top: 24px; }
.one-page .service-row h3 { font-size: 17px; margin: 0; color: var(--brand-dark); line-height: 1.85; }
.one-page .service-row h3::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--accent); vertical-align: 2px; }
.one-page .service-row p { font-size: 14px; line-height: 1.95; }
.one-page .service-row .row-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.one-page .service-row > a { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; line-height: 1.8; }
.one-page .lp-company { background: var(--pale); }
.one-page .company-facts > div { grid-template-columns: 130px minmax(0,1fr); padding: 12px 0; gap: 18px; font-size: 14px; }
.one-page .company-history { margin-top: 28px; }
.one-page .company-history h3 { font-size: 18px; color: var(--brand-dark); margin-bottom: 12px; }
.one-page .company-history dl > div { font-size: 14px; padding: 10px 0; margin: 0; border-top: 1px solid var(--line); }
.one-page .company-note { margin-top: 24px; font-size: 14px !important; }
.one-page .lp-partners h3 { font-size: 20px; margin-bottom: 14px; }
.one-page .lp-partners .lp-content > p { font-size: 14px; }
.one-page .lp-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.one-page .lp-news { padding-top: 12px; }
.one-page .lp-news-list { margin: 0; padding: 0; list-style: none; }
.one-page .lp-news-list li { display: grid; grid-template-columns: 90px 78px minmax(0,1fr); gap: 18px; border-block: 1px solid var(--line); padding: 18px 0; align-items: baseline; font-size: 13px; }
.one-page .news-kind { border: 1px solid var(--line); text-align: center; font-size: 11px; color: var(--brand); }
.one-page .lp-inquiry { background: var(--brand); color: #fff; padding: 38px 0; }
.one-page .inquiry-options { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.one-page .inquiry-options > div + div { border-left: 1px solid #71829e; padding-left: 48px; }
.one-page .inquiry-options h3 { font-size: 19px; line-height: 1.6; margin: 0 0 14px; }
.one-page .inquiry-options p { font-size: 13px; line-height: 1.85; max-width: 36em; margin-bottom: 18px; }
.one-page .inquiry-options a { color: #fff; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.one-page .inquiry-options .button-secondary { color: var(--brand); background: #fff; min-height: 46px; }
.one-page .lp-form { max-width: 680px; }
.one-page .lp-form > .preview-note { margin: 0 0 24px; }
.one-page .lp-privacy { border-top: 1px solid var(--line); padding-top: 38px; padding-bottom: 38px; }
.one-page .lp-privacy .lp-heading h2 { font-size: 20px; }
.one-page .lp-privacy .lp-content > p { font-size: 13px; margin-bottom: 12px; }
@media (max-width: 1000px) {
  .one-page .lp-layout { grid-template-columns: 170px minmax(0,1fr); gap: 32px; }
  .one-page .service-row { grid-template-columns: 120px minmax(0,1fr); gap: 18px; }
  .one-page .service-row > a { grid-column: 2; }
}
@media (max-width: 700px) {
  .one-page .lp-section { padding: 36px 0; }
  .one-page .lp-layout { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .one-page .lp-heading h2 { font-size: 24px; }
  .one-page .lp-heading p br { display: none; }
  .one-page .service-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 22px 0; }
  .one-page .service-row > a { grid-column: auto; }
  .one-page .company-facts > div { grid-template-columns: 85px minmax(0,1fr); gap: 12px; font-size: 13px; }
  .one-page .company-history dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .one-page .inquiry-options { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .one-page .inquiry-options > div + div { border-left: 0; border-top: 1px solid #71829e; padding-left: 0; padding-top: 28px; }
  .one-page .lp-news-list li { grid-template-columns: 90px 78px; gap: 8px 16px; }
  .one-page .lp-news-list a { grid-column: 1 / -1; }
  .one-page .lp-privacy .lp-heading h2 { font-size: 20px; }
}

/* 2026-10-12 Mia：区切りが分かるように、ブロックの背景を白と淡い紺（#eef2f8）で交互にする（オーナーのご指示）。
   並び：最初の画像の切り替え（白の操作の帯）→ お知らせ 淡い紺 → サービス 白 → パートナー 淡い紺 → 会社概要 白
         → お問い合わせの案内の帯 紺（そのまま）→ お問い合わせ 白 → 個人情報の取扱い 淡い紺 → 足もと 濃い紺（そのまま）
   隣り合うブロックは同じ色にしない。字と地の明るさの差は、淡い紺の上で本文 15.20・補助の字 6.91・紺の字 10.03 */
.one-page .lp-news,
.one-page .lp-partners,
.one-page .lp-privacy { background: var(--pale); }
.one-page .lp-company { background: var(--white); }
.one-page .lp-news { padding-top: 48px; padding-bottom: 48px; }
.one-page .lp-privacy { border-top: 0; }
/* 淡い紺の上では、線と札の枠が地に溶けるので、少し濃い線にし、札の中を白にする */
.one-page .lp-news .lp-news-list li { border-color: #c9d3e1; }
.one-page .lp-news .news-kind { border-color: #c9d3e1; background: var(--white); }
@media (max-width: 700px) {
  .one-page .lp-news { padding-top: 36px; padding-bottom: 36px; }
}

/* 2026-10-20 Mia：サービスの1つの節に本文の段落が2つ並ぶとき（PM・PMO支援）、段落の間を空ける（David の依頼）。
   線も地の色も足さず、空きだけで分ける。行の中の空き（約13px）より広い12pxを足し、段落の間の白を約25pxにする。
   注（.row-note）の上の10pxは今のまま（注は字が小さく灰色で、本文と見分けがつく） */
.one-page .service-row > div > p + p:not(.row-note) { margin-top: 12px; }

/* 2026-10-20 Mia：会社概要の「沿革」を、会社の情報（会社名〜決算期）と別のまとまりに見せる（オーナーのご依頼「沿革とその前の会社の情報がつながって見える」、案C）。
   PC・タブレット：ほかの節と同じ「左に見出し、右に中身」の形にし、「沿革」を「会社概要」と同じ左の列に置く（左の列の幅220px＋間54px、1000px以下は170px＋32px）。
   スマートフォン：左の列がないので、沿革の前の間を28px→52px、見出しを18px→20pxにする。
   どの幅も、年月日の列を会社の情報の列（130px）にそろえる。線も地の色も足さない（文と HTML は変えない）。
   ほかの案（A：間と見出しだけ、B：紺の2pxの線から始まる一覧を2つ）は checks/2026-10-20_company-history/ の画像 */
.one-page .lp-company .company-history { position: relative; margin-top: 56px; }
.one-page .lp-company .company-history h3 { position: absolute; left: -274px; top: -4px; width: 220px; margin: 0; font-size: 20px; }
.one-page .lp-company .company-history dl > div { grid-template-columns: 130px minmax(0,1fr); gap: 18px; }
@media (max-width: 1000px) {
  .one-page .lp-company .company-history h3 { left: -202px; width: 170px; }
}
@media (max-width: 700px) {
  .one-page .lp-company .company-history { margin-top: 52px; }
  .one-page .lp-company .company-history h3 { position: static; width: auto; margin-bottom: 14px; }
  .one-page .lp-company .company-history dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

/* 足もとの関連サイトの行：「関連・グループサイト」の太字を外し、ほかのリンクと同じ見た目にする（2026-10-21 オーナーのご指示、David） */
.homepage .site-footer .related-row h2,
.site-footer .related-row h2 { font-weight: 400; }

/* トップ以外のページ（お問い合わせ・個人情報の取扱い）の足もとを、トップと同じ並びにする（2026-10-21、David） */
.site-footer .related-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 24px; }
.site-footer .related-row h2 { font-size: 12px; color: #fff; }
.site-footer .related-row a { font-size: 12px; }
/* 送信の前の同意のチェック（2026-10-21、David。見た目の仕上げは Mia） */
.form-consent { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; cursor: pointer; }
.form-consent input { width: 18px; height: 18px; flex: none; }
.page-back { padding-top: 0; }

/* 2026-10-21 見本（Mia）：個人情報の取扱いのページの本文、トップ以外のページの足もと、戻るボタンの前の線（David の依頼）。
   線も地の色も足さず、間の配り方・見出しの段・1行の長さだけで整える。
   ①本文：今は見出しの上の間が0px・下が18pxで、見出しが前の段落にくっついて見えた。上を44px・下を8pxにして、見出しを下の文の組に寄せる。
     見出しは32px→18px（ページの題 32px、お問い合わせのページの小見出し 23px より下の段、本文 15px より一段上）、色は紺（題と同じ #152a4d）。
     1行は1120px（約70字）→680px（約45字、お問い合わせのページの入力欄の幅と同じ）。本文は15px・行の高さ1.95（トップの節の本文と同じ）。
   ②足もと：トップ以外では、関連サイトの行に site.css の .site-guidance（上の線1px と上下24px）が効き、紺の帯と細い線が余分に出ていた。トップと同じ指定にする。
   ③戻るボタン：.section+.section の上の線と上の24px が効いていたので外す（最終改定日の下の64pxで本文と分かれる）。 */
/* 幅の上限は中の要素に付ける（.container に付けると margin-inline:auto で中央に寄り、ページの題の左端とずれる） */
.privacy-policy > * { max-width: 680px; }
.privacy-policy h2 { font-size: 18px; line-height: 1.6; letter-spacing: .02em; color: var(--brand-dark); margin: 44px 0 8px; }
.privacy-policy h2:first-child { margin-top: 0; }
.privacy-policy p,
.privacy-policy ul { font-size: 15px; line-height: 1.95; margin-bottom: 0; }
.privacy-policy p + ul,
.privacy-policy ul + p:not(.policy-date) { margin-top: 8px; }
.privacy-policy ul { margin-top: 0; padding-left: 1.4em; }
/* ④字のまとまりの印（copy-chunk）がない段落（個人情報の10番、トップのパートナー・お問い合わせのご案内）でも、言葉の途中で折らない。
   全体の確かめで見つけた「お問い合わせく／ださい」「サービ／スサイト」「ご検／討中」「承りま／す。」など。
   Edge・Chrome は文節で折る、ほかのブラウザ（Safari・Firefox）は今のまま */
main p,
main li,
main h2,
main h3,
main dd { word-break: auto-phrase; }
/* ⑥サービスの見出しが2行になるとき（1280px・768px の「PM・PMO支援／（SES）」）、2行目が四角の印の下から始まり、1行目の字の頭とそろわない。
   印の幅7px＋間9px＝16pxをぶら下げ、2行目を字の頭にそろえる（1行のときの見た目は変わらない） */
.one-page .service-row h3 { padding-left: 16px; text-indent: -16px; }
.one-page .service-row h3 .copy-chunk { text-indent: 0; } /* text-indent は中の字のまとまり（inline-block）にも受け継がれるので戻す */
/* リンクの中の字のまとまり（inline-block）には親の下線が届かず、下線がとぎれとぎれになっていたので、まとまりにも下線を引く */
.privacy-policy a .copy-chunk { text-decoration: underline; }
.privacy-policy li + li { margin-top: 4px; }
.privacy-policy .policy-date { margin-top: 48px; font-size: 13px; color: var(--muted); }
.contact-page main > .page-back { border-top: 0; padding-top: 0; }
/* ⑤同意のチェック：押せる高さを44pxに（スマートフォンで指で押せる大きさ）、箱の左端を上の文の左端にそろえる（Edge の箱の初めの左の空き約3pxを外す）、
   「必須」の札までの間を入力欄の見出しとそろえる（並びの間8px＋札の左7px＝15px → 8px＋3px）、チェックの色を会社の紺に */
.contact-page .form-consent { min-height: 44px; }
.contact-page .form-consent input { margin: 0; accent-color: var(--brand); }
.contact-page .form-consent .field-required { margin-left: 3px; }
.site-footer .site-guidance { border-top: 0; padding: 0 0 12px; }
@media (max-width: 700px) {
  .privacy-policy h2 { font-size: 17px; margin-top: 36px; }
  .privacy-policy .policy-date { margin-top: 40px; }
}

/* PC（701px 以上）だけで改行する印。スマートフォンでは改行しない（2026-10-21、沿革の下の文、Mia の案をオーナーが採用、David） */
.br-pc { display: none; }
@media (min-width: 701px) { .br-pc { display: inline; } }

/* お知らせの欄：案B（2026-10-21 オーナーが採用、Mia の drafts/2026-10-21_news-height/assets/news-b.css から） */
/* どの案にも入れる直し（高さとは別、今の work/ で見つけた）：
   ①2件の間の線が、上の行の下の線と下の行の上の線で2本（2px）になり、上と下の線より太く見えた。2件目からは上の線を外す
   ②700px以下で、1件目の文（リンクでない方）が日付の列（90px）に入り、1行5字ほどで4行に折れて行が169pxになっていた。
     2件目のリンクも、列が 90px＋78px しかないので横いっぱいにしても184pxで、右に約170px空いたまま2行に折れていた。
     3つ目の列（残りの幅）を戻し、文とリンクを2段目の横いっぱいにする */
.one-page .lp-news-list li + li { border-top: 0; }
@media (max-width: 700px) {
  .one-page .lp-news-list li { grid-template-columns: 90px 78px minmax(0,1fr); }
  .one-page .lp-news-list .news-text,
  .one-page .lp-news-list a { grid-column: 1 / -1; }
}
/* 案B：字と行の間の段を上げる（2026-10-21 Mia）。
   お知らせの字を13px→15px（ほかの節の本文と同じ大きさ）、日付を14px、行の上下の間を18px→26pxにし、
   節の上下の間を48px→58px（ほかの節と同じ）にする。空きを予約せず、中身そのものを読み物の段にそろえる */
.one-page .lp-news{padding-top:58px;padding-bottom:58px}
.one-page .lp-news .lp-news-list li{padding:26px 0;font-size:15px}
.one-page .lp-news .lp-news-list li > span:first-child{font-size:14px;letter-spacing:.02em}
.one-page .lp-news .news-kind{font-size:12px}
@media (max-width: 700px) {
  .one-page .lp-news{padding-top:40px;padding-bottom:40px}
  .one-page .lp-news .lp-news-list li{padding:20px 0;font-size:15px}
}

/* お問い合わせ：電話番号の欄の横の書き方の案内（2026-10-21 オーナー） */
.contact-page .form-field .field-hint { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--muted); }
@media (max-width: 700px) { .contact-page .form-field .field-hint { display: block; margin: 4px 0 0; } }

/* お問い合わせ：実際に送る形（2026-10-21）。見えない欄（自動の書き込みの見分け）と、確認の欄の2つのボタン */
.contact-page .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-page .preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.contact-page .preview-actions .button { min-height: 50px; padding: 12px 24px; cursor: pointer; }
.contact-page .preview-actions .button:disabled { opacity: .6; cursor: default; }

/* テスト用サイトの見た目のテスト（G）で見つけた所の直し（2026-10-21 Mia、David の判断で NG-1 と気になること1〜4）
   結果：04_projects/corporate-site/checks/2026-10-21_test-site/mia-g/README.md、直しの記録：drafts/2026-10-21_test-fixes/README.md */

/* NG-1 ありがとうのページ：中身が画面より短いとき、足もとの下に白い帯が残らないよう、本文を画面の高さまで伸ばす（404のページと同じ考え方）
   thanks.html の body に thanks-page を足した。ほかのページは変えない */
body.thanks-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.thanks-page > main { flex: 1 0 auto; }

/* 気になること1 止められたとき：ブラウザが止まった欄を画面の上端まで送り、欄の見出しが隠れていた。見出しと案内の文が見える所で止める */
.contact-page #contact-form :is(input, select, textarea) { scroll-margin-top: 96px; }

/* 気になること2 スライドの操作の並び（701px以上）：状態の文の字数が変わると、中央そろえの並び全体が横に動いていた
   （site.css の r4 で min-width を0にしていた）。いちばん長い文（「1 / 2・動きを抑えて停止中」）が入る幅を決め、文は左に寄せる */
@media (min-width: 701px) {
  .slider-state { min-width: 13em; text-align: left; }
}

/* 気になること3 スマートフォンのメニュー：「お問い合わせ」だけパソコン用のボタンの空き（左右16px）が残り、字がほかの項目より2px右だった */
@media (max-width: 700px) {
  .site-navigation a.nav-contact { padding: 9px 14px; }
}

/* 気になること4 サービスの見出し「PM・PMO支援（SES）」：768pxで「PM・／PMO支援／（SES）」と名前が割れていた
   index.html で「PM・PMO支援」を1つのまとまり（copy-chunk）にした。701〜1000pxでは見出しの列が120px（字の幅104px）で
   まとまり（測って121.3px）が入らず、まとまりの中で折れて印の四角が2行目に下がったので、この幅のときだけ列を
   1001px以上と同じ140px（字の幅124px）にする */
@media (min-width: 701px) and (max-width: 1000px) {
  .one-page .service-row { grid-template-columns: 140px minmax(0,1fr); }
}