/* =========================================================
   会社概要ページ（company.html）専用スタイル
   foundations は css/design-system.css、共通は css/lp.css を参照
   ========================================================= */

/* ページ用ヒーロー（.page-hero）は下層ページ共用のため css/lp.css へ移動 */

/* 理念（マニフェスト） */
.philosophy{text-align:center;}
.philosophy .quote{font-family:var(--serif); font-weight:600; color:var(--ink-strong);
  font-size:clamp(26px,4.2vw,46px); line-height:1.6; letter-spacing:.03em; margin:22px auto 0; max-width:20em; text-wrap:balance;}
.philosophy .rule{width:56px; height:2px; background:var(--accent); margin:36px auto 0;}
.philosophy .note{font-size:clamp(13px,1.5vw,15px); color:#6f6f78; line-height:2; max-width:34em; margin:30px auto 0; text-wrap:pretty;}

/* 代表メッセージ（split） */
.message{background:#fff;}
.message .photo{aspect-ratio:4/5;}
.message h2{font-size:clamp(24px,3.2vw,36px); line-height:1.55; margin-bottom:24px;}
.message .txt{display:flex; flex-direction:column; align-items:flex-start;}
.message .body{display:flex; flex-direction:column; gap:18px;}
.message .body p{font-size:clamp(13px,1.5vw,15px); color:#5f5f68; line-height:2.1; text-wrap:pretty;}
.message .sign{margin-top:30px; display:flex; align-items:baseline; gap:14px;}
.message .sign .role{font-size:12px; color:#8a8a93; letter-spacing:.05em;}
.message .sign .name{font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink-strong); letter-spacing:.06em;}

/* 会社概要テーブル */
.profile .head{text-align:center; margin-bottom:56px;}
.profile dl{max-width:760px; margin:0 auto; border-top:1px solid var(--line);}
.profile .item{display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:baseline;
  padding:24px 8px; border-bottom:1px solid var(--line);}
.profile dt{font-size:13px; font-weight:600; color:var(--brand); letter-spacing:.06em;}
.profile dd{font-size:15px; color:var(--ink-strong); line-height:1.9;}
.profile dd .sub{display:block; font-size:12.5px; color:#8a8a93; margin-top:4px; line-height:1.7;}

/* 拠点 */
.offices{background:linear-gradient(180deg,#fff,#fbfcfe); text-align:center;}
.offices .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); margin-top:60px; text-align:left;}
.office{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px rgba(32,35,95,.05); transition:transform .25s, box-shadow .25s;}
.office:hover{transform:translateY(-5px); box-shadow:0 22px 50px rgba(32,35,95,.1);}
.office .map{height:150px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 100% at 80% 10%, color-mix(in oklab,var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);}
.office .map .pin{position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  width:26px; height:26px; color:#fff;}
.office .map .city{position:absolute; bottom:14px; left:18px; font-family:var(--geo); font-size:13px;
  letter-spacing:.22em; color:rgba(255,255,255,.9);}
.office .info{padding:28px 30px 30px;}
.office .label{font-family:var(--geo); font-size:11px; letter-spacing:.2em; color:var(--accent-ink); text-transform:uppercase;}
.office h3{font-size:20px; margin:8px 0 14px;}
.office .addr{font-size:14px; color:#5f5f68; line-height:2;}

/* =========================================================
   レスポンシブ（会社概要ページ固有）
   ========================================================= */
@media (max-width:900px){
  .offices .grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto; margin-top:44px;}
  .message .sign{margin-top:24px;}
}
@media (max-width:560px){
  .profile .item{grid-template-columns:1fr; gap:6px; padding:20px 4px;}
  .profile dt{font-size:12px;}
  .profile dd{font-size:14.5px;}
  .philosophy .quote br{display:none;}
}