@charset "utf-8";

/* *************************

    リセットCSS

*************************** */

:root {
    /* color */
    --black: #333;
    --beige: #ead5aa;
    --red: #ed514e;

    /* fontfamily */
    --heading: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
    --jp: "IBM Plex Sans JP", sans-serif;
    --en: "Averia Serif Libre", serif;

    /* ハンバーガーメニューで使用 */
    --opacity: 0;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    color: var(--black);
    font-family: var(--en);
    scroll-behavior: smooth;
}

p {
    color: var(--black);
    font-family: var(--jp);
}

p:not(:last-of-type) {
    margin-bottom: .5rem;
}

a {
    color: var(--black);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

ul {
    list-style: none;
}

.wrapper {
    max-width: 1300px;
    padding-inline: 1rem;
    margin-inline: auto;
}

.flex {
    display: flex;
    justify-content: space-between;
}

.sp {
    display: none;
}

body {
    background-color: var(--beige);
}

body::before {
    /* OPアニメーション用。
        メインビジュアル出現アクション */
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: calc(100dvh - 5.5rem);
    background-color: var(--beige);
    top: 5.5rem;
    left: 0;
    z-index: 5000;
    animation: op_ani_mvarea .5s ease 3.9s forwards;
}

body::after {
    /* ページロード時ブラインド用 */
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    height: 100dvh;
    background-color: var(--beige);
    opacity: 1;
    pointer-events: none;
    z-index: 4000;
    animation: loading 1.6s ease forwards;
}

@keyframes loading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/**** オープニングアニメーション ****/

/* メインビジュアル出現 */
/* body::before に付与 */
@keyframes op_ani_mvarea {
    from {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* オープニングアニメーション h1頭文字 */
/* header>.title_container>h1>.heading_deg に付与 */
@keyframes op_ani_heading_deg {
    0% {
        font-size: 25rem;
        filter: blur(5rem);
        opacity: 0;
        line-height: calc(100dvh - 3rem);
    }

    15% {
        opacity: 1;
        filter: blur(0);
        line-height: calc(100dvh - 3rem);
    }

    40% {
        opacity: 1;
        font-size: 25rem;
        line-height: calc(100dvh - 3rem);
    }

    60% {
        font-size: 3rem;
        filter: blur(0);
        line-height: calc(100dvh - 100dvh);
    }

    65% {
        transform: rotate(0);
    }

    95% {
        transform: rotate(-20deg);
        opacity: 1;
    }

    100% {
        transform: rotate(-20deg);
        opacity: 1;
        line-height: calc(100dvh - 100dvh);
    }
}

/* オープニングアニメーション h1全体 */
/* header>.title_container>h1>.op_ani_heading に付与 */
@keyframes op_ani_heading {
    from {
        width: 0px;
    }

    to {
        /* width: 20rem; */
        width: 90%;
    }
}

/* オープンニングアニメーション h1_border-bottom */
@keyframes op_ani_heading_border {
    from {
        transform: scaleX(0);
        transform-origin: right;
    }

    to {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* オープニングアニメーション ヒーローイメージ フルカラー→セピア*/
/* .mainvisual>.mainvisual_img に付与 */
@keyframes op_ani_mv_img {
    from {
        filter: sepia(0);
    }

    to {
        filter: sepia(.6);
    }
}


/* オープニングアニメーション ヒーローイメージ上テキスト出現 */
/* .mainvisual>p に付与 */
@keyframes op_ani_mv_text {
    0% {
        transform: translateY(5.5rem) rotate(20deg);
    }

    /* 20% {
        transform: translateY(0) rotate(15deg);
    } */

    100% {
        transform: translateY(0) rotate(0);
    }
}

/**** /オープニングアニメーション ****/


/**** js使用 ****/
.blur_hide {
    opacity: 0;
    filter: blur(1rem);
    transform: translateX(3rem);
    transition: filter 1s ease, transform 1s ease;
}

.blur_hide_p {
    opacity: 0;
    filter: blur(1rem);
    transition: 1s ease;
}

.blue_appear {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.scroll_img {
    transition: all 1.5s ease;
}

.sepia {
    filter: sepia(1);
}

/**** /js使用 ****/

/**** スクロールバー ****/

::-webkit-scrollbar {
    scrollbar-width: thin;
    background-color: var(--black);
}

::-webkit-scrollbar-thumb {
    border: 1px solid var(--black);
    border-radius: 5px;
    background-color: var(--beige);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--red);
}

/**** /スクロールバー ****/

/* *************************

    ヘッダー

*************************** */


header {
    max-width: 1400px;
    margin-inline: auto;

    .title_container {
        position: relative;
        padding: 1.5rem 0 1rem;
        margin: 0 1rem 1rem;
        text-align: center;
        z-index: 5000;

        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            border-bottom: 3px solid var(--black);
            transform: scaleX(0);
            animation: op_ani_heading_border .2s ease 3.6s forwards;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            height: calc(100% + 5px);
            border-bottom: 1px solid var(--black);
            transform: scaleX(0);
            animation: op_ani_heading_border .2s ease 3.4s forwards;
        }

        h1 {
            font-size: 3rem;
            width: fit-content;
            height: 3rem;
            margin-inline: auto;
            color: var(--black);

            .heading_deg {
                display: inline-block;
                margin-right: .3rem;
                opacity: 0;
                line-height: calc(100dvh - 3rem);
                animation: op_ani_heading_deg 2.5s ease-in-out .3s forwards;
            }

            /* OPアニメーション用 */
            /* h1テキスト出現 */
            .op_ani_heading {
                display: inline-block;
                width: 0;
                overflow-x: hidden;
                vertical-align: bottom;
                animation: op_ani_heading .3s ease-in-out 2.9s forwards;
            }
        }
    }
}


/* *************************
グローバルナビゲーション
*************************** */
.main_flex {
    flex-direction: row-reverse;
    padding: 1rem;
}

.global_navigation {
    position: sticky;
    top: 1rem;
    width: 7.5rem;
    height: calc(100dvh - 2rem);
    padding: 2.5rem 0 0 1rem;
    border-left: 1px solid var(--black);
    text-align: left;

    >ul>li {

        /* グローバルメニューアコーディオン */
        /* 開閉ボタン */
        .gn_accordion_btn {
            position: relative;
            width: 1.5rem;
            height: 1.5rem;
            margin: .5rem 0 0 .5rem;
            background-color: var(--beige);
            border: 1px solid var(--black);
            cursor: pointer;

            .gna_btn_before,
            .gna_btn_after {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 1rem;
                height: 1px;
                background-color: var(--black);
                transition: .3s ease;
            }

            .gna_btn_before {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            .gna_btn_after {
                transform: translate(-50%, -50%) rotate(90deg);
            }

            .gna_btn_before_active {
                transform: translate(-50%, -50%) rotate(-135deg);
            }

            .gna_btn_after_active {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }

        /* アコーディオンメニュー */
        .gn_accordion {
            display: grid;
            grid-template-rows: 0fr;
            filter: blur(1rem);
            transition: grid-template-rows .3s ease, margin-top .3s ease, filter 1s ease;

            ul {
                padding-right: 4rem;
                margin-left: 1rem;
                text-align: left;
                overflow-y: hidden;
            }
        }

        .gn_accordion_active {
            grid-template-rows: 1fr;
            margin-top: 1rem;
            filter: blur(0);
        }
    }

    li+li {
        margin-top: 1rem;
    }

    a {
        display: inline-block;
        position: relative;
        padding-block: 1rem;
        color: var(--beige);
        border-bottom: 1px solid var(--black);
        line-height: 0;
        overflow: hidden;

        &::before,
        &::after {
            content: "ABOUT";
            position: absolute;
            inset-inline: 0;
            color: var(--black);
            transition-duration: .3s;
        }

        &::before {
            top: 50%;
            color: var(--black);
            transform: translatey(-50%);
        }

        &::after {
            top: 100%;
            opacity: 0;
            filter: blur(.3rem);
        }
    }
}

@media(any-hover: hover) {
    .global_navigation a {
        &:hover {
            border-bottom: 1px solid var(--red);
        }

        &:hover::before {
            top: -100%;
            transform: translate(0);
            opacity: 0;
            filter: blur(.3rem);
        }

        &:hover::after {
            top: 50%;
            transform: translatey(-50%);
            opacity: 1;
            filter: blur(0);
        }
    }
}

nav ul li {

    .nav_top::before,
    .nav_top::after {
        content: 'TOP';
    }

    .nav_works::before,
    .nav_works::after {
        content: 'WORKS';
    }

    .nav_tool::before,
    .nav_tool::after {
        content: 'Tool';
    }

    .nav_website::before,
    .nav_website::after {
        content: 'Website';
    }

    .nav_banner::before,
    .nav_banner::after {
        content: 'Banner';
    }

    .nav_logo::before,
    .nav_logo::after {
        content: 'Logo';
    }

    .nav_other::before,
    .nav_other::after {
        content: 'Other';
    }

    .nav_skill::before,
    .nav_skill::after {
        content: 'SKILL';
    }

    .nav_code::before,
    .nav_code::after {
        content: 'Code';
    }

    .nav_picture::before,
    .nav_picture::after {
        content: 'Picture';
    }

    .nav_philosophy::before,
    .nav_philosophy::after {
        content: 'PHIROSOPHY';
    }
}

/* *************************
    メインコンテンツcommon
*************************** */

.main_contents {
    width: calc(100% - 8.5rem);
}

.h2_border {
    position: sticky;
    top: 0;
    background-color: var(--beige);
    z-index: 10;

    &::before,
    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    &::before {
        height: calc(100% - 1rem);
        border-bottom: 1px solid var(--black);
    }

    &::after {
        height: calc(100% - .7rem);
        border-bottom: 3px solid var(--black);
    }
}

h2 {
    width: 100%;
    font-size: 2.5rem;
    padding-bottom: 1rem;
    margin-top: 5rem;
}

.content_space_decorate {
    outline: 5px solid #333;
    outline-offset: -5px;
    background-image: repeating-linear-gradient(135deg, rgb(243, 243, 231) 10px, rgb(243, 243, 231) 20px, rgb(255, 255, 233) 20px 30px);
}


.section_container {
    margin-top: 1rem;
    margin-bottom: 5rem;

    aside {
        width: 5rem;
        border-right: 1px solid var(--black);

        nav {
            position: sticky;
            top: 6rem;
            padding-top: 1rem;

            a {
                display: inline-block;
                position: relative;
                padding-block: 1rem;
                color: var(--beige);
                border-bottom: 1px solid var(--black);
                line-height: 0;
                overflow: hidden;

                &::before,
                &::after {
                    position: absolute;
                    inset-inline: 0;
                    color: var(--black);
                    transition-duration: .3s;
                }

                &::before {
                    top: 50%;
                    color: var(--black);
                    transform: translatey(-50%);
                }

                &::after {
                    top: 100%;
                    opacity: 0;
                    filter: blur(.3rem);
                }
            }
        }

        li+li {
            margin-top: 1rem;
        }

    }

    .section_contents {
        width: calc(100% - 6rem);

        .container_scroll_position {
            padding-top: 5rem;
            margin-top: -5rem;
        }

        .h3_border {
            position: sticky;
            top: 4rem;
            background-color: var(--beige);
            z-index: 9;

            &::after {
                content: '';
                display: block;
                position: absolute;
                inset: 0;
                height: calc(100% - .5rem);
                border-bottom: 1px solid var(--black);
                z-index: -1;
            }
        }

        h3 {
            font-size: 2rem;
            padding-block: .5rem;
        }

        .content_flex {
            flex-wrap: wrap;
            margin: 1rem 0 5rem;

            .content {
                position: relative;
                width: 48%;
                padding: 1rem;
                margin-bottom: 2rem;

                img {
                    width: 100%;
                    height: auto;
                }

                /* p:last-of-type {
                    margin-bottom: 4rem;
                } */

                .more_btn {
                    display: block;
                    position: absolute;
                    bottom: 1rem;
                    left: 50%;
                    transform: translateX(-50%);
                    width: fit-content;
                    padding: .5rem 1rem;
                    color: var(--beige);
                    background-color: var(--black);
                    outline: 2px dashed var(--black);
                    outline-offset: -2px;
                    transition: .3s;

                    &:hover {
                        outline: 2px dashed var(--red);
                        outline-offset: -5px;
                        color: #eee;
                        background-color: #222;
                    }
                }
            }
        }
    }
}

@media(any-hover: hover) {
    .section_container aside nav a {
        &:hover {
            border-bottom: 1px solid var(--red);
        }

        &:hover::before {
            top: -100%;
            transform: translate(0);
            opacity: 0;
            filter: blur(.3rem);
        }

        &:hover::after {
            top: 50%;
            transform: translatey(-50%);
            opacity: 1;
            filter: blur(0);
        }
    }
}



.content_wide {
    width: 100%;
    padding: 1.5rem;

    .flex {
        justify-content: center;
        gap: 4rem;
        margin-bottom: 2rem;

        img {
            width: 20%;
        }
    }
}

.pick {
    cursor: pointer;
}

/* ***********************************
    モーダルウィンドウ関係
*********************************** */

/* ↓ 作品hover時アクション */
@keyframes hover_out {
    0% {
        transform: translatex(0%);
    }

    100% {
        transform: translateX(-120%);
    }
}

.open_modal {
    transition: filter .3s ease;
}

@media(any-hover: hover) {
    .open_modal:hover {
        filter: blur(.3rem);
    }

    .open_modal:hover+.img_hover::before {
        opacity: .8;
    }

    .open_modal:hover+.img_hover::after {
        transform: translateX(0%);
        animation: none;
    }
}

.img_hover_area {
    position: relative;
    height: auto;
    margin-bottom: 1rem;
    overflow: hidden;

    /* hoverアクションエリア角度調整 */
    .img_hover {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        text-align: center;
        vertical-align: bottom;
        transform: rotate(-10deg);
        transition: .3s ease;
        pointer-events: none;

        /* 暗転 */
        &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -10%;
            width: 120%;
            height: 100%;
            background-color: #000;
            opacity: 0;
            transition: .3s ease;
        }

        /* テキストスライド */
        &::after {
            content: "View";
            font-size: 4rem;
            color: white;
            width: 100%;
            padding-block: 2rem;
            border-top: 3px solid var(--red);
            border-bottom: 3px solid var(--red);
            transform: translateX(120%);
            transition: .4s ease .1s;
            animation: hover_out .4s ease;
        }
    }
}

/* ↑ 作品hover時アクション */

#modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    height: 100dvh;
    /* background-color: rgba(17, 17, 17, .7); */
    background-color: rgb(244, 233, 210, .95);
    opacity: 0;
    z-index: 99999;
}

#pickup {
    width: 33%;
}

/* *************************
    メインビジュアル
*************************** */



.mainvisual {
    position: relative;
    width: 100%;
    height: calc(95dvh - 7.5rem);
    overflow: hidden;

    .mainvisual_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: op_ani_mv_img 1s ease 4.3s forwards;
    }

    p {
        font-family: var(--heading);
        font-size: 4.5rem;
        font-weight: bold;
        position: absolute;
        bottom: 1rem;
        left: 1.5rem;
        color: var(--beige);
        line-height: 1;
        text-shadow: 5px 5px 0 var(--red);
        transform: translatex(3%);

        .text_piece {
            display: inline-block;
            transform: translateY(5.5rem);
            /* animation-delayはjsで指定してるが、うまくい読み込めなかった時用に4.3sを指定 */
            animation: op_ani_mv_text .7s ease 4.3s forwards;
        }
    }
}

/* *************************
    about
*************************** */

#about {
    .flex {
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        padding-block: 10rem 15rem;
        margin-top: 1rem;
        margin-bottom: 5rem;
        background-color: var(--black);

        .auther_img {
            width: 30%;
            aspect-ratio: 1/1;
        }

        .auther_message {
            width: 55%;

            h3 {
                padding-bottom: .5rem;
                margin-bottom: 1rem;
                color: var(--beige);
                font-size: 1.5rem;
                font-family: var(--heading);
                border-bottom: 1px solid var(--beige);
            }

            p {
                margin-bottom: .7rem;
                color: var(--beige);
            }
        }
    }
}

/* *************************
    works
*************************** */

#works_tool,
#works_website {
    .content {
        padding-bottom: 5rem;

        .website_img {
            position: relative;

            .used_skill {
                justify-content: flex-end;
                position: absolute;
                bottom: 1rem;

                img {
                    width: 15%;
                    opacity: 0;

                    &+img {
                        margin-left: .5rem;
                    }
                }
            }
        }
    }
}

#works_logo {
    .content_wide+.content_wide {
        margin-top: 2rem;
    }

    .content_wide .flex .img_hover_area {
        width: 20%;
        padding: .3rem;

        img {
            width: 100%;
        }

        .img_hover {
            &::before {
                display: none;
            }

            &::after {
                text-shadow: 1px 1px 10px var(--black), -1px 1px 10px var(--black), 1px -1px 10px var(--black), -1px -1px 10px var(--black);
            }
        }
    }
}

#works_other {
    .content_wide .flex img {
        width: 100%;
    }
}

/* *************************
    skill
*************************** */

#skill_code {
    .content_wide .flex {
        flex-wrap: wrap;
        row-gap: 1rem;
        column-gap: 3rem;

        img {
            width: 20%;
        }

        .skill_code_adjuster {
            width: 10%;
        }

        .skill_code_spacer {
            width: 100%;
        }
    }
}

#skill_other {
    .content_wide .flex {
        margin-bottom: 0;
        padding: 4rem 0;
        align-items: center;
    }
}

/* *************************
    phirosophy
*************************** */

#philosophy .h2_border {
    margin-bottom: 4rem;
}

.philosophy_text {
    margin-bottom: 4rem;
    padding: 4rem 6%;
    background-color: var(--black);

    p {
        color: var(--beige);

        &:not(:last-of-type) {
            margin-bottom: .7rem;
        }
    }
}


/* *************************

    フッター

*************************** */

footer {
    padding-block: .5rem;
    text-align: center;
    background-color: var(--black);

    p {
        color: var(--beige);
    }
}



/* *************************
 *************************
 *************************

    SP

*************************** 
*************************** 
*************************** */


@media screen and (max-width : 767px) {

    .sp {
        display: block;
    }

    /* ハンバーガーメニューにh2が被らないように */
    h2 {
        padding-top: 1rem;
    }

    /* ハンバーガーメニューにh2が被らないようにした処理の延長 */
    .section_container .section_contents .h3_border {
        top: 5rem;
    }

    p {
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    footer p {
        margin-bottom: 0;
    }

    .content_wide .flex {
        gap: 2rem;
    }

    .section_container .section_contents .content_flex .content {
        padding: 1rem .5rem;
    }

    .content_wide {
        padding: 1.5rem .5rem;
    }

    #pickup {
        width: 90vw;
    }

    .pick {
        cursor: auto;
    }

    /**************************************

    ハンバーガーメニュー

**************************************/

    /* ****************
        展開前
    ***************** */

    .main_flex {
        display: block;
    }


    .global_navigation {
        position: fixed;
        top: 6rem;
        opacity: 0;
        pointer-events: none;
        transition: .3s;
        z-index: 9999;

        &::before {
            content: '';
            display: block;
            position: fixed;
            inset: 0;
            height: 100dvh;
            background-color: var(--beige);
        }

        .gn_title_container {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: calc(100% - 2rem);
            padding-block: 1.5rem 1rem;
            margin: 0 1rem;
            border-bottom: 3px solid var(--black);
            text-align: center;

            &::after {
                content: '';
                display: block;
                position: absolute;
                inset: 0;
                height: calc(100% + 5px);
                border-bottom: 1px solid var(--black);
            }

            p {
                font-size: 2rem;
                font-weight: bold;
                font-family: var(--en);
            }

        }

        .ham_item {
            opacity: 0;
        }
    }

    /* *********
        ボタン
    ********* */
    .ham_btn {
        display: block;
        position: fixed;
        top: 1.8rem;
        right: 1.5rem;
        width: 2rem;
        height: 1.7rem;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        z-index: 99999;

        span {
            position: absolute;
            inset: 0;
            height: 2px;
            background-color: var(--black);
            transition: .3s;
        }

        &::before,
        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 2rem;
            height: 2px;
            background-color: var(--black);
            transition: .3s;
        }

        &::before {
            inset-block: 0;
            margin: auto;
        }

        &::after {
            bottom: 0;
        }
    }

    /* ****************
        展開後
    ***************** */

    .gn_active {
        opacity: 1;
        pointer-events: all;
    }

    /* *********
        ボタン
    ********* */

    .ham_btn_active {
        span {
            bottom: 0;
            margin: auto;
            transform: rotate(-45deg);
        }

        &::before {
            opacity: 0;
        }

        &::after {
            top: 0;
            margin: auto;
            transform: rotate(45deg);
        }
    }

    /* *************************
    ヘッダー
*************************** */

    header .title_container h1 {
        font-size: 2rem;
    }


    /* *************************
    メインコンテンツcommon
*************************** */
    .main_contents {
        width: 100%;
    }

    .section_container .section_contents {
        width: calc(100% - 4.5rem);

        .content_flex {
            flex-direction: column;


            .content {
                width: 100%;
            }

        }
    }

    .section_container aside {
        width: 4rem;

        nav {
            top: 5.4rem;
        }
    }

    /* *************************
    メインビジュアル
*************************** */
    .mainvisual {
        max-height: calc(95dvh - 7.5rem);

        .mainvisual_img {
            aspect-ratio: 1/1;
        }

        p {
            bottom: -2.7rem;
            left: -.7rem;
            font-size: 4.4rem;
            line-height: 6rem;
            transform: translatex(0);
        }
    }

    /* *************************
    about
*************************** */
    #about .flex {
        flex-direction: column;
        padding-block: 5rem;

        .auther_img {
            width: 60%;
            margin-bottom: 1rem;
        }

        .auther_message {
            width: 90%;
        }
    }

    /* *************************
    works
*************************** */

    #works_website .content a img {
        margin-bottom: 1rem;
    }

    #works_logo {
        .content_wide .flex {
            gap: 0;
            flex-wrap: wrap;

            &::after {
                content: '';
                display: block;
                width: 50%;
                height: auto;
            }

            .img_hover_area {
                width: 50%;
            }
        }
    }

    #works_other {
        .content_wide .flex {
            gap: .5rem;
            flex-wrap: wrap;
        }
    }


    /* *************************
        skill
    *************************** */

    #skill_code {
        .content_wide .flex {
            .skill_code_adjuster {
                width: 0%;
            }
        }
    }

    #skill_other {
        .content_wide .flex {
            padding: 2rem 0;
            gap: 2.5rem;
            flex-wrap: wrap;
        }
    }

    /* *************************
        
    *************************** */

    .philosophy_text {
        padding: 4rem .5rem;
    }

}