/* Company04 アクセス専用 */
.access-page{background:#01091e;color:#fff;font-family:Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.access-page *{box-sizing:border-box}
.access-hero{position:relative}
.access-hero-art{display:block;width:100%;height:auto}
.access-hero-copy{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.access-offices{padding:clamp(55px,6vw,115px) 0 clamp(85px,9vw,175px);background:url("images/access/background.webp") center / cover no-repeat}
.access-office{margin:0 0 clamp(65px,8vw,154px)}
.access-office:last-child{margin-bottom:0}
.access-city{font-size:clamp(64px,10vw,192px);font-weight:700;line-height:.88;letter-spacing:.03em;color:rgba(162,184,217,.32);margin:0;padding:0}
.access-office-body{position:relative;min-height:clamp(290px,33vw,635px);padding-bottom:clamp(30px,3vw,58px)}
.access-map{width:71%;height:clamp(290px,33vw,635px);background:#dce3eb}
.access-map iframe{display:block;width:100%;height:100%;border:0}
.access-office-info{position:absolute;top:clamp(45px,8.6vw,165px);left:62%;width:27.5%;aspect-ratio:1;border-radius:50%;background:#04104d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 18px}
.access-office-info h2{font-size:clamp(23px,2.7vw,48px);font-weight:500;line-height:1.4;margin:0 0 clamp(15px,1.4vw,27px)}
.access-office-info address{font-size:clamp(12px,1.28vw,23px);font-style:normal;line-height:1.6;letter-spacing:.05em}
.access-numbers{font-size:clamp(17px,1.82vw,34px);line-height:1.65;font-weight:700;font-style:italic;margin:clamp(15px,2vw,38px) 0 0}
.access-numbers a{color:inherit;text-decoration:none}
.access-numbers a:hover{text-decoration:underline;text-underline-offset:5px}
.access-numbers a:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:900px){
.access-office-info{left:auto;right:4%;width:34%;padding:20px 12px}
.access-office-info h2{font-size:25px;margin-bottom:12px}
.access-office-info address{font-size:12px;letter-spacing:0}
.access-numbers{font-size:18px;margin-top:15px}
}
@media(max-width:600px){
.access-hero{min-height:390px;overflow:hidden;background:#071a37}
.access-hero-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.45}
.access-hero-copy{position:relative;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;padding:145px 6% 65px;text-shadow:0 2px 16px #001025}
.access-hero-copy p{font-size:14px;line-height:1.8;margin:0 0 25px}
.access-hero-copy h1{font-size:clamp(62px,16vw,94px);font-style:italic;line-height:1.05;margin:0}
.access-hero-copy h1 span{display:block;font-size:28px;font-style:normal;margin-top:24px}
.access-city{font-size:20vw}
.access-office-body{padding:0;min-height:0}
.access-map{width:100%;height:300px}
.access-office-info{position:relative;top:auto;right:auto;left:auto;width:280px;max-width:90%;margin:-24px auto 0;padding:32px 15px}
.access-office-info h2{font-size:28px}
.access-office-info address{font-size:14px}
.access-numbers{font-size:21px}
}
.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}
/* Business：施工フローをデザインカンプに合わせる */
.company-flow {
    padding: clamp(50px, 3.4vw, 66px) 0 clamp(75px, 8vw, 154px);
    background: url('images/access/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%);
    }
}
