@charset "utf-8";

/* サイドバー */

#sidebar {
    position: fixed;
    top: 293px;
    left: 5%;
    width: 183px;
    z-index: 8;
    filter: invert(100%);
    mix-blend-mode: exclusion;
}

aside {
    top: 50%;
    left: 32px;
    color: #000;
}

.sns_icon {
    width: 32px;
    padding-bottom: 64px;
    /* cursor: pointer; */
}

#instagram_icon img {
    padding-bottom: 48px;
}
#twitter.icon {
    padding-bottom: 64px;
}

.scroll-text {
    position: fixed;
    transform: translateY(-50%);
    font-size: 16px;
    padding-left: 6px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 矢印 */
.scroll-text {
    position: relative;
}

.scroll-text::before {
    content: "";
    position: absolute;
    top: 107px;
    bottom: -50px;
    right: 3px;
    /*矢印の形状*/
    width: 1px;
    height: 13px;
    background: #333;
    transform: skewX(-40deg);
}

.scroll-text::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 70px;
    right: 9px;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #333;
}

/* WorksのFV */
.works_fv {
    height: 515px;
    background: #f8fcf9;
    position: relative;
}

.works_title {
    max-width: 143px;
    margin: 0 auto;
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.works_blob img {
    width: 61%;
    padding-left: 30px;
    padding-bottom: 27px;
}

.works_text {
    font-size: 50px;
    position: absolute;
    text-align: center;
    margin-top: 24px;
}

/* 制作実績のカテゴリ */

.gradient_wrap {
    padding-top: 136px;
    /* 背景グラデーション */
    background: rgb(255, 255, 255);
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(186, 224, 195, 1) 100%
    );
}

.works_category {
    display: flex;
    justify-content: space-between;
    padding: 0 13%;
    box-sizing: border-box;
}

.category_grid {
    width: 60%;
}

.logo_wrap,
.card_wrap,
.sticker_wrap,
.banner_wrap,
.lp_wrap,
.corporate_wrap,
.portfolio_wrap {
    margin-bottom: 40px;
}

.category_list {
    padding-right: 30px;
    position: sticky;
    top: 100px;
    padding-bottom: 70px;
}

.sp_category_list {
    display: none;
}

.category_list ul li {
    width: 215px;
    font-size: 20px;
    line-height: 2.4;
}

/* カテゴリータイトル */
.category_logo,
.category_card,
.category_sticker,
.category_banner,
.category_lp,
.category_corporate,
.category_portfolio {
    margin-left: auto;
    margin-bottom: -6%;
    position: relative;
}

.category_logo,
.category_card {
    width: 25%;
}

.category_sticker {
    width: 35%;
}

.category_banner {
    width: 37%;
}

.category_lp {
    width: 68%;
}

.category_corporate {
    width: 98%;
}

.category_portfolio {
    width: 90%;
}

.category_heading {
    position: sticky;
    top: 30px;
}

/* カテゴリタイトル終了 */

.category_item {
    max-width: 100%;
    padding-bottom: 70px;
}

.category_item p {
    padding-top: 35px;
}

/* ページトップ */

.pagetop {
    position: fixed;
    bottom: 140px;
    right: 5%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    filter: invert(100%);
    mix-blend-mode: exclusion;
}

.pagetop::before {
    content: "";
    position: absolute;
    top: 145px;
    bottom: -50px;
    right: 3px;
    /*矢印の形状*/
    width: 1px;
    height: 13px;
    background: #333;
    transform: skewX(-40deg);
}

.pagetop::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 107px;
    right: 9px;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #333;
}

/* SP版 */
@media screen and (max-width: 767px) {
    /* WorksのFV */
    .works_fv {
        height: 482px;
    }

    .works_title {
        top: 26%;
    }

    /* サイドバー */
    #sidebar {
        top: 427px;
        left: 5%;
    }

    /* 制作実績のカテゴリ */
    .works_category {
        display: block;
        padding-bottom: 30px;
    }

    .category_grid {
        width: 100%;
    }

    .pc_category_list {
        display: none;
    }

    .sp_category_list {
        display: block;
        position: absolute;
        right: 13%;
        bottom: 25px;
    }
    .category_list {
        position: relative;
        top: auto;
        padding: 0%;
    }

    .category_list ul {
        text-align: right;
    }

    .category_list ul li {
        width: auto;
        font-size: 11px;
        padding-bottom: 19px;
    }

    /* カテゴリータイトル */

    .category_logo,
    .category_card {
        width: 24%;
    }

    .category_sticker {
        width: 33%;
    }

    .category_banner {
        width: 35%;
    }

    .category_lp {
        width: 65%;
    }

    .category_corporate {
        width: 93%;
    }

    .category_portfolio {
        width: 85%;
    }
    /* カテゴリタイトル終了 */

    .category_item {
        padding-bottom: 72px;
    }

    .category_item p {
        padding-top: 7px;
    }

    /* ページトップsp版 */
    .pagetop {
        right: 27px;
        bottom: 110px;
        z-index: 9;
        /*デフォルトで非表示にする*/
        opacity: 0;
        visibility: hidden;
    }

    /*このクラスが付与されると表示する*/
    .active {
        opacity: 1;
        visibility: visible;
        transition: 0.8s;
    }
}