.tag-list{
    margin-top:.938rem;
}
.tag-list ul{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:.625rem;
}
.s-ttl{
    position:relative;
    z-index:2;
}
.s-ttl .deco-ttl{
    font-size:clamp(1.375rem, 1.14vi + 1.09rem,2rem);
    color:var(--white);
    line-height:1;
}
.tag-list-rounded ul li a{
    font-size:var(--fs-sm);
    min-width:6.25rem;
    padding:.625rem .938rem;
    background-color:var(--secondary-color);
    border-radius:2.5rem;
    text-align:center;
}
.main-visual{
    background:url(../img/top/sp-main-visual-pattern.png) var(--secondary-color) center / cover no-repeat;
}
.main-visual .txt-img--content{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}
.main-visual .txt-img--content .current-date{
    white-space:nowrap;
}
.main-visual .txt-img--content .xl-text{
    letter-spacing:-.015em;
}
.main-visual .txt-img--content .animated-mouse{
    width:12.188rem;
    margin-top:-3.125rem;
    margin-left:-.938rem;
}
.main-visual .txt-img--content .animated-mouse img{
    width:12.188rem;
}
.tweet-field{
    margin-top:.625rem;
}
.tweet-field dl{
    font-size:var(--fs-sm);
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:.938rem;
}
.tweet-field dt{
    font-weight:var(--font-w-semibold);
    flex-shrink:0;
    width:7.5rem;
    background-color:var(--primary-color);
    color:var(--white);
    text-align:center;
    padding:.313rem;
    white-space:nowrap;
}
.tweet-field dd{
    flex-basis:auto;
    width:100%;
}
.main-visual .content02,
.main-visual .content03,
.main-visual .content04{
    position:relative;
    margin-top:1.25rem;
    padding-top:1.25rem;
}
.main-visual .content02::before,
.main-visual .content03::before,
.main-visual .content04::before{
    content:'';
    position:absolute;
    display:block;
    width:calc(100% + 2.5rem);
    height:.063rem;
    top:0;
    left:-1.25rem;
    background-color:var(--primary-color);
}
.main-visual .h2-ttl{
    font-size:var(--fs-xl);
    position:relative;
    text-align:var(--align-center);
    letter-spacing:-.015em;
}
.main-visual .h2-ttl::after{
    content:'';
    position:absolute;
    display:block;
    width:7.5rem;
    height:.125rem;
    right:0;
    bottom:-.313rem;
    left:0;
    margin:auto;
    background-color:var(--primary-color);
}
.main-visual .btn a{
    width:13.75rem;
}
.jobs-number-field,
.company-videos-number-field{
    margin-top:.625rem;
    text-align:var(--align-center);
}
.jobs-number-field h3 .xl-text,
.company-videos-number-field h3 .xl-text{
    color:var(--orange);
}
.jobs-number-field p{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.625rem;
}
.jobs-number-field p .refresh-icon{
    width:1rem;
    line-height:0;
}
.jobs-number-field p .refresh-icon svg path{
    fill:var(--primary-color);
}
.main-visual .deco-txt{
    margin-top:1.875rem;
    text-align:var(--align-center);
}
.main-visual .deco-txt span{
    position:relative;
}
.main-visual .deco-txt span::before,
.main-visual .deco-txt span::after{
    content:'';
    position:absolute;
    display:inline-block;
    top:0;
    left:-.625rem;
    width:.063rem;
    height:1.5rem;
    background-color:var(--primary-color);
    transform:rotate(-25deg);
}
.main-visual .deco-txt span::after{
    right:-.5rem;
    left:auto;
    transform:rotate(25deg);
}
.main-visual .content03 .jobs-number-field{
    margin-top:-.625rem;
}
.main-visual .video-upload-field{
    max-width:20rem;
    width:100%;
    margin:0 auto;
}
.main-visual .content04{
    padding-bottom:13.75rem;
}
.main-visual .content04 .h2-ttl{
    color:var(--background-color);
    white-space:nowrap;
}
.main-visual .content04 .h2-ttl::after{
    content:none;
}
.main-visual .content04 p{
    margin-top:.625rem;
}
.main-visual .content04 .deco-img{
    position:absolute;
    width:16.438rem;
    height:16.875rem;
    right:0;
    bottom:-3.125rem;
    left:0;
    margin:auto;
    background:url(../img/top/demo-img01.png) center / cover no-repeat;
    z-index:2;
}
.mid-sections .scroll-text{
    padding:.625rem 0;
    border-top:.063rem solid var(--primary-color);
    border-bottom:.063rem solid var(--primary-color);
}
.mid-sections .scroll-text-opposite{
    margin-top:1.563rem;
}
.s-video--search .ttl-content{
    position:relative;
}
.s-video--search .s-ttl{
    margin-left:4.375rem;
    padding:0 .938rem .938rem;
    background-color:var(--background-color);
    border-left:.063rem solid var(--primary-color);
}
.s-video--search .s-ttl .h2-ttl{
    font-size:clamp(2rem,1.14vi + 1.72rem,2.625rem);
    line-height:1.1;
}
.s-video--search .animated-mouse--deco{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
    width:8rem;
    height:9.563rem;
    background:url(../img/top/mouse01.png) center / cover no-repeat;
    animation: mousePeekSmooth 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
}
.s-video--search .tag-list ul{
    gap:.5rem;
}
.s-video--search .job-videos{
    margin-top:clamp(1.563rem,2.84vi + .85rem,3.125rem);
}
.s-video--search .job-videos > a+a{
    margin-top:.938rem;
}
.s-video--search .job-videos .video-content{
    background-color:var(--background-color);
}
.s-video--search .job-videos dl{
    position:relative;
}
.s-video--search .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;
}
.s-video--search .job-videos dl dd{
    position:relative;
    z-index:2;
}
.s-video--search .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;
}
.s-video--search .job-videos dl dd h3{
    font-size:1.25rem;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:1;
    line-clamp:1;
    line-height:1.8;
    margin-top:.313rem;
}
.s-video--search .job-videos dl dd p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:3;
    line-clamp:3;
    line-height:1.8;
    margin-top:.313rem;
}
.s-video--search .job-videos.no-videos .flex{
    justify-content:center;
}
.s-job-info{
    border-top:.063rem solid var(--primary-color);
}
.s-job-info .animated-mouse{
    width:12.5rem;
    margin:-3.125rem -1.25rem 0 auto;
}
.s-job-info .s-ttl{
    display:flex;
    justify-content:space-between;
    margin-top:.938rem;
}
.s-job-info .s-ttl .deco-ttl{
    white-space:nowrap;
}
.s-job-info .s-ttl .h2-ttl{
    font-size:clamp(2rem,2.27vi + 1.43rem,3.25rem);
    margin-top:.313rem;
    line-height:1;
}
.s-job-info .s-ttl .jobs-number-field{
    margin-top:0;
}
.s-job-info .s-ttl .jobs-number-field h3{
    white-space:nowrap;
    margin-bottom:.313rem;
    line-height:1;
}
.s-job-info .s-ttl .jobs-number-field h3 .xl-text{
    font-size:clamp(2.625rem,2.27vi + 2.06rem,3.875rem);
}
.s-job-info .tag-list ul{
    gap:.5rem;
}
.s-job-info  .job-info{
    margin-top:1.875rem;
}
.s-job-info  .recent-jobs .flex{
    flex-direction:row;
    flex-wrap:wrap;
    gap:.938rem;
}
.s-job-info  .recent-jobs .flex a{
    width:calc(50% - .5rem);
}
.s-job-info  .recent-jobs .flex dt{
    position:relative;
}
.s-job-info  .recent-jobs .flex figure{
    height:8.125rem;
    overflow:hidden;
}
.s-job-info  .recent-jobs .flex figure img{
    height:100%;
    object-fit:cover;
    object-position:center;
}
.s-job-info  .recent-jobs .flex dt .jobs-badge{
    font-size:clamp(.75rem,.22vi + .7rem,.875rem);
    position:absolute;
    top:-.625rem;
    left:.938rem;
    background-color:var(--orange);
    color:var(--white);
    padding:.5rem .313rem;
    line-height:1;
}
.s-job-info  .job-info dd p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:3;
    line-clamp:3;
    line-height:1.8;
}
.s-job-info  .job-info .flex dd{
    font-size:var(--fs-sm);
    margin-top:.625rem;
}
.more-jobs dl dd{
    font-size:var(--fs-sm);
}
.s-cta{
    border-top:.063rem solid var(--primary-color);
}
.s-cta .s-ttl{
    margin-bottom:1.25rem;
}
.s-cta .s-ttl .h2-ttl{
    font-size:clamp(2rem,3.98vi + 1.07rem,4.25rem);
    color:var(--white);
    line-height:1.2;
}
.s-cta .s-ttl .deco-img{
    position:absolute;
    display:block;
    width:7.063rem;
    height:6.438rem;
    top:1.875rem;
    right:-1.25rem;
    background:url(../img/top/mouse02.png) center / cover no-repeat;
}
.s-jobs-colums{
    background-color:var(--secondary-color);
}
.s-jobs-colums::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:6.25rem;
    top:-1.5rem;
    right:0;
    left:0;
    background:url(../img/top/deco-pattern02.png) center / cover no-repeat;
}
.s-jobs-colums .flex > div+div{
    margin-top:1.563rem;
}
.s-jobs-colums .ttl-with--btn{
    display:flex;
    justify-content:space-between;
    margin-bottom:clamp(.938rem,1.66vi + .55rem,1.875rem);
}
.s-jobs-colums .column-list{
    display:flex;
    flex-direction:column;
}
.s-jobs-colums .column-list li{
    margin-top:.625rem;
    padding-top:.625rem;
    border-top:.063rem dashed var(--primary-color);
}
.s-jobs-colums .column-list li:first-of-type{
    margin-top:0;
}
.s-jobs-colums .column-list li:last-of-type{
    padding-bottom:.625rem;
    border-bottom:.063rem dashed var(--primary-color);
}
.s-jobs-colums .featured-jobs-list{
    display:flex;
    flex-wrap:wrap;
    gap:.625rem;
}
.s-jobs-colums .featured-jobs-list li{
    width:calc(50% - .313rem);
}
.s-jobs-colums .featured-jobs-list li a{
    position:relative;
    display:block;
}
.s-jobs-colums .featured-jobs-list figure{
    position:relative;
    height:7.5rem;
    overflow:hidden;
}
.s-jobs-colums .featured-jobs-list figure img{
    height:100%;
    object-fit:cover;
    object-position:center;
}
.s-jobs-colums .featured-jobs-list figure::after{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:var(--overlay-bg);
}
.s-jobs-colums .featured-jobs-list h3{
    font-size:var(--fs-base);
    position:absolute;
    display:flex;
    align-items:center;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    color:#fff;
    padding:.625rem;
}
.s-jobs-colums .btn{
    margin-top:0;
}
.s-jobs-colums .btn a{
    height:2.5rem;
    line-height:2.5rem;
}
.s-last .content02{
    position:relative;
    padding:clamp(1.875rem,3.41vi + 1.02rem,3.75rem) 0;
}
.s-last .content02::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:.063rem;
    top:0;
    left:0;
    background-color:var(--primary-color);
}
.s-last .swiper{
    padding-bottom:1.8765rem;
    overflow:inherit;
}
.s-last .swiper-slide{
    width:12.5rem;
}
.s-last .swiper-pagination-bullet-active{
    background-color:var(--primary-color);
}

/*-- media query 48rem --*/
@media screen and (min-width:48rem){
    .mid-sections{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        min-height:100vh;
    }
    .mid-sections > section{
        position:relative;
        width:calc(100% - 8.75rem);
        margin:0 auto;
        z-index:2;
    }
    .mid-sections .scroll-text{
        border-top:0;
        border-bottom:0;
        padding:0;
    }
    .mid-sections .scroll-text-opposite{
        margin-top:0;
    }
    .mid-sections .content-left,
    .mid-sections .content-right{
        position:absolute;
        top:0;
        width:4.375rem;
        height:100%;
        overflow:hidden;
    }
    .mid-sections .content-left{
        left:0;
        border-right:.063rem solid var(--primary-color);
    }
    .mid-sections .content-right{
        right:0;
        border-left:.063rem solid var(--primary-color);
    }
}
/*-- media query 80rem --*/
@media screen and (min-width:80rem){
    .main-visual{
        padding:2.5rem;
        background:url(../img/top/main-visual-pattern.png) var(--secondary-color) center / contain repeat;
        border-bottom:.063rem solid var(--primary-color);
    }
    .main-visual  .flex-container{
        width:calc(100% + clamp(1.25rem,1.29vi + .95rem,2.5rem));
        padding:0;
    }
    .main-visual .flex{
        flex-direction:row;
        justify-content:flex-end;
    }
    .main-visual .content01{
        max-width:37.5rem;
    }
    .main-visual .content02,
    .main-visual .content03{
        width:18.75rem;
        margin-top:0;
        padding-top:0;
    }
    .main-visual .content04{
        max-width:25rem;
        margin-top:0;
        padding-top:0;
    }
    .main-visual .content02::before,
    .main-visual .content03::before,
    .main-visual .content04::before{
        width:.063rem;
        height:calc(100% + 5rem);
        top:-2.5rem;
        left:0;
    }
    .main-visual .flex .--inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between;
        height:100%;
        padding:0 .938rem;
    }
    .main-visual .flex .content04 .--inner{
        justify-content:inherit;
    }
    .main-visual .content01 h1{
        width:100%;
    }
    .main-visual .content02 h2,
    .main-visual .content03 h2{
        font-size:2rem;
        line-height:1.1;
        white-space:nowrap;
    }
    .main-visual .content04 h2{
        line-height:1.1;
    }
    .main-visual .h2-ttl::after{
        bottom:-.625rem;
    }
    .main-visual .content01 .xl-text{
        font-size:4.375rem;
    }
    .main-visual .txt-img--content .animated-mouse{
        width:15rem;
        margin-top:-4.375rem;
        margin-right:-.938rem;
        margin-left:0;
    }
    .main-visual .txt-img--content .animated-mouse img{
        width:15rem;
    }
    .main-visual .btn{
        margin-top:1.875rem;
    }
    .s-video--search .s-ttl{
        margin-left:7.5rem;
        padding:1.875rem 0 3.125rem 1.875rem;
    }
    .s-video--search .tag-list ul{
        position:relative;
        margin-top:-2.5rem;
        margin-left:9.375rem;
        z-index:2;
    }
    .s-video--search .job-videos .flex{
        flex-direction:row;
        gap:1.25rem;
    }
    .s-video--search .job-videos a{
        width:33.333333%;
    }
    .s-video--search .job-videos a+a{
        margin-top:0;
    }
    .s-video--search .animated-mouse--deco{
        width:10rem;
        height:11.875rem;
        left:1.875rem;
    }
    .s-job-info{
        border-top:.063rem solid var(--primary-color);
    }
    .s-job-info .animated-mouse{
        position:absolute;
        width:17.5rem;
        top:-10rem;
        right:0;
        margin:0;
    }
    .s-job-info .s-ttl{
        align-items:flex-end;
        justify-content:flex-start;
        gap:3.125rem;
        margin-top:0;
    }
    .s-job-info .s-ttl .jobs-number-field{
        display:flex;
        align-items:flex-end;
        gap:1.25rem;
    }
    .s-job-info .tag-list{
        margin-top:1.875rem;
    }
    .s-job-info .job-info{
        display:flex;
        align-items:flex-start;
        gap:3.125rem;
        margin-top:3.75rem;
    }
    .s-job-info .job-info .recent-jobs{
        width:60%;
        grid-column-gap:1.25rem;
        grid-row-gap:2.5rem;
    }
    .s-job-info .recent-jobs .flex{
        gap:1.875rem;
    }
    .s-job-info .recent-jobs .flex a{
        width:calc(50% - .938rem);
    }
    .s-job-info .job-info .recent-jobs figure{
        height:12.5rem;
    }
    .more-jobs{
        width:40%;
    }
    .more-jobs dl{
        display:flex;
        align-items:center;
        gap:1.25rem;
    }
    .more-jobs a+a{
        margin-top:1.25rem;
    }
    .more-jobs dl dt{
        flex-shrink:0;
        width:10rem;
    }
    .more-jobs dl dt figure{
        height:6rem;
        overflow:hidden;
    }
    .more-jobs dl dt figure img{
        height:100%;
        object-fit:cover;
        object-position:center;
    }
    .more-jobs dl dd{
        flex-basis:auto;
        width:100%;
    }
    .s-cta{
        padding-bottom:6.25rem;
    }
    .s-cta .container{
        max-width:60rem;
    }
    .s-cta .btn-primary{
        margin-top:1.875rem;
    }
    .s-cta .btn-primary a{
        margin-left:0;
    }
    .s-cta .s-ttl .deco-img{
        width:15.625rem;
        height:14.375rem;
        right:-7.5rem;
    }
    .s-cta .s-ttl p{
        font-size:.875rem;
    }
    .s-jobs-colums::before{
        height:12.5rem;
        top:-2.5rem;
    }
    .s-jobs-colums::after{
        content:'';
        position:absolute;
        width:.06rem;
        height:calc(100% + 3.5rem);
        top:-1.25rem;
        bottom:0;
        left:50%;
        margin:auto;
        background-color:var(--primary-color);
    }
    .s-jobs-colums .flex{
        flex-direction:row;
        gap:6.25rem;
    }
    .s-jobs-colums .flex > div{
        width:50%;
    }
    .s-jobs-colums .flex > div+div{
        margin-top:0;
    }
    .s-jobs-colums .s-ttl{
        display:flex;
        flex-direction:row-reverse;
        align-items:flex-end;
        gap:.625rem;
    }
    .s-jobs-colums .featured-jobs-list li{
        width:calc(33.333333% - .438rem);
    }
    .s-last .swiper{
        padding-bottom:0;
    }
    .s-last .swiper-wrapper{
        gap:.938rem;
        justify-content:center;
    }
    .s-last .swiper-slide{
        width:calc(15% + .5rem);
    }
}
/*-- media query 110rem --*/
@media screen and (min-width:100rem){
    .main-visual .content01{
        max-width:50rem;
        padding-right:clamp(3.125rem,18.75vi + -17.5rem,5rem);
    }
}
/*-- keyframes animation --*/
@keyframes mousePeek {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(30px);
    }
    40% {
        transform: translateX(30px);
    }
    60% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes mousePeekSmooth {
    0% {
        transform: translateX(-10px) scale(0.98);
        opacity: 0.9;
    }
    25% {
        transform: translateX(35px) scale(1.02) rotate(2deg);
        opacity: 1;
    }
    35% {
        transform: translateX(40px) scale(1.05) rotate(3deg);
        opacity: 1;
    }
    45% {
        transform: translateX(35px) scale(1.02) rotate(2deg);
        opacity: 1;
    }
    70% {
        transform: translateX(-5px) scale(0.99) rotate(-1deg);
        opacity: 0.95;
    }
    100% {
        transform: translateX(-10px) scale(0.98);
        opacity: 0.9;
    }
}
/*-- 

grid-template-columns: 2fr repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;

--*/