/* 会社概要専用スタイル */
.company-page { color: #fff; background: #02081d; }
.company-hero { position: relative; background: #07162c; }
.company-hero-art { display: block; width: 100%; }
.company-hero-copy { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
.company-body { background: #050d20 url('images/company/background.webp') center top / 100% auto repeat-y; padding-bottom: 6%; }
.company-inner { width: 74%; max-width: 1420px; margin-left: auto; margin-right: auto; }
.company-message { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5%; padding: 7% 0 6% 10%; position: relative; overflow: hidden; align-items: start; }
.company-watermark { position: absolute; top: 3%; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 110px/1 Georgia,serif; color: #83a8d514; pointer-events: none; }
.company-message-copy { z-index: 1; position: relative; }
.company-message-copy h2 { font-size: clamp(24px,2.3vw,44px); line-height: 1.9; letter-spacing: .05em; margin-bottom: 32px; }
.company-message-text { font-size: clamp(15px,1.15vw,21px); line-height: 1.95; }
.company-message-text p + p { margin-top: .8em; }
.company-signature { text-align: right; margin-top: 32px; font-size: 16px; }
.company-signature strong { font-family: "Yu Mincho","Hiragino Mincho ProN",serif; font-size: 30px; margin-left: 14px; font-weight: 700; }
/* 支給の合成画像から、文字のない右側の写真部分をCSSで表示 */
.company-message-photo { position: relative; overflow: hidden; aspect-ratio: 1023 / 724; margin-top: 0; }
.company-message-photo img { position: absolute; max-width: none; width: 200.1%; height: auto; left: -100.1%; top: -31.35%; }
.company-profile { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: center; padding: 1% 0 5%; }
.company-profile-logo img { width: 100%; height: auto; }
.company-table { font-size: 15px; }
.company-table > div { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 15px; padding: 16px 0; border-top: 1px solid #aab7d078; }
.company-table > div:last-child { border-bottom: 1px solid #aab7d078; }
.company-table dt { font-weight: 600; }
.company-table dd { margin: 0; overflow-wrap: anywhere; }
.company-office + .company-office { margin-top: 20px; }
.company-office strong { display: block; font-size: 15px; }
.company-office p { font-size: 14px; line-height: 1.85; }
.company-map { display: inline-block; width: 170px; margin-top: 12px; transition: transform .25s ease; }
.company-map img { display: block; width: 100%; }
.company-section-title { font-size: 25px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.company-section-title::after { content: ''; flex: 1; height: 1px; background: #aab7d078; }
.company-business { padding: 3% 0; }
.company-business h3 { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.company-business-list { padding: 0; margin: 0; list-style: none; columns: 2; column-gap: 50px; font-size: 15px; }
.company-business-list li { position: relative; padding-left: 1.2em; break-inside: avoid; margin-bottom: 8px; }
.company-business-list li::before { content: '▪'; position: absolute; left: 0; }
.company-permits { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; padding: 3% 0; }
.company-permits p { font-size: 15px; line-height: 1.9; }
.company-qualifications { padding: 3% 0; }
.company-qualifications ul { columns: 2; column-gap: 50px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.company-qualifications li { break-inside: avoid; padding: 3px 0; }
.company-note { text-align: right; font-size: 13px; color: #ced8e7; margin-top: 12px; }
.company-clients { padding: 3% 0 1%; }
.company-clients > p:not(.company-note) { font-size: 15px; line-height: 2; }
.company-flow { padding: 65px 0 85px; background: linear-gradient(#01091da8,#010719e8),url('images/company/background.webp') center bottom / cover no-repeat; }
.company-flow-heading { text-align: center; margin-bottom: 42px; }
.company-flow-heading h2 { font-size: 30px; letter-spacing: .05em; line-height: 1.6; margin-top: 12px; }
.company-flow-heading p { font-size: 14px; margin-top: 8px; }
.company-plug { display: block; width: 55px; height: 63px; margin: auto; background: url('images/top/top2.webp') left center / auto 63px no-repeat; }
.company-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.company-steps li { border-radius: 0 35px 0 0; background: #000a; padding: 20px 18px 24px; }
.company-step-label { display: block; border: 1px solid #abbacc; border-radius: 0 16px 0 0; text-align: center; width: 90%; max-width: 155px; margin: 0 auto 14px; font-family: Georgia,serif; font-size: 15px; }
.company-steps h3 { font-size: 17px; text-align: center; margin-bottom: 12px; }
.company-steps p { font-size: 14px; line-height: 1.85; }
@media (hover:hover) and (pointer:fine) {
    .company-map:hover { transform: translateY(-3px); }
}
@media (max-width:1100px) {
    .company-inner { width: 86%; }
    .company-message { padding-left: 7%; gap: 4%; }
    .company-profile { grid-template-columns: .7fr 1.3fr; gap: 6%; }
    .company-steps { gap: 12px; }
    .company-steps li { padding: 16px 12px; }
    .company-table > div { grid-template-columns: 75px minmax(0,1fr); }
}
@media (max-width:800px) {
    .company-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
    .company-steps li:last-child { grid-column: 1/-1; }
    .company-message { grid-template-columns: 1fr; padding: 55px 7%; gap: 35px; }
    .company-message-photo { width: 100%; }
    .company-message-text { font-size: 16px; }
    .company-profile { grid-template-columns: 1fr; gap: 40px; }
    .company-profile-logo { width: 240px; max-width: 70%; margin: auto; }
    .company-table > div { grid-template-columns: 90px minmax(0,1fr); }
    .company-business,.company-qualifications,.company-clients { padding: 35px 0; }
    .company-permits { grid-template-columns: 1fr; gap: 30px; padding: 20px 0; }
    .company-business-list,.company-qualifications ul { columns: 1; }
}
@media (max-width:700px) {
    .company-hero { min-height: 445px; background: linear-gradient(90deg,#06142af2,#06142a66),url('images/company/hero.webp') right center / auto 100% no-repeat; }
    .company-hero-art { display: none; }
    .company-hero-copy { position: relative; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; padding: 150px 7% 60px; }
    .company-hero-copy > p { font-size: 14px; line-height: 1.9; }
    .company-hero-copy h1 { font-size: clamp(48px,12vw,72px); font-style: italic; line-height: 1.2; margin-top: 24px; }
    .company-hero-copy h1 span { display: block; font-size: 25px; font-style: normal; font-weight: 500; margin-top: 14px; }
    .company-message-copy h2 { font-size: clamp(20px,5vw,30px); letter-spacing: 0; line-height: 1.85; }
    .company-watermark { font-size: 70px; }
    .company-body { padding-bottom: 35px; background-size: auto 1600px; }
    .company-section-title { font-size: 23px; }
    .company-flow { padding: 50px 0; }
    .company-flow-heading h2 { font-size: 27px; }
    .company-flow-heading p { line-height: 1.8; }
}
@media (max-width:450px) {
    .company-steps { grid-template-columns: 1fr; }
    .company-table > div { grid-template-columns: 70px minmax(0,1fr); gap: 10px; }
    .company-table { font-size: 14px; }
    .company-signature strong { font-size: 25px; }
}
@media (prefers-reduced-motion:reduce) {
    .company-map { transition: none; }
    .company-map:hover { transform: none; }
}

/* Company01：施工フローをデザインカンプに合わせる */
.company-flow {
    padding: clamp(50px, 3.4vw, 66px) 0 clamp(75px, 8vw, 154px);
    background: url('images/company/background.webp') center 60% / cover no-repeat;
    font-family: Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
.company-flow > .container {
    width: 88%;
    max-width: 1685px;
}
.company-flow-heading {
    margin-bottom: clamp(72px, 5.8vw, 112px);
}
.company-plug {
    width: clamp(76px, 5.84vw, 112px);
    height: clamp(76px, 5.84vw, 112px);
    background-size: auto 100%;
    background-position: left center;
}
.company-flow-heading h2 {
    margin-top: 24px;
    font-size: clamp(28px, 2.09vw, 40px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .06em;
}
.company-flow-heading p {
    margin-top: 14px;
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 400;
    line-height: 1.8;
}
.company-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(22px, 1.93vw, 37px);
    align-items: stretch;
}
.company-steps > li {
    position: relative;
    min-width: 0;
    min-height: clamp(290px, 16.8vw, 323px);
    padding: clamp(40px, 2.4vw, 46px) clamp(16px, 1.15vw, 22px) 35px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 17px;
    background: rgba(0, 0, 5, .84);
    overflow: visible;
}
.company-step-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -53%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57%;
    max-width: 175px;
    min-height: clamp(38px, 2.5vw, 48px);
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 0 50px 50px 0;
    background: linear-gradient(100deg, #10323e, #000);
    font-family: inherit;
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .04em;
    white-space: nowrap;
}
.company-steps h3 {
    margin: 0 0 18px;
    font-size: clamp(18px, 1.46vw, 28px);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.company-steps p {
    margin: 0;
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* 各カード間をつなぐグレーの矢印 */
.company-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(22px, 1.93vw, 37px) + 7px);
    transform: translateY(-50%);
    width: calc(clamp(22px, 1.93vw, 37px) - 14px);
    height: clamp(55px, 4.5vw, 86px);
    background: #858b96;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
}
@media (max-width: 1100px) and (min-width: 901px) {
    .company-flow > .container { width: 94%; }
    .company-steps > li { padding-left: 10px; padding-right: 10px; }
    .company-steps h3 { font-size: 16px; }
    .company-steps p { font-size: 14px; line-height: 1.7; }
    .company-step-label { width: 72%; }
}
@media (max-width: 900px) {
    .company-flow { padding: 50px 0 65px; }
    .company-flow-heading { margin-bottom: 65px; }
    .company-flow-heading h2 { font-size: 28px; }
    .company-flow-heading p { font-size: 13px; }
    .company-steps {
        grid-template-columns: 1fr;
        gap: 62px;
        max-width: 560px;
        margin: auto;
    }
    .company-steps > li {
        min-height: 0;
        padding: 38px 24px 28px;
    }
    .company-step-label { width: 175px; min-height: 42px; font-size: 17px; }
    .company-steps h3 { font-size: 22px; margin-bottom: 16px; }
    .company-steps p { font-size: 16px; line-height: 1.85; }
    .company-steps > li:not(:last-child)::after {
        top: auto;
        bottom: -30px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 18px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
}

/* Representative signature: supplied transparent artwork */
body .company-signature strong {
    display: inline-block;
    width: clamp(150px, 5vw, 240px);
    height: auto;
    aspect-ratio: 481 / 137;
    vertical-align: middle;
    background: url("images/company/kawakami-signature.png") center / contain no-repeat;
    font-size: 0 !important;
    line-height: 0;
}