.s-page--ttl{
    background:url(../img/pages-ttl-bg.jpg) center / cover no-repeat;
}
.s-page--ttl .container{
    max-width:75rem;
}
.s-page--ttl .flex{
    flex-direction:column;
    margin-top:clamp(3.125rem,3.24vi + 2.37rem,6.25rem);
}
.s-page--ttl .--ttl{
    font-size:var(--fs-lg);
    font-weight:var(--fw-xl);
    position:relative;
    color:var(--color-base);
}
.s-page--ttl .--ttl::after{
    content:'';
    position:absolute;
    display:inline-block;
    width:.938rem;
    height:.25rem;
    bottom:-.313rem;
    left:0;
    background-color:var(--color-base);
}
.s-content .container,
.s-machine--logi .container,
.s-scrap--biz .container{
    max-width:80rem;
}
.s-content .flex,
.s-machine--logi .flex,
.s-scrap--biz .flex{
    flex-direction:column;
}
.s-content .content-txt{
    margin-top:1.25rem;
}
.s-content .content-img,
.s-machine--logi .content-img,
.s-scrap--biz .content-img{
    margin-top:2.5rem;
}
.s-content .md-img,
.s-machine--logi .md-img,
.s-scrap--biz .md-img{
    position:relative;
    width:15.625rem;
    right:-1.25rem;
    margin-top:-1.25rem;
    margin-left:auto;
    z-index:2;
}
.s-content .sm-img{
    width:12.5rem;
    margin-top:1.875rem;
}
.s-machine--logi{
    background-color:var(--color-gray);
}
.s-machine--logi .md-img{
    right:auto;
    left:-1.25rem;
    margin-left:0;
}
.flow-chart{
    margin-top:3.75rem;
}
.flow-chart h3{
    position:relative;
    background-color:var(--color-gray);
    margin-bottom:1.875rem;
    padding:.5rem .625rem .5rem 1.25rem;
}
.flow-chart h3::before,
.flow-chart h3::after{
    content:'';
    position:absolute;
    display:inline-block;
    top:0;
    left:0;
    width:.188rem;
    height:100%;
    background-color:var(--color-background-alt);
}
.flow-chart h3::after{
    left:.313rem;
}
.flow-chart--list{
    display:flex;
    flex-direction:column;
    background:linear-gradient(90deg,rgba(241,245,249,1)50%,rgba(8,47,73,1)100%);
}
.flow-chart--list > li{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:5rem;
    padding:0 .938rem;
    background-color:var(--color-gray);
}
.flow-chart--list > li+li{
    border-top:.065rem solid var(--color-background);
}
.flow-chart--list > li+li::before{
    content:'';
    position:absolute;
    display:inline-block;
    top:0;
    width:0; 
    height:0; 
    border-left:.75rem solid transparent;
    border-right:.75rem solid transparent;
    border-top:.938rem solid var(--color-background);
}
.flow-chart--list > li:nth-of-type(5)::before{
    border-top:.938rem solid var(--color-gray);
}
.flow-chart--list > li .num{
    font-size:1.125rem;
    font-weight:var(--fw-md);
    width:1.875rem;
    height:1.875rem;
}
.flow-chart--list > li .num small{
    margin-right:.125rem;
}
.flow-chart--list > li:nth-of-type(5){
    gap:1.25rem;
    height:6.25rem;
    background-color:var(--color-background);
    color:var(--color-base);
    border-top:0;
}
.s-fleet{
    background-color:var(--color-gray);
}
.fleet-list{
    flex-wrap:wrap;
    gap:1.25rem;
    margin-top:1.875rem;
}
.fleet-list > div{
    width:calc(50% - .625rem);
}
.fleet-list figure{
    height:clamp(7.5rem,11.05vi + 4.91rem,13.75rem);
    overflow:hidden;
    cursor:pointer;
}
.fleet-list figure img{
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 300ms ease-out;
}
.fleet-list figure:hover img{
    transform:scale(1.1);
}
.fleet-list p{
    height:92px;
    margin-top:.625rem;
    padding:1.25rem 0;
    background-color:var(--color-background-alt);
    color:var(--color-base);
    text-align:center;
    line-height:1.6;
}
.en-page .fleet-list p{
    height:118px;
}
.image-modal-popup{
    position:fixed;
    display:none;
    align-items:center;
    justify-content:center;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background:rgba(8,47,73,.7);
    animation:300ms fadeIn;
    z-index:9999;
    overflow:auto;
}
.image-modal-popup .wrapper {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:26.25rem;
    width:100%;
    margin:auto;
    padding:1.25rem;
}
.image-modal-popup .modal-image{
    max-width:100%;
    max-height:85vh;
    border-radius:.5rem;
    cursor:default;
    animation:zoomIn 300ms ease-out;
}
.modal-prev,
.modal-next{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,255,255,.2);
    width:clamp(2.813rem,1.82vi + 2.39rem,3.75rem);
    height:clamp(2.813rem,1.82vi + 2.39rem,3.75rem);
    border-radius:50%;
    cursor:pointer;
    transition:background 300ms ease,transform 300ms ease;
    backdrop-filter:blur(.625rem);
    z-index:10;
}
.modal-prev img,
.modal-next img{
    width:clamp(1.25rem,.61vi + 1.11rem,1.563rem);
    height:clamp(1.25rem,.61vi + 1.11rem,1.563rem);
    filter:brightness(0) invert(0);
}
.modal-prev:hover,
.modal-next:hover{
    background:rgba(255,255,255,.3);
    transform:translateY(-50%) scale(1.1);
}
.modal-prev:active,
.modal-next:active{
    transform:translateY(-50%) scale(.95);
}
.modal-prev{
    left:.625rem;
}
.modal-next{
    right:.625rem;
}
.modal-close{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    top:.625rem;
    right:.625rem;
    width:clamp(2.5rem,1.21vi + 2.22rem,3.125rem);
    height:clamp(2.5rem,1.21vi + 2.22rem,3.125rem);
    background:rgba(255,255,255,.2);
    border-radius:50%;
    cursor:pointer;
    transition:background 300ms ease,transform 300ms ease;
    backdrop-filter:blur(.625rem);
    z-index:10;
}
.modal-close img{
    width:.938rem;
    height:c.938rem;
    filter:brightness(0) invert(0);
}
.modal-close:hover{
    background:rgba(255,255,255,.3);
    transform:rotate(90deg);
}
.modal-close:active{
    transform:rotate(90deg) scale(0.9);
}
.modal-counter{
    font-size:var(--fs-sm);
    background:var(--color-background);
    color:var(--color-base);
    margin-top:.938rem;
    padding:.5rem .938rem;
    border-radius:1.25rem;
    backdrop-filter:blur(.625rem);
}
.fleet-others > div{
    background-color:var(--color-background-alt);
    color:var(--color-base);
    padding:.938rem 0;
}
.fleet-others p{
    height:auto;
    margin-top:0;
    padding:0;
    background-color:transparent;
}
.en-page .fleet-others p{
    height:auto;
}
/*-- media query 60rem --*/
@media screen and (min-width:60rem){
    .s-page--ttl{
        padding-bottom:3.125rem;
    }
    .s-content .flex,
    .s-scrap--biz .flex{
        flex-direction:row;
        gap:3.75rem;
    }
    .s-content .content-img,
    .s-machine--logi .content-img,
    .s-scrap--biz .content-img{
        margin-top:0;
    }
    .s-content .flex > div,
    .s-machine--logi .flex > div,
    .s-scrap--biz .flex > div{
        width:50%;
    }
    .s-content .flex > div:nth-of-type(1){
        width:45%;
    }
    .s-content .flex .content-img figure,
    .s-scrap--biz .flex .content-img figure{
        width:34.375rem;
        right:-3.125rem;
    }
    .s-content .md-img{
        width:21.875rem;
        right:auto;
        margin-left:0;
    }
    .s-content .sm-img{
        width:15.625rem;
        margin-top:3.75rem;
    }
    .s-machine--logi .flex{
        flex-direction:row-reverse;
        gap:3.125rem;
    }
    .s-machine--logi .flex .content-img figure{
        width:34.375rem;
        left:-6.25rem;
    }
    .s-machine--logi .md-img{
        width:21.875rem;
        right:-6.25rem;
        left:auto;
        margin-left:auto;
    }
    .en-page .s-machine--logi .md-img{
        right:-1.25rem;
    }
    .s-scrap--biz .md-img{
        width:21.875rem;
        right:auto;
        left:0;
        margin-top:2.5rem;
        margin-left:0;
    }
    .flow-chart--list{
        flex-direction:row;
    }
    .flow-chart--list > li{
        justify-content:flex-start;
        gap:0;
        width:20%;
        height:9.375rem;
        padding:0 1.25rem;
    }
    .flow-chart--list > li+li{
        border-top:0;
        border-left:.062rem solid var(--color-background);
    }
    .flow-chart--list > li:nth-of-type(5){
        height:9.375rem;
        border-left:0;
    }
    .flow-chart--list > li .num{
        font-size:1rem;
        position:absolute;
        display:flex;
        align-items:center;
        justify-content:center;
        top:0;
        left:.938rem;
        width:auto;
        border-radius:50%;
    }
    .flow-chart--list > li span+span{
        font-size:.875rem;
    }
    .flow-chart--list > li+li::before,
    .flow-chart--list > li:nth-of-type(2):before,
    .flow-chart--list > li:nth-of-type(3):before,
    .flow-chart--list > li:nth-of-type(4):before,
    .flow-chart--list > li:nth-of-type(5):before{ 
        top:0;
        bottom:0;
        left:0;
        margin:auto;
        border-top:.75rem solid transparent;
        border-bottom:.75rem solid transparent;
        border-left:.938rem solid var(--color-background);
    }
    .flow-chart--list > li:nth-of-type(5):before{
        border-left:.938rem solid var(--color-gray);
    }
    .flow-chart h3{
        margin-bottom:2.5rem;
    }
    .image-modal-popup .wrapper{
        max-width:33.75rem;
    }
    .modal-prev{
        left:-1.5rem;
    }
    .modal-next{
        right:-1.5rem;
    }
    .fleet-list > div{
        width:calc(33.33333% - .875rem);
    }
}
/*-- media query 75rem --*/
@media screen and (min-width:75rem){
    .s-page--ttl .container{
        padding:0;
    }
    .s-machine--logi .flex .content-img figure{
        left:0;
    }
    .fleet-list > div{
        width:calc(25% - .938rem);
    }
}
/*-- media query max48rem --*/
@media (max-width:48rem){
  .image-modal-popup .modal-image {
    max-height:75vh;
  }
}

/*-- keyframes --*/
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
@keyframes zoomIn{
  from{
    opacity:0;
    transform:scale(.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}