/* 法人トップ（templates/company-top.php）。
   出所：CompanyTopPC の <style>（PC）と CompanyTopSP の <style>（900px 以下）。値は変えない。
   responsive.css の後に読むので、900px 以下の値はここでもう一度書く（後から読む PC の値に負けないように）。
   カンプとの差：.page の固定幅は responsive.css が外す。見出し下の1行の margin-top はカンプの inline style をここへ移した。
   代表の言葉は PC（写真｜見出し＋原稿）と SP（見出し→写真→原稿）で並びが違うので、DOM を SP の順に置き、PC はグリッドの領域で並べる。 */

html, body { margin: 0; }
.wrap { padding-left: var(--gutter-pc); padding-right: var(--gutter-pc); }
.section { padding: var(--section-pc) var(--gutter-pc); }
.lm-heading .lm-body { margin-top: 16px; }

/* 会社ロゴ（余白込みの画像を高さで揃える。高さは inc/site/content/company-top.php の logo_height*） */
.lm-header .lm-logo { height: var(--logo-h, 24px); }

/* message */
.message__grid { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "photo heading" "photo text"; column-gap: 120px; align-items: start; }
.message__grid > .lm-heading { grid-area: heading; }
.message__grid > .lm-photo { grid-area: photo; }
.message__text { grid-area: text; }
.message .lm-photo { aspect-ratio: 3 / 4; }

/* notes */
.notes__grid { display: grid; grid-template-columns: 320px 1fr; gap: 120px; }
.notes__more { margin-top: var(--space-5); text-align: right; }

/* company */
.company__grid { display: grid; grid-template-columns: 320px 1fr; gap: 120px; }

/* contact */
.contact__grid { display: grid; grid-template-columns: 1fr 360px; gap: 120px; align-items: start; }
.contact__line { padding-top: var(--space-2); }
.contact__line h3 { margin: 0 0 var(--space-2); }
.contact__line .lm-body { margin-bottom: var(--space-4); }

/* footer */
.footer { padding: var(--space-6) var(--gutter-pc) var(--space-5); }
.footer__row { display: flex; justify-content: space-between; align-items: baseline; }
.footer__sns { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: .14em; }
.footer__sns a { color: var(--on-sea-muted); text-decoration: none; }
.footer__bottom { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--rule-sea); }

/* 901〜1200px：2列の左の列と列の間を幅に合わせて縮める（段の順番と文言は変えない。design/README.md「PC と SP のちがい」） */
@media (min-width: 901px) and (max-width: 1200px) {
  .message__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--space-5); }
  .notes__grid, .company__grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-5); }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--space-5); }
}

/* ---- 900px 以下：CompanyTopSP ---- */
@media (max-width: 900px) {
  .lm-header .lm-logo { height: var(--logo-h-sp, var(--logo-h, 24px)); }
  .wrap { padding-left: var(--gutter-sp); padding-right: var(--gutter-sp); }
  .section { padding: var(--space-6) var(--gutter-sp); }
  /* 開いたメニューをヒーローの見出しより上に。bundle.css の .lm-bookhero .lm-header（z-index 3）が responsive.css の 20 に勝ち、
     同じ 3 で後ろにある .lm-bookhero__copy がメニューに重なっていた */
  .lm-bookhero .lm-header { z-index: 20; }
  .lm-heading { margin-bottom: var(--space-5); }   /* SP カンプは bundle.css の space-5 のまま（responsive.css の space-4 ではない） */
  .lm-heading .lm-body { margin-top: 12px; font-size: 14px; }
  .lm-letter { padding: var(--space-2); }

  .message__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "heading" "photo" "text"; row-gap: var(--space-5); }
  .message__grid > .lm-heading { margin-bottom: 0; }

  .notes__grid, .company__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .notes__more { margin-top: var(--space-4); }

  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact__line { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
  .contact__line .lm-body { margin-bottom: var(--space-3); font-size: 14px; }

  .footer { padding: var(--space-5) var(--gutter-sp) var(--space-4); }
  .footer__row:first-child { display: block; }
  .footer .lm-nav { flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
  .footer__bottom { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--rule-sea); }
  .footer__sns { gap: var(--space-3); }
}