@charset "UTF-8";

body {
    font-family: 'Noto Sans JP', sans-serif;
}

#hamburger {
    width: 36px;
    height: 36px;
    margin-bottom: 0.6rem;
    position: relative;
}

#hamburger span {
    display: block;
    width: 34px;
    height: 4px;
    background-color: #2a1e80;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#hamburger span::before {
    display: block;
    content: "";
    width: 34px;
    height: 4px;
    background-color: #2a1e80;
    position: absolute;
    top: -24px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#hamburger span::after {
    display: block;
    content: "";
    width: 34px;
    height: 4px;
    background-color: #2a1e80;
    position: absolute;
    top: 0;
    bottom: -24px;
    left: 0;
    right: 0;
    margin: auto;
}

#hamburger.clickon span {
    animation: hamburger-middle 0.8s forwards;
}

#hamburger.clickon span::before {
    animation: hamburger-top 0.8s forwards;
}

#hamburger.clickon span::after {
    animation: hamburger-bottom 0.8s forwards;
}

#hamburger.clickoff span {
    animation: hamburger-middle-r 0.8s forwards;
}

#hamburger.clickoff span::before {
    animation: hamburger-top-r 0.8s forwards;
}

#hamburger.clickoff span::after {
    animation: hamburger-bottom-r 0.8s forwards;
}

@keyframes hamburger-middle {
    0% {top: 0; transform: rotate(0);}
    50% {top: 0; transform: rotate(0);}
    100% {top: 0; transform: rotate(45deg);}
}
@keyframes hamburger-top {
    0% {top: -24px; transform: rotate(0);}
    50% {top: 0; transform: rotate(0);}
    100% {top: 0; transform: rotate(0);}
}
@keyframes hamburger-bottom {
    0% {bottom: -24px; transform: rotate(0);}
    50% {bottom: 0; transform: rotate(0);}
    100% {bottom: 0; transform: rotate(-90deg);}
}
@keyframes hamburger-middle-r {
    0% {top: 0; transform: rotate(45deg);}
    50% {top: 0; transform: rotate(0);}
    100% {top: 0; transform: rotate(0);}
}
@keyframes hamburger-top-r {
    0% {top: 0; transform: rotate(0);}
    50% {top: 0; transform: rotate(0);}
    100% {top: -24px; transform: rotate(0);}
}
@keyframes hamburger-bottom-r {
    0% {bottom: 0; transform: rotate(-90deg);}
    50% {bottom: 0; transform: rotate(0);}
    100% {bottom: -24px; transform: rotate(0);}
}

header {
    z-index: 1000;
}

.nav-link {
    color: #000;
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
}

.main {
    width: 100%;
    background: url(/assets/images/top/SP_bg_one.png) center top / contain no-repeat;
}

.first-view {
    width: 100%;
    height: 75vh;
}

.catch-copy {
    position: absolute;
    top: 32%;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
}

.catch-copy p:nth-of-type(1) {
    font-size: 1.0rem;
}

.catch-copy p:nth-of-type(2) {
    font-size: 0.6rem;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
}

.top-pageh2 {
    font-family: 'Teko', sans-serif;
    font-size: 3rem;
    letter-spacing: 0.3rem;
}

.company-section {
    margin-top: 0;
    top: 0;
    color: #fff;
}

.company-section p, .recruit-section p {
    font-size: 0.8rem;
}

.works-list li {
    border-bottom: 1px solid #000;
}

.works-list1 li:first-of-type {
    border-top: 1px solid #000;
}

.works-list small {
    position: relative;
    top: -0.6rem;
    left: 3rem;
    font-size: x-small;
    color: #e84294;
}

.recruit-section {
  height: 62rem;
  background: url(/assets/images/top/SP_background_two.png) center bottom / contain no-repeat;
}

.more-btn {
    width: 100%;
    display: block;
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.3rem;
    text-align: center;
    color: #000;
    border: 1px solid #000;
}

.footer-image {
    position: relative;
    bottom: -1.6rem;
    z-index: -2;
}


@media screen and (min-width: 768px) {
    .main {
        background: url(/assets/images/top/PC_bg_one.png) top center / cover no-repeat;
    }

    .first-view {
        height: 170vh;
    }

    .catch-copy {
        top: 24%;
    }

    .catch-copy p:nth-of-type(1) {
        font-size: 1.4rem;
    }

    .catch-copy p:nth-of-type(2) {
        font-size: 1.0rem;
    }

    h1 {
        font-size: 8rem;
    }

    .top-pageh2 {
        font-family: 'Teko', sans-serif;
        font-size: 6rem;
        letter-spacing: 0.3rem;
    }

    .first-view {
        top: 14rem;
    }

    .works-list2 li:first-of-type {
        border-top: 1px solid #000;
    }

    .scroll-sign {
        position: fixed;
        right: 10vw;
        top: 80vh;
        transform: rotate(90deg);
        transform-origin: bottom right;
    }

    .scroll-line::after {
        content: "";
        position: fixed;
        top: 81vh;
        right: 9.2vw;
        width: 1px;
        height: 120px;
        background: #eee;
        animation: pathmove 1.4s ease-in-out infinite;
        opacity:0;
        
        }

    @keyframes pathmove{
        0%{
            height:0;
            top:84vh;
            opacity: 0;
        }
        30%{
            height:50px;
            opacity: 1;
        }
        100%{
            height:0;
            top:95vh;
            opacity: 0;
        }
    }

    .company-section {
      top: 0;
    }

    .company-section p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .works {
        top: 14vw;
    }

    .works-title-col {
        text-align: right;
    }

    .works-title {
        display: inline-block;
        transform: rotate(90deg);
        transform-origin: center center;
        color: #fff;
    }

    .works-image {
        top: 16rem;
    }

    .recruit-section {
        height: 165vh;
        top: 18rem;
        background: url(/assets/images/top/PC_bg_two.png) top center / contain no-repeat;
    }

    .recruit-title {
        display: inline-block;
        transform: rotate(90deg);
        transform-origin: center center;
        top: 5vw;
        right: 32vw;
    }

    .recruit-section .more-btn {
        color: #fff;
    }

    .contact {
        min-height: 37vw;
    }

    .more-btn {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -50%);
        width: auto;
    }

    .more-btn.left {
        left: 0;
        right: auto;
        transform: translate(-50%, -50%);
    }

    .recruit-section .more-btn {
      border: 1px solid #fff;
    }
}