@charset "utf-8";

/* main */
main {
    padding-top: 6%;
}

main h2 {
    font-weight: 400;
    font-size: 2.1vmax;
    margin-bottom: .3%;
}

h3 {
    font-weight: 500;
    font-size: 1.5vmax;
}


/* topimage */
.top-1 {
    width: 80%;
    height: 39vw;
    margin: 0 auto;
    background-image: url(../img/top-1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-1 h1 {
    padding-top: 36%;
    text-align: end;
}

.pc_logo {
    width: 85%;
    padding-right: 1%;
}

.mo_logo {
    display: none;
}

.top-img-wrap {
    position: relative;
    height: 45vw;
    margin-left: -5%;
    z-index: -1;
}

.works-margin {
    margin-bottom: 7%;
}


/* スクロール */
.scroll {
    position: absolute;
    bottom: 108%;
    writing-mode: vertical-rl;
}

.scroll span {
    font-size: 1.5vmin;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.scroll::before {
    animation: scroll 2.5s infinite;
    background-color: #696969;
    bottom: -115px;
    content: "";
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: .3px;
}

  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }
    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }
    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }
    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }


/* profile */
.about-wrap {
    max-width: 1100px;
    margin: 0 auto 5%;
    text-align: center;
}

.about {
    margin-top: 3%;
    margin-bottom: 3%;
}

.title p {
    font-family: "Montserrat Alternates", sans-serif;
    font-size: 1.8vmin;
    font-weight: 400;
    color: #9c9c9c;
}


/* profile moreボタン */
.more-btn {
    display:inline-block;
    width: 17%;
    text-align:center;
    outline: none;
    cursor:pointer;
    position: relative;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 2.5vmin;
    border-radius: 9999px;
    background-image: url(../img/btn_bk.jpg);
    background-size: cover;
    transition: all .3s;
    padding: 1.5% 0;
    margin: 5% 0 9%;
}

.more-btn:hover {
    box-shadow: 0px 5px 15px #bcbcbc63;
    transform: translateY(-7px);
}


.about-text {
    line-height: 2em;
}


/* works */
.suisai {
    background-image: url(../img/suisai.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 0;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
}

.works-wrap {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding-top: 1%;
}

.works_1-3 {
    width: 100%;
}

.works {
    margin-top: 9%;
    margin-bottom: 7%;
}

.works_12-wrap,
.works_34-wrap {
    display: flex;
    justify-content: space-around;
}

.center {
    text-align: center;
    margin-bottom: 10%;
}

.mock {
    width: 75%;
    display: inline-block;
	transition: all .5s ease 0s;
    position: relative;
    z-index: 1;
}

.mock:hover {
	transform: scale(1.05);
    opacity: .8;
}

.mock img{
    width: 100%;
}


.hover-mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    text-shadow: 0 0 10px #9f9f9f;
    font-size: 1.4vmax;
    opacity: 0;
    transition: opacity .4s ease;
}

.hover-mask:hover {
    opacity: 1;
}

.hover-mask p {
    width: 80%;
}

.category-wrap {
    margin-top: 2%;
}

.category-color_1 {
    color: #fff;
    margin: 2% 39%;
    background-color: rgb(212 127 166 / 70%);
}


.category-color_2 {
    color: #fff;
    margin: 2% 44%;
    background-color: rgb(49 157 220 / 56%);
}

.category {
    font-size: 1vmax;
    padding: 3% 0;
}

.gray {
    color: #9c9c9c;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.08em;
    padding-top: 2%;
}

footer {
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    main {
        padding-top: 13%;
    }

    main h2 {
        font-size: 2.5vmax;
    }

    h3 {
        font-size: 2.2vmax;
    }

    .title p {
        font-size: 3.5vmin;
    }


    /* topimage */
    .top-1 {
        width: 100%;
        height: 95.5vw;
        background-size: cover;
        background-position: 60% 0;
    }

    .top-1 h1 {
        padding-top: 54%;
        }

    .pc_logo {
        display: none;
    }

    .mo_logo {
        display: block;
        width: 100%;
    }

    .scroll {
        display: none;
    }

    .scroll::before {
        display: none;
    }


    /* about */
    .about-wrap {
        width: 100%;
        margin: 0 auto;
    }

    .about {
        margin-top: 17%;
        margin-bottom: 10%;
    }

    .about h2 {
        padding: 0;
    }

    .about-text {
        font-size: 3.7vmin;
        width: 80%;
        margin: 0 auto;
    }

    .more-btn {
        width: 54%;
        padding: 5% 0;
        font-size: 4vmin;
        margin: 12% 0 19%;
    }


    /* works */
    .works {
        margin-top: 21%;
        margin-bottom: 1%;
    }

    .works-wrap {
        width: 80%;
    }

    .works_12-wrap,
    .works_34-wrap {
        flex-direction: column;
    }

    .mock {
        width: 80%;
    }

    .mock img {
        width: 100%;
        padding: 15% 0 2%;
    }

    .category-wrap {
        margin-left: 0;
    }

    .category {
        font-size: 1.5vmax;
        padding: 2% 0;
    }

    .category-color_1 {
        margin: 2% 33%;
    }

    .category-color_2 {
        margin: 2% 41%;
    }

    .gray {
        font-size: 1.5vmax
    }

    .gray-last {
        padding-bottom: 10%;
    }
}