.filter-btn,
.filter-btn dt,
.filter-btn dd{
    display:flex;
    align-items:center;
    line-height:1;
}
.filter-btn{
    justify-content:center;
    gap:.625rem;
    padding:1.25rem;
    cursor:pointer;
}
.filter-btn dt,
.filter-btn dd{
    gap:.313rem;
}
.filter-btn dd{
    padding:.313rem .625rem;
    background-color:var(--secondary-color);
    border-radius:.5rem;
}
.filter-icon{
    width:1.25rem;
}
.chevron-circle-right-icon{
    width:1.125rem;
}
.filter-close-btn{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.313rem;
    cursor:pointer;
    line-height:1;
}
.filter-close-btn .close-icon{
    width:1.5rem;
}
.aside-inner{
    position:fixed;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    bottom:0;
    left:0;
    width:100vw;
    height:90vh;
    background-color:var(--background-color);
    z-index:10;
    clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition:clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease-in;
    backdrop-filter:blur(.625rem);
    border:.063rem solid var(--primary-color);
    border-top-left-radius:1.25rem;
    border-top-right-radius:1.25rem;
}
.aside-open .aside-inner{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.aside-content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:100%;
    padding:1.25rem;
    overflow-y:auto;
}
.aside-content > .sub-content{
    position:relative;
    width:100%;
    margin-top:.938rem;
    padding:1.25rem;
    background-color:var(--secondary-color);
}
.aside-content > .sub-content.by-people--type{
    background-color:var(--purple);
}
.aside-content .sub-ttl{
    font-size:1.125rem;
    width:15rem;
    margin:0 auto;
    margin-bottom:.938rem;
    padding:.313rem .625rem;
    background-color:var(--primary-color);
    color:var(--white);
    text-align:var(--align-center);
    border-radius:1.25rem;
}
.company-videos-number-field{
    position:relative;
    width:16.875rem;
    margin:0 auto;
    padding:.938rem;
    background-color:var(--secondary-color);
    border:.063rem solid var(--primary-color);
    border-radius:.938rem;
    text-align:var(--align-center);
}
.aside-content .company-videos-number-field{
    margin-top:1.875rem;
    margin-bottom:1.25rem;
}
.company-videos-number-field .sub-text{
    font-size:clamp(1.25rem,.22vi + 1.2rem,1.375rem);
}
.company-videos-number-field::before{
    content:'';
    position:absolute;
    width:0;
    height:0;
    right:0;
    bottom:-1.938rem;
    left:0;
    margin:0 auto;
    border-left:.938rem solid transparent;
    border-right:.938rem solid transparent;
    border-top:1.938rem solid var(--primary-color);
}
.company-videos-number-field::after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    right:0;
    bottom:-1.875rem;
    left:0;
    margin:0 auto;
    border-left:.875rem solid transparent;
    border-right:.875rem solid transparent;
    border-top:1.875rem solid var(--secondary-color);
}
.company-videos-number-field h3{
    line-height:1;
}
.company-videos-number-field h3 .xl-text{
    color:var(--orange);
}
.aside-content ul li+li{
    margin-top:.625rem;
}
.aside-content .by-tag ul li a{
    text-decoration:underline;
}
.by-job--type li a,
.by-people--type li a{
    display:flex;
    align-items:center;
    gap:.5rem;
}
.aside-content ul li a .caret-right-icon{
    width:.5rem;
}
.caret-right-icon svg{
    fill:var(--primary-color);
}
.by-people--type .caret-right-icon svg{
    fill:var(--purple-sub);
}
.searchform_group-btn{
    position:relative;
}
.search-input{
    width:100%;
    height:3.125rem;
    padding:0 .938rem;
    background-color:var(--white);
    border-radius:1.25rem;
}
.searchform_group-btn .search-btn{
    position:absolute;
    top:.625rem;
    right:1.25rem;
}
.search-icon svg path{
    fill:var(--primary-color);
}
.s-ttl{
    margin-top:2.5rem;
}
.s-ttl .h2-ttl{
    font-size:clamp(1.375rem,1.1vi + 1.12rem,2rem);
    position:relative;
}
.s-ttl .h2-ttl::before{
    content:'';
    position:absolute;
    display:inline-block;
    top:-.625rem;
    left:0;
    width:5.5rem;
    height:.563rem;
    background:url(../img/company-videos/deco-dots.png) center / cover no-repeat;
}
.aside-content .sub-content.by-people--type p{
    margin-top:.938rem;
}
.aside-content .sub-content.by-people--type p a{
    text-decoration:underline;
}
.job-videos{
    margin-top:clamp(1.563rem,2.84vi + .85rem,3.125rem);
}
.job-videos a+a{
    margin-top:.938rem;
}
.job-videos .video-content{
    background-color:var(--background-color);
}
.job-videos .video-content::after{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:1.875rem;
    bottom:-.125rem;
    left:0;
    right:0;
    margin:auto;
    background:url(../img/top/video-deco.png) center / 100% 1.875rem no-repeat;
}
.job-videos dl dt{
    position:relative;
}
.job-videos dl dd{
    position:relative;
    z-index:2;
}
.job-videos dl dd span{
    font-size:clamp(.75rem,.22vi + .7rem,.875rem);
    padding:.313rem .625rem;
    background-color:var(--primary-color);
    color:var(--white);
    line-height:1;
}
.job-videos dl dd h3{
    font-size:1.25rem;
    margin-top:.313rem;
}
.job-videos dl dd p{
    margin-top:.313rem;
    line-height:1.8;
}
.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    margin-top:1.25rem;
    padding-top:1.25rem;
    border-top:.063rem solid var(--primary-color);
    line-height:1;
}
.nav-arr{
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(1.875rem,2.21vi + 1.36rem,3.125rem);
    height:clamp(1.875rem,2.21vi + 1.36rem,3.125rem);
    background-color:var(--white);
    border:.063rem solid var(--primary-color);
    border-radius:50%;
}
.nav-arr span{
    width:clamp(.938rem,1.66vi + .55rem,1.875rem);
}
.pagination p{
    font-size:clamp(1rem,.66vi + .84rem,1.375rem);
}
.animated-png01,
.animated-png02{
    line-height:0;
    display:none;
}
.animated-png01 img,
.animated-png02 img{
    transition: transform 0.3s ease;
}
.animated-png01 img{
    width:5rem;
}
.animated-png02 img{
    width:6.25rem;
    margin-top:.938rem;
    transform-origin:center bottom;
}
.pagination .nav-arr.disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}
.s-content .container{
    max-width:inherit;
}
/*-- media query 80rem --*/
@media screen and (min-width:80rem){
    .s-ttl{
        margin-top:3.125rem;
    }
    .filter-btn,
    .filter-close-btn{
        display:none;
        visibility:hidden;
    }
    .s-content .container > .flex{
        flex-direction:row;
        justify-content:center;
        gap:2.5rem;
    }
    .aside{
        width:21.25rem;
    }
    .article{
        width:calc(100% - 21.25rem);
    }
    .aside-inner{
        position:relative;
        width:100%;
        height:auto;
        clip-path:none;
        background-color:transparent;
        border:0;
        border-radius:0;
    }
    .aside-content{
        padding:0;
    }
    .company-videos-number-field{
        width:100%;
        margin:0;
    }
    .aside-content .company-videos-number-field{
        margin-top:0;
    }
    .job-videos{
        margin-top:3.75rem;
    }
    .job-videos .flex{
        flex-wrap:wrap;
        flex-direction:row;
        gap:1.25rem;
    }
    .job-videos a{
        width:calc(33.333333% - .938rem);
    }
    .job-videos a+a{
        margin-top:0;
    }
    .pagination{
        margin-top:3.75rem;
        padding-top:3.75rem;
    }
    .animated-png01,
    .animated-png02{
        display:block;
    }
    .aside-content > .sub-content.by-people--type{
        margin-top:-.625rem;
    }
}

/*-- Animation frames --*/
.animated-png01{
    animation:moveForwardBackward 3s ease-in-out infinite;
}
@keyframes moveForwardBackward{
    0%, 100% {
        transform: translateX(20);
    }
    50% {
        transform: translatex(-40px);
    }
}
.animated-png02{
    animation:sideToSideAngle 4s ease-in-out infinite;
}
@keyframes sideToSideAngle{
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}
.animated-png02.gentle{
    animation: gentleSway 5s ease-in-out infinite;
}
@keyframes gentleSway{
    0%, 100% {
        transform: rotate(0deg);
    }
    33% {
        transform: rotate(-8deg);
    }
    66% {
        transform: rotate(8deg);
    }
}