@charset "UTF-8";


/* ================
main
============ */


.article__header {
    position: relative;
}

h1 {
    position: absolute;
    top: 60px;
    left: 20px;
    color: #FFF6F6;
    font-family: Castoro;
    font-size: 9.3vw;
    font-weight: 400;
}

.shinra {
    margin-top: -10px;
}

.portfolio__header {
    margin-top: -10px;
}

.main__photo__pc {
    display: none;
}

.main__photo__sp {
    width: 100%;
    height: auto;
}

.catchCopy {
    background-color: #FFF;
    width: 70vw;
    height: auto;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 62px;
    right: 10px;
}


.catch__copy__pc {
    width: 33vw;
    height: auto;
}

.catchCopy__txt01 {
    color: #000;
    font-size: 6vw;
    font-weight: 400;
}

.catchCopy__txt02 {
    color: #000;
    font-size: 6vw;
    font-weight: 400;
}

/* main pc */

@media screen and (min-width:769px) {
    .main__photo__sp {
        display: none;
    }

    .main__photo__pc {
        display: block;
        width: 50vw;
        margin-left: auto;
    }

    h1 {
        top: 120px;
        left: 15vw;
    }

    .shinra {
        margin-top: -3.5vw;
    }

    .portfolio__header {
        margin-top: -3.5vw;
    }

    .catchCopy {
        width: 52vw;
        bottom: -37px;
        left: 18.7vw;
        padding-bottom: 10px;
        padding-left: 2vw;
    }

    .catchCopy__txt01 {
        font-size: 3.4vw;
    }

    .catchCopy__txt02 {
        font-size: 4.5vw;
    }

    .catch__copy__pc {
        width: 26vw;
        margin-top: -20px;
    }
}


/* portfolio */
.portfolio {
    width: 100vw;
    height: auto;
    overflow: hidden;

}

.portfolio__flow {
    color: var(--portfolio, #E5FF88);
    font-family: Castoro;
    font-size: 4rem;
    font-weight: 400;
    /* display: flex;
    flex-wrap: nowrap; */
    display: flex;
    width: 526px;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    animation: flowText 20s linear infinite;
    white-space: nowrap;
    /* テキストを改行させない */
    margin-top: 36px;
}

@keyframes flowText {
    0% {
        transform: translateX(0%);
    }

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

.harapeko__portfolio {
    width: 100%;
    display: block;
    padding: 0 15.7%;
    margin-top: 44px;
    /* position: relative; */
}

.image-container {
    position: relative;
    /* width: 100%; */
    /* 画像の幅 */
    overflow: hidden;
}

.learn-more-btn {
    position: absolute;
    width: 100px;
    /* 円の直径 */
    height: 100px;
    /* 円の直径 */
    background: rgb(7 7 7 / 60%);
    color: white;
    border-radius: 50%;
    /* 正円にする */
    text-decoration: none;
    /* pointer-events: none; */
    /* マウスイベントを無効にする */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    font-family: Castoro;
}

.image-container:hover .learn-more-btn {
    opacity: 1;
}

.portfolioTxt {
    padding: 0 18.4%;
    margin-top: 15px;
}

.portfolio__txt01 {
    color: var(--portfolio, #E5FF88);
    font-size: 1.2rem;
    font-weight: 400;
}

.portfolio__txt02 {
    font-size: 1.8rem;
}

.portfolio__txt03 {
    font-size: 1.3rem;
    margin-top: 15px;
}

.aboutPhoto__each--pc {
    display: none;
}

.detailBtn {
    display: block;
    color: #000;
    font-size: 0.9rem;
    font-weight: 400;
    width: 116px;
    height: 26px;
    border-radius: 5px;
    background: var(--brn, #F2FFCF);
    padding: 6px 39px 8px 31px;
    margin: 30px auto 0;
    margin-top: 30px;
    position: relative;
}

.detailBtn::after {
    content: '';
    display: block;
    background-image: url(../images/portfolio__detail__btn.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 10.5px;
    right: 19px;
    transition: 0.2s;
}

.detailBtn:hover::after {
    transform: translateX(3px);
}

.sugutabe__portfolio {
    width: 100%;
    display: block;
    padding: 0 15.7%;
    margin-top: 44px;
}

.banner__portfolio {
    width: 100%;
    display: block;
    padding: 0 15.7%;
    margin-top: 44px;
}

/* portfolio pc */
@media screen and (min-width:769px) {

    .portfolio {
        padding-left: 15vw;
        padding-right: 9.5vw;
    }

    .portfolio__flow {
        font-size: 10vw;
        margin-top: 20vw;
        animation: flowText 7s linear infinite;
    }

    .harapeko__portfolio {
        width: 34.7vw;
        margin-top: 0;
        padding: 0;
    }

    .portfolioTxt {
        padding-left: 0;
        padding: 0;
        /* padding-right: 14.5vw; */
        margin-top: 55px;
    }

    .portfolioTxt--sugutabe {
        margin-right: 114px;
        margin-left: 128px;
    }

    .sugutabe__portfolio {
        margin-top: 0;
    }

    .portfolioTxt--harapeko {
        margin-left: 6.7vw;
        margin-top: 21px;
    }

    .portfolio03 {
        display: flex;
        margin-top: 170px;
    }

    .portfolioTxt--banner {
        margin-left: 6.7vw;
    }

    .banner__portfolio {
        padding: 0;
        margin-top: 0;
        width: 35vw;
    }

    .portfolio__txt01 {
        font-size: 0.9vw;
    }

    .portfolio__txt02 {
        font-size: 1.6vw;
    }

    .portfolio__txt03 {
        font-size: 1vw;
        line-height: 3.8vw;
    }

    .detailBtn {
        font-size: 15px;
        font-weight: 400;
        width: 180px;
        height: 50px;
        border-radius: 12px;
        background: var(--brn, #F2FFCF);
        padding: 13px 39px 19px 44px;
        margin: 3.4vw 0;
    }

    .detailBtn::after {
        width: 14px;
        height: 14px;
        top: 20.5px;
        right: 2.4vw;
    }

    .portfolio01 {
        display: flex;
        margin-top: 160px;
    }

    .portfolio02 {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 170px;
    }

    .sugutabe__portfolio {
        width: 34.7vw;
        padding: 0;
    }

}



/* about */

.about {
    margin-top: 100px;
    width: 100%;
    overflow: hidden;
}

.about__topic {
    display: block;
    color: #000;
    font-family: Castoro;
    font-size: 6vw;
    font-weight: 400;
    width: 82vw;
    height: 17vw;
    background: #F0FF7F;
    text-align: center;
    padding: 5vw 0;
    margin-left: auto;
    position: relative;
    z-index: 20;
}

.name__all {
    display: flex;
    /* width: 234px;
    height: 42px; */
    background: #494949;
    padding: 2.7vw 9.8vw 2.7vw 9.6vw;
    margin-left: 45.6vw;
    position: relative;
    z-index: 5;
}

.name {
    min-width: 82px;
}

.name__txt01 {
    color: #FFF;
    font-size: 0.4rem;
    font-weight: 500;
    letter-spacing: 4.12px;
}

.name__txt01 span {
    padding-left: 3.7vw;
}

.name__txt02 {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.84px;
    margin-top: 5px;
}

.about__detail {
    /* margin-left: 3.2vw; */
    min-width: 110px;
    padding-top: 5px;
}

.about__detail__txt01 {
    font-size: 0.8rem;
}

.about__detail__txt02 {
    font-size: 0.8rem;
}

.about__background__all {
    width: 100%;
    position: relative;
}

.about__background01 {
    width: 75.5vw;
    height: 67vw;
    background: #D9D9D9;
    margin-left: auto;
    margin-top: -18vw;
    position: relative;
    z-index: -1;
}

.about__sen__pc {
    display: none;
}

.about__sen__sp {
    width: 90%;
    height: 57vw;
    /* max-height: 290px; */
    position: absolute;
    top: 5vw;
    left: 8vw;
    z-index: 10;
    /* margin-left: 10%; */
}

.aboutPhoto {
    display: flex;
    gap: 3.5vw;
}

.aboutPhoto--01 {
    position: absolute;
    top: 4vw;
    right: -4vw;
}

.aboutPhoto--02 {
    position: absolute;
    top: 37vw;
    right: -4vw;
}

.aboutPhoto__each {
    width: 23vw;
}

.aboutTxt {
    color: #FFF;
    font-size: 1.8vw;
    font-weight: 400;
    letter-spacing: 2.4px;
    background: #494949;
    padding: 4.2vw;
    width: 65vw;
    height: 20vw;
    position: absolute;
    top: 59vw;
    right: 4vw;
}

.detailBtn--about {
    margin-top: 21vw;
}

.about__circle {
    width: 23vw;
    position: absolute;
    bottom: 14vw;
    left: 6vw;
    animation: rotateCircle 20s linear infinite;
    /* アニメーションの設定 */
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
        /* 開始時の角度 */
    }

    to {
        transform: rotate(360deg);
        /* 終了時の角度 */
    }
}

/* about pc  */
@media screen and (min-width:990px) {

    .about {
        margin-top: 300px;
    }

    .about__topic {
        font-size: 5.3vw;
        height: 10vw;
        padding: 2vw 0;
    }

    .aboutPhoto__each {
        width: 17vw;
    }

    .aboutPhoto--01 {
        top: 6vw;
        right: -9vw;
    }

    .aboutPhoto--02 {
        top: 32vw;
        right: -9vw;
    }

    .aboutPhoto__each--pc {
        display: block;
    }

    .about__background01 {
        width: 69.5vw;
        height: 54vw;
    }

    .about__sen__sp {
        left: 15vw;
    }

    .name__txt01 {
        font-size: 1.5rem;
    }

    .name__txt01 span {
        padding-left: 1vw;
    }

    .name__txt02 {
        font-size: 3rem;
    }


    .about__detail {
        padding-top: 21px;
        margin-left: 4vw;
    }

    .about__detail__txt01,
    .about__detail__txt02 {
        font-size: 1.6rem;
    }

    .aboutTxt {
        top: 44vw;
        right: 0;
        z-index: 30;
    }

    .about__circle {
        width: 21vw;
        bottom: 5vw;
        left: 13vw;
    }

    .detailBtn--about {
        margin: 7vw auto;
        z-index: 50;
    }
}

/* other work */

.other__work {
    margin-top: 80px;
}

.other__topic {
    font-family: Castoro;
    font-size: 5.3vw;
    font-weight: 400;
    text-align: center;
}

.other__txt {
    text-align: center;
    font-size: 8px;
    font-weight: 500;
    margin-top: 2px;
}

.other__section {
    display: flex;
    padding: 0 8.2vw;
    gap: 7.7vw;
    margin-top: 30px;
}

.other__section:first-of-type {
    margin-top: 27px;
}

.other__photo {
    width: 37.8vw;
    /* margin-left: 29px; */
}

.other__photo--video {
    background-color: #333232;
    height: 37.3vw;
}

.other__section--allPc {
    display: none;
}

/* other work */

@media screen and (min-width: 769px) {
    .other__txt {
        font-size: 1vw;
    }

    .other__section {
        padding: 0;
        gap: 4.1vw;
        padding-left: 12vw;
        margin-top: 4.1vw;
    }

    .other__section--allPc {
        display: block;
        padding-inline: 4.1vw;
        margin-top: 64px;
    }

    .other__section--allSp {
        display: none;
    }

    .other__photo {
        width: 20vw;
    }

    .other__photo--video {
        height: auto;
    }
}