@charset "utf-8";

/* ==========================
main
============================ */
/* -----メインビジュアル -----------------------------*/

.works__sp { display: block; }
.works__pc { display: none; }


/* SP用メイン写真 */
.works__sp {
    position: relative;
}

.works-photo {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* SP用メイン写真を中央寄せ */
.works-photo img {
  display: block;
  margin: 0 auto;   
}

/* PC用メイン写真 */
.works__pc {
    position: relative;
}
.hero-pc-photo {
    position: relative; /* レイアウトに合わせて調整 */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* タイトル（SP/PC共通） */
.hero-title,
.hero-pc-title {
    position: absolute;
    left: 0;
    bottom: -60px;
    margin-left: 60px;
    margin-right: 5px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* is-show が付いたらふわっと表示 */
    .works-photo.is-show,
    .hero-pc-photo.is-show,
    .hero-title.is-show,
    .hero-pc-title.is-show {
    opacity: 1;
    transform: translateY(0);
}


/* -----Works -----------------------------*/
.works__contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 160px;
}

.works__tabs {
    display: flex;
    max-width: 310px;
    height: 130px;
}

.works__tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: center;
}

.works__tab {
    display: flex;
    width: 117px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 42px;
    border: 1px solid #6B6256;
}

/* Works アイテム */
.work__card {
    padding-top: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work__title {
    display: none;
}

.main__detail {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    font-size: 1.4rem;
    font-weight: 500;
    gap: 4px;
}

.sub__detail {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    gap: 7px;
    font-size: 1.3rem;
    font-weight: 350;
    letter-spacing: 0.26px;

}
.other__credit li strong {
    font-weight: 500;
}

.other__credit li strong::before {
    content: "";
    display: block;
    height: 20px;
}

.other__credit li:first-child strong::before {
    height: 0;
}

.other__credit {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* プロフィールへ遷移 */
.profilelink__wrapper {
    display: block;
    text-align: center;
    margin-top: 45px;
}

.profile__link {
    display: inline-block;
    font-size: 2.1rem;
    position: relative;
}

.profile__line {
    display: block;
    width: 160px;           
    height: 1px;  
    background-color: #121212;          
    margin: 10px auto 0;    
}

/* フェードインアニメーション */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInAnime 3s ease forwards;
}

@keyframes fadeInAnime {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================
レスポンシブ
============================ */
/* @media screen and (min-width:000px) */

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

@media screen and (min-width:427px) {
    .hero-title,
    .hero-pc-title {
        margin-left: 95px;
}
}

@media screen and (min-width:460px) {
    .hero-title,
    .hero-pc-title {
        margin-left: 125px;
}
}

@media screen and (min-width:527px) {
    .hero-title,
    .hero-pc-title {
        margin-left: 170px;
}
}

@media screen and (min-width:612px) {
    .hero-title,
    .hero-pc-title {
        margin-left: 230px;
}
}

@media screen and (min-width:720px) {
    .hero-title,
    .hero-pc-title {
        margin-left: 280px;
}
}
 

@media screen and (min-width:769px) {
/* メインビジュアル、タイトル */
    .works__sp { 
        display: none;
    }

    .works__pc { 
        display: block;
        margin: auto;
        max-width: 1210px; 
    }

    .hero-pc-title {
        bottom: -85px;
    }

    .hero-pc-title img {
        width: 798px;
    }

/*works*/

    .works__contents {
        margin-top: 220px;
    }

    .works__tabs {
        justify-content: center;
    }


    .works__tabs ul {
        gap: 64px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .work__card {
        flex-direction: row;
    }

    .work__detail {
        margin-left: 50px;
    }

    .main__detail {
        font-size: 2rem;
        font-weight: 500;
    }

    .sub__detail {
    font-size: 1.6rem;
    }

/* プロフィール遷移 */
    .profilelink__wrapper {
    margin-top: 80px;
    }

    .profile__link {
    font-size: 3.5rem;
    }

}