@charset "UTF-8";

/* ===================
common pc
====================== */
@media screen and (min-width:769px) {
    .section {
        padding-top: 200px;
    }

    .textInfoNumber {
        padding-top: 40px;
    }
}
/* ===================
main
====================== */

.worksTitle {
    font-size: 2.6rem;
}

.textBoxText {
    padding-top: 45px;
}

.textBoxTitle {
    font-size: 2.6rem;
}

.worksImg {
    padding-top: 45px;
}

.worksContentTitle {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2; /* 166.667% */
    padding-top: 60px;
}

.worksContentText {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2; /* 214.286% */
    padding-top: 40px;
}

.worksMockup {
    padding-top: 45px;
}

.worksDetail {
    padding-top: 100px;
}

.client,.Target,.purpose,.assignment,.informationArchitecture,.design,.period {
    padding-top: 25px;
    font-size: 1.4rem;
    font-weight: 400;
}

.clientText,.TargetText,.purposeText,.assignmentText,.informationArchitectureText,.designText,.periodText {
    padding-top: 10px;
    font-size: 1.4rem;
    font-weight: 400;
}

hr {
    margin-top: 25px;
}

.sampleBox {
    text-align: center; /* 画像を中央に配置 */
}

.samplePc {
    display: none;
}

.sample {
    padding-top: 80px;
    display: block;
    margin: 0 auto; /* 中央揃えを確実にするためのマージン */
}

.bannerImg {
    padding-top: 40px;
}

.consept {
    padding-top: 100px;
}

/* ===================
works pc
====================== */
@media screen and (min-width:769px) {
    .worksTitle {
        font-size: 6.6rem;
    }

    .worksNumber {
        font-size: 2rem;
    }

    .bannerBox {
        display: flex;
        padding-top: 0;
        gap: 125px;
    }

    .bannerImgBox {
        order: 2;
    }

    .textBoxTitle {
        font-size: 4rem;
    }

    .worksImgPc {
        width: 100%;
        padding-top: 80px;
    }

    .worksContent {
        display: flex;
        gap: 65px;
        padding-top: 190px;
    }

    .bannerContent {
        order: 1;
        padding-top: 270px;
        display: block;
    }

    .worksContentTitle {
        font-size: 3.9rem;
        flex: 2;
        padding-top: 0;
    }

    .worksContentText {
        flex: 2;
        padding-top: 10px;
        font-size: 1.8rem;
    }

    .bannerText {
        padding-top: 135px;
    }

    .worksMockup {
        padding-top: 190px;
    }

    .worksDetail {
        padding-top: 190px;
    }

    .worksDetailBox {
        display: grid;
        grid-template-columns: 270px 1fr; /* 左：ラベル幅固定、右：本文 */
        column-gap: 16px;                /* ラベルと本文の間の余白 */
        margin-bottom: 1em;
    }

    .worksDetailSubbox p {
        padding-top: 5px;
    }

    .worksDetailSubbox p:first-child {
        padding-top: 40px;
    }

    hr {
        margin-top: 40px;
    }

    .worksDetailBox > p:not(:first-child),
    .worksDetailBox .worksDetailSubbox {
        text-align: left; /* 本文は左揃え */
    }

    .client,.Target,.purpose,.assignment,.informationArchitecture,.design,.period {
        padding-top: 40px;
        font-size: 1.4rem;
        font-weight: 400;
    }
    
    .clientText,.TargetText,.purposeText,.assignmentText,.informationArchitectureText,.designText,.periodText {
        padding-top: 40px;
        font-size: 1.4rem;
        font-weight: 400;
    }

    .sampleBox {
        display: flex;
        justify-content: space-between;  /* 横中央に配置 */
        align-items: flex-start;  /* 上端で揃える */
        gap: 20px;
        padding-top: 190px;
    }
    
    .sampleBox img {
        max-width: 100%; /* 画像がはみ出ない */
        height: auto;    /* 縦横比維持 */
        display: block;
    }
    
    .samplePc {
        display: block;  /* PCで表示 */
        width: 70%;
    }

    .sample {
        padding-top: 0;
        width: 25%;
    }
} 

/* ===================
artwork
====================== */

.artworkImgPc {
    display: none;
}

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

.gallery {
    padding: 0 var(--contentPadding);
}

.graphicA,.graphicB,.graphicC,.graphicD,.graphicE,.graphicF,.graphicG,.graphicH,.graphicI,.graphicJ,.graphicK {
    padding-top: 55px;
    width: 100%;
}


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

    .artworkImgPc {
        display: block;
        padding-top: 130px;
        width: 100%;
    }

    .artworkImg {
        display: none;
    }

    /* galleryにFlexboxを適用し、ランダム配置のベースを作る */
    .gallery {
        display: flex;
        flex-wrap: wrap; /* コンテナ幅を超えたら次の行に折り返す */
        align-items: flex-start; /* 縦方向の上端に配置 */
    }

    /* galleryItemにFlexboxを適用し、画像を横並びにする */
    .galleryItem {
        display: flex;
        align-items: flex-start;
        margin: 20px; /* galleryItem間の余白 */
    }
    
    /* 各画像に対して、個別のスタイルを適用する */
    /* マージンとtransformを使って、ランダムな配置と角度をつける */
    .graphicA {
        width: 50%; /* 幅をパーセンテージで指定 */
        margin-top: 250px;
        margin-left: 5%;
    }

    .graphicB {
        width: 30%;
        margin-top: 200px;
    }

    .graphicC {
        width: 45%;
        margin-top: 100px;
        margin-left: 20%;
    }

    .graphicD {
        width: 50%;
        margin-top: 150px;
    }
    
    .graphicE {
        width: 25%;
        margin-top: 45px;
        margin-left: 15%;
    }

    /* 以下、すべての画像に同様のスタイルを適用 */
    /* 上記の例を参考に、各画像に個別のスタイルを設定してください */
    .graphicF {
        width: 35%;
        margin-top: 550px;
        margin-left: 5%;
    }

    .graphicG {
        width: 50%;
        margin-top: 200px;
        margin-left: 15%;
    }
    
    .graphicH {
        width: 55%;
        margin-top: 200px;
        margin-left: 15%;
    }

    .graphicI {
        width: 35%;
        margin-top: 250px;
        margin-left: 5%;
    }
    
    .graphicJ {
        width: 30%;
        margin-top: 100px;
        margin-left: 15%;
    }

    .graphicK {
        width: 55%;
        margin-top: 200px;
        margin-left: 40%;
        margin-bottom: 200px;
    }
}

/* ===================
other projects
====================== */

.otherProjectsTitle {
    font-size: 2.6rem;
}

.projectsImg {
    width: 100%;
    height: auto;
    padding-top: 25px;
}

.textInfoNumberFooter {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.textBoxTextFooter {
    padding-top: 10px;
}

.textBoxTitleFooter {
    font-size: 2.2rem;
}

.worksNumberFooter,.textBoxWorkFooter {
    font-size: 1.4rem;
}

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

    .projectsBox {
        display: flex;
        gap: 40px;
    }
    .projectsImg {
        height: 200px;
        width: auto;
        object-fit: cover;
        /* ここに追記します */
        transition: transform 0.3s ease;
    }    

    /* projectsImg にマウスがホバーした時に拡大アニメーションを適用 */
    .projectsImg:hover {
        transform: scale(1.1);  /* 1.1倍に拡大 */
    }

}