/* 沿革：ページ専用。年号・線はCSS、背景は文字を除去した支給画像 */
.history-page{color:#fff;background:#020a19;font-family:Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.history-page *{box-sizing:border-box}
.history-hero{position:relative}
.history-hero-art{display:block;width:100%;height:auto}
.history-hero-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.history-body{position:relative;isolation:isolate;overflow:hidden;padding:clamp(70px,8.5vw,165px) 0 clamp(90px,9vw,180px);background:#06132a url("images/history/timeline-background.png") center / cover no-repeat}
.history-intro{position:relative;z-index:1;text-align:center;width:90%;max-width:1200px;margin:0 auto clamp(65px,6.4vw,123px)}
.history-intro h2{width:fit-content;min-width:35vw;max-width:100%;margin:0 auto 30px;padding:0 25px 25px;border-bottom:1px solid #a8b9cc;font-size:clamp(26px,2.7vw,48px);font-weight:600;letter-spacing:.12em;line-height:1.6}
.history-intro p{font-size:clamp(14px,1.04vw,20px);line-height:1.85;margin:0}
.history-timeline{--year-width:clamp(108px,8.2vw,158px);--gap:clamp(18px,1.5vw,30px);position:relative;z-index:1;width:86%;max-width:1700px;margin:0 auto;padding:0;list-style:none}
.history-event{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--year-width) minmax(0,1fr);column-gap:var(--gap);min-height:clamp(80px,5.8vw,112px);padding-bottom:clamp(30px,2.4vw,46px);align-items:start}
.history-event::before{content:"";position:absolute;left:50%;top:calc(clamp(32px,2.25vw,44px) + 5px);bottom:5px;width:1px;transform:translateX(-50%);background:#9aabc1}
.history-event:last-child{padding-bottom:0;min-height:0}
.history-event:last-child::before{display:none}
.history-year{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;height:clamp(32px,2.25vw,44px);border:1px solid #acb9ca;border-radius:36px 0 36px 0;background:linear-gradient(135deg,rgba(167,190,222,.27),rgba(144,164,193,.1));font-size:clamp(23px,1.65vw,32px);font-weight:900;font-style:italic;line-height:1;font-family:Arial,sans-serif}
.history-event-text{grid-column:3;grid-row:1;padding-top:2px;min-width:0;font-size:clamp(14px,1.04vw,20px);line-height:1.65;overflow-wrap:anywhere}
.history-event:nth-child(even) .history-event-text{grid-column:1;text-align:right}
.history-event-text p{margin:0}
@media(max-width:767px){
 .history-hero{min-height:440px;background:#07172d;overflow:hidden}
 .history-hero-art{position:absolute;height:100%;width:100%;object-fit:cover;object-position:100% center;opacity:.48}
 .history-hero-copy{position:relative;clip-path:none;white-space:normal;overflow:visible;width:auto;height:auto;margin:0;padding:150px 7% 55px;text-shadow:0 2px 14px #001025}
 .history-hero-copy p{font-size:16px;line-height:1.8;margin:0 0 24px}
 .history-hero-copy h1{font-size:clamp(56px,13vw,94px);font-style:italic;line-height:1.1;margin:0}
 .history-hero-copy h1 span{display:block;font-size:28px;font-style:normal;margin-top:25px}
 .history-intro h2{font-size:26px;padding:0 8px 20px;letter-spacing:.05em}
 .history-intro p{font-size:14px;text-align:left;line-height:1.95}
 .history-intro p br{display:none}
 .history-timeline{--year-width:88px;--gap:18px;width:90%}
 .history-event{grid-template-columns:var(--year-width) minmax(0,1fr);min-height:90px;padding-bottom:35px}
 .history-year{grid-column:1;font-size:22px;height:32px}
 .history-event-text,.history-event:nth-child(even) .history-event-text{grid-column:2;text-align:left;font-size:14px}
 .history-event::before{left:calc(var(--year-width)/2);top:37px}
}

.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/history/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%);
    }
}