/* =========================================================
   company.css — Company Production Runtime v1
   正本: production/design/mock-v1.2-top-product-prototype/pt04-company-layout-refined-v5.html
   Mock 差分CSS（pt04-company.css + refined v1〜v5 の6枚）は持ち込まず、
   **v5 の最終確定スタイルだけ**を本ファイルへ統合。全ルールを .company 配下にスコープ
   （header/footer/global へ非波及）。色は common.css の base token を使用。
   角ばり（radius:0）は .company サブツリーの custom property で再現（v1 の :root radius:0 相当）。
   Loads AFTER common.css（company リクエストのみ）。書体: Noto Sans JP（サンセリフ）。
   ========================================================= */

/* 角に頼らない（v1: radius 0）— .company サブツリーのみに限定 */
.company { --radius-sm: 0; --radius-md: 0; --radius-lg: 0; }

/* Section rhythm（v1: 120/76）*/
.company .section { padding: 120px 0; }
@media (max-width: 768px) { .company .section { padding: 76px 0; } }
.company .section--gray { background: var(--gray-50); }          /* pt04 base（common は gray-100・mock は gray-50）*/
.company .section--navy { background: var(--navy-900); color: #fff; }

/* Container narrow */
.company .narrow { max-width: 880px; }

/* Section heading（tracked EN label + 見出し + hairline bar）*/
.company .sec-head { margin-bottom: 52px; }
.company .en-label { font-family: var(--font-en); font-weight: 700; color: var(--blue-500); letter-spacing: 0.24em; font-size: 12px; text-transform: uppercase; }
.company .sec-head h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; margin-top: 4px; }
.company .sec-head h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--blue-600); margin-top: 22px; }
.company .section--navy .en-label { color: var(--blue-400); }
.company .section--navy .sec-head h2 { color: #fff; }
.company .section--navy .sec-head h2::after { background: var(--blue-400); }
.company .lead-lg { font-size: 18px; color: var(--gray-700); }

/* Buttons（v1: squared）*/
.company .btn { border-radius: 0; letter-spacing: 0.06em; }
.company .btn--white { background: #fff; color: var(--navy-900); }

/* HERO：lhero は共通 base（common.css）へ統合（LHero Pattern 1 Consolidation v1）。
   padding/H1/lead の override は廃止し base 回帰。eyebrow のみ一般 `.company .en-label`
   （セクション見出し用・不変）が base を source-order で上書きするため、lhero スコープで base 値へ一致させる。 */
.company .lhero .en-label { letter-spacing: 0.1em; font-size: 14px; color: var(--blue-400); text-transform: none; }

/* MESSAGE 代表メッセージ（1カラム Editorial・代表写真なし＝企業メッセージとして提示）*/
.company .message { max-width: 780px; }
.company .message blockquote { font-size: 21px; line-height: 2; font-weight: 500; color: var(--navy-900); border-left: 3px solid var(--blue-500); padding-left: 24px; margin: 0 0 28px; letter-spacing: 0.01em; }
.company .message > p { font-size: 16px; line-height: 2.1; color: var(--gray-700); margin: 0; }
.company .sign { font-family: var(--font-jp); margin-top: 44px; line-height: 1.7; }
.company .sign__company { display: block; font-weight: 700; color: var(--navy-900); font-size: 15px; letter-spacing: 0.04em; }
.company .sign__role { display: block; color: var(--text-muted); font-size: 13px; margin-top: 10px; }
.company .sign__name { display: block; font-weight: 700; color: var(--navy-900); font-size: 22px; letter-spacing: 0.1em; margin-top: 2px; }

/* PHILOSOPHY 私たちが大切にしていること（final = v2 + v4: 中央揃え・線なし creed）*/
.company .co-phil { position: relative; }
.company .co-phil .sec-head { margin-bottom: 44px; }
.company .co-phil .lead-lg { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.95; font-weight: 500; color: var(--navy-900); letter-spacing: 0.02em; max-width: 34ch; margin: 0 auto; text-align: left; }
.company .co-phil .lead-lg strong { color: var(--blue-600); }
.company .co-phil .creed { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px) 32px; margin: 56px 0 8px; border-top: 0; }
.company .co-phil .creed span { display: block; text-align: center; background: transparent; border: 0; border-left: 0; border-radius: 0; box-shadow: none; font-family: var(--font-jp); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.2; letter-spacing: 0.08em; color: var(--navy-900); padding: 4px 12px; }
.company .co-phil .creed span + span { border-left: 0; }
.company .co-phil .creed span small { display: block; margin-top: 12px; font-family: var(--font-jp); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; color: var(--blue-600); }
@media (max-width: 640px) { .company .co-phil .creed { grid-template-columns: 1fr; gap: 36px; margin: 40px 0 8px; } .company .co-phil .creed span { border-bottom: 0; padding: 4px 12px; } }

/* STORY 現場への敬意 / 家族への愛情（v3: S-07 交互・正式素材）*/
.company .co-story { background: var(--white); }
.company .co-story__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 72px); }
.company .co-story__row + .co-story__row { margin-top: clamp(56px, 8vw, 96px); }
.company .co-story__row--rev .co-story__media { order: 2; }
.company .co-story__media { position: relative; aspect-ratio: 3 / 2; background: var(--gray-100); overflow: hidden; }
.company .co-story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.company .co-story__text { max-width: 46ch; }
.company .co-story__title { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.55; letter-spacing: 0.03em; color: var(--navy-900); padding-top: 20px; border-top: 1px solid var(--gray-300); margin-bottom: 18px; }
.company .co-story__body { color: var(--gray-700); font-size: 15px; line-height: 2.0; margin: 0; }
@media (max-width: 900px) { .company .co-story__row { grid-template-columns: 1fr; gap: 24px; } .company .co-story__row + .co-story__row { margin-top: 56px; } .company .co-story__row--rev .co-story__media { order: 0; } .company .co-story__text { max-width: none; } }

/* VALUES ヤマイチの魂 ＋ 引用（画像削除・文章を主役とする中央組み editorial）*/
.company .co-values { background: var(--gray-50); }
.company .co-values__inner { max-width: 640px; margin-inline: auto; }
.company .co-values .co-soul__lead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.95; font-weight: 500; color: var(--navy-900); letter-spacing: 0.02em; margin: 0; }
.company .co-values .co-soul__lead strong { color: var(--blue-600); }
.company .co-values .co-soul__quote { margin: 28px 0 0; padding: 0; border: 0; color: var(--text-muted); font-size: 15px; line-height: 1.95; }

/* WHY 信頼で、選ばれる理由（final = base + v1 boxless hairline）*/
.company .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
@media (max-width: 820px) { .company .why-grid { grid-template-columns: 1fr; } }
.company .why { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 28px 0 0; transition: none; }
.company .why:hover { transform: none; box-shadow: none; }
.company .why .num { font-family: var(--font-en); font-weight: 800; font-size: 26px; color: var(--blue-500); }
.company .why h3 { font-size: 19px; color: var(--navy-900); margin: 12px 0 10px; }
.company .why p { color: var(--gray-700); font-size: 15px; }

/* COMPANY PROFILE 会社概要（final = base + v1 editorial table）*/
.company .profile { width: 100%; border-collapse: collapse; background: transparent; border: 0; border-top: 2px solid var(--navy-900); border-radius: 0; overflow: hidden; }
.company .profile th, .company .profile td { text-align: left; padding: 20px 20px; border-bottom: 1px solid var(--gray-200); font-size: 15px; line-height: 1.9; vertical-align: top; }
.company .profile th { background: transparent; color: var(--navy-800); width: 220px; font-weight: 700; }
.company .profile tr:last-child th, .company .profile tr:last-child td { border-bottom: none; }
.company .tbc { color: var(--text-muted); font-size: 13px; }
.company .tag-tbc { display: inline-block; background: #fff7e6; border: 1px solid #ffd98a; color: #8a6d00; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
@media (max-width: 640px) { .company .profile, .company .profile tbody, .company .profile tr, .company .profile th, .company .profile td { display: block; width: auto; } .company .profile tr { padding: 14px 0; border-bottom: 1px solid var(--gray-200); } .company .profile tr:last-child { border-bottom: 0; } .company .profile th { padding: 0 0 4px; border: 0; font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); } .company .profile td { padding: 0; border: 0; } }

/* CULTURE ヤマイチらしさ（navy・final = base + v1 boxless）*/
.company .culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
@media (max-width: 820px) { .company .culture-grid { grid-template-columns: 1fr; } }
.company .cul { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.18); border-radius: 0; padding: 28px 0 0; }
.company .cul h3 { font-size: 18px; color: #fff; margin-bottom: 10px; }
.company .cul p { color: #b9c9de; font-size: 14px; }

/* OFFICE 拠点のご案内（final = base + v1 squared）*/
.company .office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .company .office-grid { grid-template-columns: 1fr; } }
.company .office { background: #fff; border: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; overflow: hidden; }
.company .office__map { line-height: 0; background: var(--gray-100); }
.company .office__map iframe { display: block; width: 100%; height: 280px; border: 0; }
@media (max-width: 800px) { .company .office__map iframe { height: 240px; } }
.company .office__body { padding: 26px 24px; }
.company .office__body h3 { color: var(--navy-900); font-size: 18px; margin-bottom: 8px; }
.company .office address { font-style: normal; color: var(--gray-700); font-size: 14px; }
.company .office__body a { color: var(--blue-600); }

/* CTA 現場の課題（正本の .cta ブロックを faithful 再現・v1 squared）*/
.company .cta { background: radial-gradient(ellipse at top right, rgba(12,127,217,.3), transparent 55%), var(--navy-900); color: #fff; border-radius: 0; padding: 48px; text-align: center; }
.company .cta h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.company .cta p { color: #cfe0f2; margin-bottom: 24px; }
.company .cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.company .cta__btns .btn { border-radius: 0; }
@media (max-width: 560px) { .company .cta__btns .btn { width: 100%; } }