/* C ヤスノリ建設有限会社 c.css v2.0（WS-02）：格好よく。紺と安全の黄、太い角ゴシックを表紙写真に重ね、斜めに切る */
@font-face { font-family: "C Display"; src: url("fonts/c-zenkaku.woff2") format("woff2"); font-weight: 900; font-display: optional; }
.co-c { --navy: #17325A; --yellow: #F2B705; --heavy: "C Display", var(--font-ui); background: #FFFFFF; }
.c-hero { position: relative; background: var(--navy); color: #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
.c-bar { padding: 12px var(--gutter); background: var(--navy); }
.c-name { font-family: var(--heavy); font-weight: 900; font-size: 22px; line-height: 1.3; color: var(--yellow); letter-spacing: 0.04em; }
.c-hero-img { position: relative; }
.c-hero-img img { width: 100%; height: min(76svh, 680px); object-fit: cover; }
.c-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 50, 90, 0.96) 0%, rgba(23, 50, 90, 0.86) 50%, rgba(23, 50, 90, 0.3) 80%, rgba(23, 50, 90, 0) 100%); }
.c-hero-text { position: absolute; left: 0; right: 0; bottom: 72px; z-index: 2; }
.c-tag { font-family: var(--heavy); font-weight: 900; font-size: clamp(44px, 13.4vw, 128px); line-height: 1.1; margin: 0; animation: c-lift 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.c-tag .ln { white-space: nowrap; }
.c-rule { display: block; width: 128px; height: 10px; margin-top: 18px; background: var(--yellow); transform-origin: left center; animation: c-rule 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms both; }
@keyframes c-lift { from { transform: translateY(18px); } }
@keyframes c-rule { from { transform: scaleX(0); } }
.c-intro { padding: 28px 0 0; }
.c-meta { font-weight: 700; font-size: 16px; color: var(--navy); }
.c-lead { font-family: var(--heavy); font-weight: 900; font-size: clamp(22px, 6.2vw, 34px); line-height: 1.5; color: var(--navy); max-width: 22em; }
.c-sec { padding: 72px 0 16px; }
.c-h2 { font-family: var(--heavy); font-weight: 900; color: var(--navy); font-size: clamp(32px, 9vw, 56px); line-height: 1.2; margin: 0 0 24px; }
.c-h2::before { content: ""; display: block; width: 48px; height: 8px; background: var(--yellow); margin-bottom: 14px; }
.c-grid { display: grid; gap: 8px; }
@media (min-width: 960px) { .c-grid { grid-template-columns: 1fr 440px; column-gap: 56px; } .c-grid .c-h2 { grid-column: 1 / -1; } }
.c-body { max-width: 40em; }
.c-h3 { font-family: var(--heavy); font-weight: 900; color: var(--navy); font-size: 22px; margin: 28px 0 8px; }
.c-list { list-style: none; padding: 0; }
.c-list li { padding: 10px 0 10px 14px; border-left: 4px solid var(--navy); margin-bottom: 8px; }
.c-list .cat-label { font-weight: 700; color: var(--navy); }
.c-count { font-weight: 700; padding: 14px 16px; background: #EEF1F6; }
.c-fig { margin: 16px 0 0; } .c-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.c-jobs-sec { background: var(--navy); color: #FFFFFF; padding: 72px 0; margin-top: 72px; }
.c-jobs-sec .c-h2 { color: #FFFFFF; }
.c-jobs { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 960px) { .c-jobs { grid-template-columns: repeat(3, 1fr); } }
.c-jobs li { border-top: 8px solid var(--yellow); background: #1F3E6B; padding: 14px 12px 16px; font-size: 18px; font-weight: 700; line-height: 1.5; min-height: 88px; }
.c-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 4px; background: var(--navy); }
.c-gallery li:first-child { grid-row: span 2; }
.c-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.c-story { background: var(--yellow); color: #000000; padding: 64px 0 56px; }
.c-story .c-h2 { color: #000000; } .c-story .c-h2::before { background: #000000; }
.c-story p { max-width: 36em; font-size: 18px; }