/* 事業内容ページ専用 */
.business-page { background: #02091d; color: #fff; font-family: Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
.business-hero { position: relative; background: #051426; }
.business-hero-art { width: 100%; display: block; }
.business-hero-copy { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; }
.business-body { padding: 6% 0 7%; background: #03102a url('images/business/background.webp') center top / 100% 100% no-repeat; }
.business-inner { width: 80%; max-width: 1580px; margin: auto; }
.business-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5%; align-items: center; }
.business-logo { width: 200px; max-width: 55%; display: block; margin-bottom: 30px; }
.business-intro-text { border-top: 1px solid #afbbcf8c; padding-top: 27px; font-size: clamp(15px,1.05vw,20px); line-height: 1.8; }
.business-intro-text p + p { margin-top: 30px; }
.business-roles { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px 18px; list-style: none; margin: 0; padding: 0; }
.business-roles > li { grid-column: span 2; position: relative; aspect-ratio: 1; min-width: 0; }
.business-roles > li:nth-child(4) { grid-column: 2 / span 2; }
.business-roles > li:nth-child(5) { grid-column: 4 / span 2; }
.business-frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 3px #76c6e066); }
.business-role-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 15% 5%; }
.business-role-copy h2 { font-size: clamp(20px,1.9vw,34px); line-height: 1.4; letter-spacing: .03em; margin-bottom: 12px; }
.business-role-copy p { font-size: clamp(12px,.95vw,17px); line-height: 1.4; }
.business-spark { position: absolute; top: 0; right: 28%; width: 22px; height: 22px; pointer-events: none; background: radial-gradient(ellipse at center,#fff 0%,#a2ecff9c 15%,transparent 68%); }
.business-spark::before,.business-spark::after { content: ''; position: absolute; inset: 48% 0; background: linear-gradient(90deg,transparent,#dffbff,transparent); }
.business-spark::after { transform: rotate(90deg); }
.business-services { padding-top: 10%; }
.business-section-heading { text-align: center; max-width: 850px; margin: auto; }
.business-section-heading h2 { font-size: clamp(22px,2.1vw,40px); line-height: 1.5; padding-bottom: 24px; border-bottom: 1px solid #9aaac666; letter-spacing: .04em; }
.business-section-heading p { margin-top: 25px; font-size: clamp(15px,1.05vw,20px); line-height: 1.8; }
.business-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px 28px; padding: 0; margin: 70px 0 0; list-style: none; }
.business-service-grid li { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 8px; min-height: 78px; border: 1px solid #c5cfdf; border-radius: 3px; background: #d1dbe51c; font-size: clamp(14px,1vw,18px); line-height: 1.5; }
.business-strengths { padding-top: 12%; }
.business-strengths > h2 { text-align: center; font-size: clamp(28px,2.5vw,48px); line-height: 1.4; letter-spacing: .05em; }
.business-strength-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; max-width: 1240px; margin: 75px auto 0; padding: 0; list-style: none; }
.business-strength-grid > li { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px 10px; border: 1px solid #6bc6ea; border-radius: 50%; background: #b8c8df40; outline: 1px dashed #76c8e5a3; outline-offset: 6px; }
.business-strength-grid h3 { font-size: clamp(22px,2vw,36px); line-height: 1.5; letter-spacing: .05em; margin-bottom: 9px; }
.business-strength-grid p { font-size: clamp(13px,1vw,18px); line-height: 1.6; }
.business-strength-grid .business-spark { top: 8%; right: 10%; width: 32px; height: 32px; }
.business-qualifications { width: 64%; max-width: 1240px; margin: 9% auto 0; border: 1px solid #ccd7e7; border-radius: 22px; overflow: hidden; }
.business-qualifications h2 { text-align: center; background: #bccbe136; padding: 30px; border-bottom: 1px solid #b9c8db; font-size: clamp(22px,1.8vw,34px); line-height: 1.5; letter-spacing: .05em; }
.business-qual-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; padding: 42px 9%; font-size: clamp(14px,1vw,18px); line-height: 2; }
.business-qual-body ul { list-style: none; margin: 0; padding: 0; }
.business-qual-body p { margin-top: 14px; font-size: 14px; }
.company-flow-heading { text-align: center; }
.company-plug { display: block; margin: auto; background: url('images/top/top2.webp') left center / auto 100% no-repeat; }
.company-steps { display: grid; list-style: none; padding: 0; margin: 0; }
.company-steps h3 { text-align: center; }
@media(max-width:1200px) {
 .business-inner { width: 88%; }
 .business-intro { grid-template-columns: .8fr 1.2fr; gap: 4%; }
 .business-roles { gap: 8px; }
 .business-role-copy h2 { margin-bottom: 8px; }
 .business-service-grid { gap: 16px; }
 .business-strength-grid { gap: 24px; }
 .business-qualifications { width: 80%; }
 .business-qual-body { padding: 30px 5%; gap: 25px; }
}
@media(max-width:950px) {
 .business-intro { grid-template-columns: 1fr; gap: 45px; }
 .business-roles { width: 100%; max-width: 740px; margin: auto; gap: 14px; }
 .business-role-copy h2 { font-size: 28px; }
 .business-role-copy p { font-size: 15px; }
 .business-strength-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 650px; gap: 40px; }
 .business-strength-grid h3 { font-size: 30px; }
 .business-strength-grid p { font-size: 16px; }
 .business-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .business-qualifications { width: 88%; }
 .business-qual-body { grid-template-columns: 1fr; gap: 0; padding: 30px; font-size: 15px; }
}
@media(max-width:700px) {
 .business-hero { min-height: 445px; background: linear-gradient(90deg,#06142af2,#06142a66),url('images/business/hero.webp') right center / auto 100% no-repeat; }
 .business-hero-art { display: none; }
 .business-hero-copy { position: relative; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; padding: 150px 6% 65px; }
 .business-hero-copy > p { font-size: 14px; line-height: 1.8; }
 .business-hero-copy h1 { font-size: clamp(48px,11.5vw,72px); font-style: italic; line-height: 1.2; margin-top: 25px; }
 .business-hero-copy h1 span { display: block; font-size: 25px; font-style: normal; font-weight: 500; margin-top: 14px; }
 .business-body { padding: 50px 0 65px; background-size: auto 100%; }
 .business-logo { width: 170px; }
 .business-roles { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
 .business-roles > li:nth-child(4) { grid-column: span 2; }
 .business-roles > li:nth-child(5) { grid-column: 2 / span 2; }
 .business-role-copy h2 { font-size: 22px; }
 .business-role-copy p { font-size: 13px; }
 .business-role-copy p br { display: none; }
 .business-services,.business-strengths { padding-top: 65px; }
 .business-section-heading p br { display: none; }
 .business-service-grid { margin-top: 30px; gap: 14px; }
 .business-service-grid li { font-size: 14px; padding: 15px 10px; }
 .business-strength-grid { margin-top: 40px; gap: 28px; }
 .business-strength-grid h3 { font-size: 23px; }
 .business-strength-grid p { font-size: 13px; line-height: 1.5; }
 .business-qualifications { margin-top: 60px; }
 .business-qualifications h2 { padding: 25px 18px; font-size: 17px; }
 .business-qual-body { padding: 22px; font-size: 14px; }
}
@media(max-width:400px) {
 .business-roles { grid-template-columns: 1fr; max-width: 270px; gap: 20px; }
 .business-roles > li,.business-roles > li:nth-child(4),.business-roles > li:nth-child(5) { grid-column: auto; }
 .business-role-copy h2 { font-size: 28px; }
 .business-role-copy p { font-size: 16px; }
 .business-strength-grid { grid-template-columns: 1fr; max-width: 270px; }
 .business-strength-grid h3 { font-size: 28px; }
 .business-strength-grid p { font-size: 16px; }
 .business-service-grid { grid-template-columns: 1fr; }
}
/* Business：施工フローをデザインカンプに合わせる */
.company-flow {
    padding: clamp(50px, 3.4vw, 66px) 0 clamp(75px, 8vw, 154px);
    background: url('images/business/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%);
    }
}


/* デザインの光・輪郭を支給画像で再現（PC） */
.business-departments { min-width: 0; }
.business-departments-art,
.business-strengths-art { display: none; }
@media (min-width: 951px) {
    .business-departments-art {
        display: block;
        width: 100%;
        height: auto;
    }
    .business-strengths-art {
        display: block;
        width: 100%;
        max-width: 1240px;
        height: auto;
        margin: 75px auto 0;
    }
    /* 画像と同じ内容のHTMLを読み上げ用として維持 */
    .business-departments .business-roles,
    .business-strengths .business-strength-grid {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}
/* 950px以下は既存のHTML表示で読みやすい文字サイズを確保 */

/* Preserve photo aspect ratio independently of content height. */
.business-body{background-size:max(100%,900px) auto;}
@media(max-width:1024px){.business-body{background-size:max(100%,750px) auto;}}