@charset "utf-8";

.main-visual{
    position:relative;
    height:100vh;
    min-height:72rem;
    overflow:hidden;
    margin-top:0;
}

.visual-slide{
    position:absolute;
    inset:0;
}

.visual-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}

.visual-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 55%, rgba(0,0,0,.15));
}

.visual-copy{
    position:relative;
    z-index:1;
    width:min(100% - 8rem, 144rem);
    height:100%;
    margin:0 auto;
    padding-top:9rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
}

.visual-copy span{
    margin-bottom:2rem;
    font-size:1.6rem;
    font-weight:800;
    letter-spacing:.25em;
}

.visual-copy h2{
    max-width:82rem;
    font-size:7.4rem;
    line-height:1.08;
    letter-spacing:-.07em;
}

.visual-copy p{
    max-width:56rem;
    margin-top:3rem;
    font-size:2rem;
    line-height:1.7;
}

.visual-control{
    position:absolute;
    right:calc((100% - min(100% - 8rem, 144rem)) / 2);
    bottom:6rem;
    z-index:2;
    display:flex;
    gap:1rem;
}

.visual-control button{
    width:5.6rem;
    height:5.6rem;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    font-size:1.3rem;
    font-weight:800;
}

.business-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3rem;
}

.business-card{
    position:relative;
    min-height:52rem;
    border-radius:3rem;
    overflow:hidden;
    background:#ddd;
}

.business-card img{
    width:100%;
    height:100%;
    min-height:52rem;
    object-fit:cover;
    transition:.45s ease;
}

.business-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
}

.business-card div{
    position:absolute;
    left:3rem;
    right:3rem;
    bottom:3rem;
    z-index:1;
    color:#fff;
}

.business-card span{
    display:block;
    margin-bottom:1rem;
    font-weight:800;
    color:#66b2ff;
}

.business-card strong{
    display:block;
    margin-bottom:1rem;
    font-size:3.2rem;
    letter-spacing:-.04em;
}

.business-card p{
    color:rgba(255,255,255,.84);
    line-height:1.7;
}

.business-card:hover img{
    transform:scale(1.06);
}

.sustain{
    background:#f2f5f8;
    padding:13rem 0;
}

.sustain-inner{
    width:min(100% - 8rem, 144rem);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:7rem;
    align-items:center;
}

.sustain-visual{
    height:52rem;
    border-radius:3rem;
    overflow:hidden;
    background:#d7e4ee;
}

.sustain-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.sustain-copy h2{
    font-size:5.2rem;
    line-height:1.12;
    letter-spacing:-.07em;
}

.sustain-copy>p{
    max-width:64rem;
    margin-top:2.6rem;
    font-size:1.8rem;
    line-height:1.75;
}

.sustain-stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:2rem;
    margin-top:4.6rem;
}

.sustain-stats div{
    min-height:13rem;
    padding:3rem;
    border-radius:2rem;
    background:#fff;
}

.sustain-stats strong{
    display:block;
    margin-bottom:.8rem;
    color:#0057a8;
    font-size:4.6rem;
    line-height:1;
    letter-spacing:-.04em;
}

.sustain-stats p{
    font-size:1.5rem;
}

.content-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:repeat(2, 24rem);
    gap:3rem;
}

.content-card{
    position:relative;
    border-radius:3rem;
    overflow:hidden;
    background:#eef2f5;
}

.content-card.large{
    grid-row:span 2;
}

.content-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s ease;
}

.content-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58));
}

.content-card div{
    position:absolute;
    left:3rem;
    right:3rem;
    bottom:3rem;
    z-index:1;
    color:#fff;
}

.content-card span{
    display:block;
    margin-bottom:1rem;
    color:#66b2ff;
    font-weight:800;
}

.content-card h3{
    font-size:2.8rem;
    line-height:1.25;
    letter-spacing:-.04em;
}

.content-card:not(.large) h3{
    font-size:2.3rem;
}

.content-card:hover img{
    transform:scale(1.06);
}

@media (max-width:1439px){
    .visual-copy,
    .sustain-inner{width:min(100% - 6rem, 128rem);}
    .visual-copy h2{font-size:6.4rem;}
    .sustain-copy h2{font-size:4.7rem;}
    .business-card,
    .business-card img{min-height:47rem;}
}

@media (max-width:1279px){
    .main-visual{height:76rem;min-height:76rem;}
    .visual-copy{width:min(100% - 6rem, 128rem);padding-top:7.6rem;}
    .visual-copy h2{font-size:5.6rem;}
    .business-grid{grid-template-columns:1fr;gap:2rem;}
    .business-card,
    .business-card img{min-height:34rem;}
    .sustain{padding:10rem 0;}
    .sustain-inner{
        width:min(100% - 6rem, 128rem);
        grid-template-columns:1fr;
        gap:4rem;
    }
    .sustain-visual{height:42rem;}
    .content-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }
    .content-card.large{grid-column:1 / -1;grid-row:auto;height:42rem;}
    .content-card:not(.large){height:28rem;}
}

@media (max-width:767px){
    .main-visual{height:64rem;min-height:64rem;}
    .visual-copy{width:calc(100% - 3.2rem);padding-top:6.6rem;}
    .visual-copy h2{font-size:4rem;}
    .visual-copy p{font-size:1.6rem;}
    .visual-control{right:1.6rem;bottom:2.4rem;}
    .business-card,
    .business-card img{min-height:32rem;}
    .business-card div{left:2.2rem;right:2.2rem;bottom:2.4rem;}
    .business-card strong{font-size:2.6rem;}
    .sustain{padding:7.2rem 0;}
    .sustain-inner{width:calc(100% - 3.2rem);gap:3.2rem;}
    .sustain-visual{height:28rem;border-radius:2.2rem;}
    .sustain-copy h2{font-size:3.4rem;}
    .sustain-copy>p{font-size:1.6rem;margin-top:1.8rem;}
    .sustain-stats{grid-template-columns:1fr;gap:1.4rem;margin-top:3rem;}
    .sustain-stats div{min-height:auto;padding:2.4rem;border-radius:1.6rem;}
    .sustain-stats strong{font-size:3.8rem;}
    .content-grid{grid-template-columns:1fr;gap:1.6rem;}
    .content-card.large,
    .content-card:not(.large){height:30rem;}
    .content-card div{left:2.2rem;right:2.2rem;bottom:2.4rem;}
    .content-card h3,
    .content-card:not(.large) h3{font-size:2.3rem;}
}

@media (max-width:320px){
    .visual-copy{width:calc(100% - 2.4rem);}
    .visual-copy h2{font-size:3.4rem;}
    .sustain-inner{width:calc(100% - 2.4rem);}
    .sustain-copy h2{font-size:3rem;}
    .sustain-visual{height:24rem;}
}