.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-used--machinery .container{
    max-width:80rem;
}
.s-content .flex{
    flex-direction:column;
}
.s-content .content-txt{
    margin-top:1.25rem;
}
.s-content .content-img{
    margin-top:2.5rem;
}
.link-img{
    margin-top:1.875rem;
    line-height:1;
}
.link-img .a-bg{
    position:relative;
    width:clamp(16.375rem,2.42vi + 15.81rem,17.625rem);
    height:clamp(3.438rem,1.21vi + 3.15rem,4.063rem);
    background:url(../img/used-machines/used-link.jpg) center / cover no-repeat;
}
.s-content .primary-btn a{
    justify-content:center;
    width:clamp(16.375rem,2.42vi + 15.81rem,17.625rem);
}
.external-link-btn{
    margin-top:.935rem;
}
.machine-list{
    flex-wrap:wrap;
    gap:1.25rem;
    margin-top:1.875rem;
}
.machine-list > div{
    width:calc(50% - .625rem);
}
.machine-list figure{
    height:clamp(10rem,16.97vi + 6.02rem,18.75rem);
    overflow:hidden;
    cursor:pointer;
}
.machine-list figure img{
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 300ms ease-out;
}
.machine-list figure:hover img{
    transform:scale(1.1);
}
.machine-list p{
    margin-top:.625rem;
    text-align:center;
}
.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);
}
.en-page .external-link-btn a{
    font-size:.75rem;
    gap:.625rem;
    padding:0 .625rem;
    white-space:nowrap;
}
/*-- media query 60rem --*/
@media screen and (min-width:60rem){
    .s-page--ttl{
        padding-bottom:3.125rem;
    }
    .s-content .flex{
        flex-direction:row;
    }
    .s-content .flex > div:nth-of-type(1){
        width:52%;
    }
    .s-content .content-img{
        width:48%;
        margin-top:0;
    }
    .s-content .content-img figure{
        width:36.25rem;
        left:-9.375rem;
    }
    .machine-list > div{
        width:calc(33.33333% - .875rem);
    }
}
/*-- media query 75rem --*/
@media screen and (min-width:75rem){
    .s-page--ttl .container{
        padding:0;
    }
    .s-content .flex > div:nth-of-type(1){
        width:45%;
    }
    .s-content .content-img{
        width:55%;
        margin-top:0;
    }
    .s-content .content-img figure{
        width:48.75rem;
        margin-top:-2.5rem;
    }
    .machine-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);
  }
}