/* =========================================================
   company.css — 会社概要ページ専用（common.cssの後に読み込み）
   スコープ: <main class="company"> ... </main>
   ブランド基調：金(#a78f45) / 落ち着いた紙色系
   ========================================================= */

/* ========== Theme tokens (scoped) ========== */
.company{
  --accent: #a78f45;      /* 既存トーンの金色 */
  --ink: #241d14;         /* 本文色 */
  --ink-2:#6b6456;        /* サブテキスト */
  --line:#dad5c7;         /* 罫線 */
  --muted:#f2f0ec;        /* 淡背景 */
  --card:#ffffff;         /* カード背景 */
  --radius: 16px;
  --shadow: 0 8px 28px rgba(0,0,0,.06);

  --fz-body: clamp(15px, 1.4vw, 16.5px);
  --lh-body: 1.9;

  --container-w: 1120px;
  --gutter: 20px;
}

/* ========== Container center fix ========== */
.company .container{
  max-width: var(--container-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* 万一、親がflexで左寄せの場合の保険 */
.company,
.company #wrapper,
.company .site-main{
  display:block !important;
}

/* ========== Base text inside scope ========== */
.company p,
.company li{ font-size: var(--fz-body); line-height: var(--lh-body); color: var(--ink-2); }
.company a{ color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.company a:hover{ opacity: .9; }

/* ========== Page Hero & Breadcrumbs ========== */
.company .page-hero{
  padding: clamp(56px, 8vw, 96px) 0 48px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(242,240,236,.7), rgba(242,240,236,0));
}
.company .page-title{
  color: var(--ink);
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.2;
  letter-spacing: .03em;
}
.company .page-sub{
  margin-top: .25em;
  font-size: clamp(13px, 1.6vw, 16px);
  color: #8f856f;
  font-weight: 600;
}
.company .breadcrumbs{
  margin-top: 10px;
  display:flex; gap:6px;
  font-size: 13px; color:#9a927d; list-style:none; padding:0;
}
.company .breadcrumbs li+li::before{ content:"›"; opacity:.5; margin:0 6px; }

/* ========== Sections & Titles ========== */
.company .section{ padding: clamp(48px, 8vw, 80px) 0; }
.company .section + .section{ margin-top: -8px; }
.company .section-title{
  color: var(--ink);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.35;
  margin-bottom: clamp(20px, 3vw, 28px);
  position: relative; padding-left: 14px;
}
.company .section-title::before{
  content:""; position:absolute; inset: .2em auto auto 0;
  width: 3px; height: 1.2em; background: var(--accent); border-radius: 3px;
}

/* ========== Grids ========== */
.company .grid-2{ display:grid; gap: clamp(16px, 3vw, 28px); }
.company .grid-3{ display:grid; gap: clamp(12px, 2.4vw, 20px); }
@media (min-width: 768px){
  .company .grid-2{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; }
}
@media (min-width: 960px){
  .company .grid-3{ grid-template-columns: repeat(3,1fr); }
}

/* ========== Summary (Lead section) ========== */
.company .company-summary .summary-text{ max-width: 64ch; }
.company .company-summary .summary-text p{ color: var(--ink-2); }
.company .value-points{ margin: .75rem 0 0; padding-left: 1.2rem; }
.company .value-points li{ list-style: disc; }

.company .summary-image img{
  display:block; width:100%; height:auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* 画像未設定の見栄えケア */
.company .summary-image img[src=""],
.company .summary-image img:not([src]){ display:none; }
.company .summary-image:has(img[src=""]),
.company .summary-image:has(img:not([src])){
  min-height: 160px; border:1px dashed #d8d1bf; border-radius: var(--radius);
  background: repeating-linear-gradient(45deg,#f6f3ec,#f6f3ec 10px,#efece5 10px,#efece5 20px);
}

/* ========== Profile Table ========== */
.company .profile-table{
  width:100%;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
  overflow:hidden;
}
.company .profile-table th,
.company .profile-table td{
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.4vw, 20px);
  font-size: clamp(14px, 1.6vw, 16px);
  vertical-align: top;
}
.company .profile-table th{
  width: 26%;
  background:#f4f1ea;
  color:#706756; text-align:left; white-space: nowrap;
}
.company .profile-table tr+tr th,
.company .profile-table tr+tr td{ border-top:1px solid var(--line); }

/* スマホ横スクロール保険 */
@media (max-width: 560px){
  .company .profile-table{ display:block; overflow-x:auto; }
}

/* ========== Cards (MVV / Members) ========== */
.company .cards{ display:grid; gap: 16px; }
@media (min-width:640px){ .company .cards{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .company .cards{ grid-template-columns: repeat(3,1fr); } }

.company .card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: var(--shadow);
}
.company .card h3{
  color: var(--accent);
  font-size: clamp(16px, 2vw, 18px);
  margin-bottom: .5rem;
}
.company .role{ color: var(--ink-2); font-size: .95rem; margin-bottom: .4rem; }
.company .members .member img{
  width:100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 12px; margin-bottom: 10px;
}

/* ========== Timeline (History) ========== */
.company .timeline{ list-style:none; padding:0; margin:0; display:grid; gap:14px; position:relative; }
.company .timeline::before{
  content:""; position:absolute; left:95px; top:0; bottom:0;
  width:2px; background:#efe9da; border-radius:2px;
}
.company .timeline li{
  display:grid; grid-template-columns:110px 1fr; gap:16px;
  background: var(--card); border:1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; position:relative;
}
.company .timeline time{
  color: var(--accent); font-weight: 700; position:relative;
}
.company .timeline time::before{
  content:""; position:absolute; right:-18px; top:.45em;
  width:10px; height:10px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 0 3px #f8f4eb;
}
@media (max-width: 480px){
  .company .timeline li{ grid-template-columns: 1fr; }
  .company .timeline time{ margin-bottom: .4rem; }
  .company .timeline::before{ display:none; }
}

/* ========== Access (Map) ========== */
.company .access .map{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.company .access iframe{
  width:100%; min-height: clamp(260px, 40vw, 420px); border:0; display:block;
}

/* ========== CTA ========== */
.company .cta .container{ text-align: center; }
.company .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: 13px 22px; border-radius: 9999px;
  border:1px solid var(--accent);
  background: var(--accent); color:#fff; font-weight:700;
  transition: filter .2s ease, transform .06s ease;
}
.company .btn:hover{ filter: brightness(1.05); }
.company .btn:active{ transform: translateY(1px); }

/* ========== Media elements safety ========== */
.company img,
.company table,
.company iframe{ max-width:100%; height:auto; }

/* ========== Admin bar overlap (optional) ========== */
@media (min-width:783px){
  body.admin-bar .site-header{ top:32px; }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce){
  .company *{ transition:none !important; animation:none !important; }
}