@charset "UTF-8";

#works-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#works-top-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(1.875rem, 0.375rem + 7.5vw, 9.375rem) clamp(0.625rem, -1.125rem + 8.75vw, 9.375rem) clamp(0.625rem, 0.125rem + 2.5vw, 3.125rem);
}
#works-top-container .works-top-contents {
    width: 30%;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#works-top-container .works-top-contents img {
    width: clamp(18.75rem, 3.142rem + 18.21vw, 25rem);
    height: clamp(15rem, -0.608rem + 18.21vw, 21.25rem);
    border-radius: 10px;
    object-fit: cover;
}
#works-top-container .works-top-contents .works-top-post {
    padding-bottom: 0px;
    margin: 0 10px 0 0;
    display: flex;
    flex-direction: column;
}
#works-top-container .works-top-contents .works-top-post.hide {
    display: none;
}
#works-top-container .works-top-contents .works-top-post h2 {
    display: inline-block;
    border-top: 0;
    border-left: solid clamp(0.313rem, 0.25rem + 0.31vw, 0.625rem) var(--main-01);
    border-right: 0;
    border-bottom: solid 1px var(--main-01);
    margin-top: clamp(0.313rem, 1.56vw, 1.875rem);
    margin-bottom: clamp(0.938rem, 0.563rem + 1.88vw, 2.813rem);
    font-family: var(--font-family-02);
    font-weight: var(--font-weight-6);
    color: var(--reg-text);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    padding: 0 0 clamp(0rem, -0.063rem + 0.31vw, 0.313rem) clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem);
}
#works-top-container .works-top-contents .works-top-post h2 a {
    color: var(--reg-text);
}
#works-top-container .works-top-contents .works-top-post p {
    width: 300px;
    font-family: var(--font-family-02);
    font-weight: var(--font-weight-6);
    color: var(--reg-text);
    font-size: var(--font-size-14);
    padding-bottom: 50px;
}
#works-top-container .works-top-contents .works-top-post .works-top-btn-a a {
    font-family: var(--font-family-02);
    font-size: clamp(0.688rem, 0.625rem + 0.31vw, 1rem);
    font-weight: var(--font-weight-4);
    padding: clamp(0.438rem, 0.363rem + 0.38vw, 0.813rem) clamp(1.25rem, 1.063rem + 0.94vw, 2.188rem);
    background: var(--main-01);
    color: var(--white);
    border-radius: 5px;
    transition: var(--transition-300e);
}
#works-top-container .works-top-contents .works-top-post .works-top-btn-a {
    padding-bottom: clamp(2.188rem, 1.375rem + 4.06vw, 6.25rem);
}
#works-top-container .works-top-contents .works-top-post .works-top-btn-a a:hover {
    color: var(--main-01);
    background: var(--yellow-01);
    transition: var(--transition-300e);
}
#works-top-container .categories {
    position: sticky;
    top: 100px;
    width: clamp(11.25rem, 0.324rem + 12.75vw, 15.625rem);
}
#works-top-container .categories hr {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
#works-top-container .categories .categories-title {
    padding-bottom: 7px;
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
    border-bottom: solid 0.5px var(--reg-text);
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
#works-top-container .categories a {
    font-family: var(--font-family-02);
    font-size: clamp(0.625rem, 0.55rem + 0.38vw, 1rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
    line-height: clamp(1.875rem, 1.688rem + 0.94vw, 2.813rem);
}
#works-top-container .categories a:hover {
    color: var(--yellow-01);
}
#works-top-container .categories a.active {
    color: var(--main-01);
    background: var(--yellow-01);
    padding: 5px clamp(0.313rem, 0.225rem + 0.44vw, 0.75rem);
    border-radius: 8px;
    transition: var(--transition-300e);
}
#works-top-container .categories .categories-btn {
    font-family: var(--font-family-02);
    padding: clamp(0.438rem, 0.363rem + 0.38vw, 0.813rem) clamp(1.25rem, 1.063rem + 0.94vw, 2.188rem);
    background: var(--main-01);
    color: var(--white);
    border-radius: 5px;
    transition: var(--transition-300e);
}
#works-top-container .categories .categories-btn-a {
    margin-top: clamp(1.563rem, 1.25rem + 1.56vw, 3.125rem);
    margin-bottom: clamp(5rem, 4.563rem + 2.19vw, 7.188rem);
}
#works-top-container .categories .categories-btn-a a:hover {
    color: var(--main-01);
    background: var(--yellow-01);
    transition: var(--transition-300e);
}
.scroll-top {
    position: fixed;
    right: 35px;
    bottom: 10px;
    z-index: 2;
    opacity: 0;
    visibility: hidden; 
    transition: opacity .5s, visibility .5s;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    animation: arrow-move 1s ease-in-out infinite;
}
@keyframes arrow-move{
    0% {
        bottom:20px;
    }
    50% {
        bottom:25px;
    }
    100% {
        bottom:20px;
    }
}
.scroll-top.scroll-check {
    opacity: 1;
    visibility: visible;
}
.top-link-text01 a {
    text-decoration: none;
    color: var(--main-01);
    text-transform: uppercase;
    font-size: clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem);
    font-weight: var(--font-weight-5);
    display: block;
}.top-link-text02 a {
    text-decoration: none;
    color: var(--yellow-01);
    text-transform: uppercase;
    font-size: clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem);
    font-weight: var(--font-weight-5);
    display: block;
}
.scroll-link a::before {
    content: "";
    position: absolute;
    top: clamp(1.375rem, 1.275rem + 0.5vw, 1.875rem);
    right: -6px;
    width:  clamp(0.063rem, 0.038rem + 0.13vw, 0.188rem);
    height: 19px;
    background: var(--main-01);
    transform: skewX(-31deg);
}
.scroll-link a::after{
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    width:  clamp(0.063rem, 0.038rem + 0.13vw, 0.188rem);
    height: clamp(2.563rem, 2.45rem + 0.56vw, 3.125rem);
    background: var(--main-01);
}
_:-ms-lang(x), .scroll-link a::before{
    right: -11px;
}
.scroll-page-top a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: clamp(0.063rem, 0.038rem + 0.13vw, 0.188rem);
    height: 20px;
    background: var(--yellow-01);
    transform: skewX(31deg);
}
.scroll-page-top a::after{
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(0.063rem, 0.038rem + 0.13vw, 0.188rem);
    height: clamp(2.938rem, 2.65rem + 1.44vw, 4.375rem);
    background: var(--yellow-01);
}
_:-ms-lang(x), .scroll-page-top a::before{
    right: 0;
}