/* 画像の黒枠 */
.img-border{
    border: #3c3c3c solid 10px;
}


/* ファーストビュー */

.works-page img{
    width: 100%;
    height: auto;
}

.works-title p{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 4.5rem;
    position: absolute;
    content: '';
    
}

.section-title{
    text-align: center;
}

.works-scroll{
    width: 100%;
    max-width: 1040px;
    display: flex;
    gap: 40px;
    margin: 0 auto;
}

.works-scroll h2{
    display: none;
}

.scroll-pc a,
.scroll-sp a{
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 150%;
    transition: 0.5s;
}

.scroll-pc p,
.scroll-sp p {
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 150%;
    transition: 0.5s;
}

.scroll-pc a:hover,
.scroll-sp a:hover {
    opacity: .5;
}

.scroll-pc{
    width: 100%;
    max-width: 708px;
}



.scroll-pc li,
.scroll-sp li{
    list-style: none;
    overflow: hidden;
    overflow-y: scroll;
    height: 667px;
}


.scroll-pc li {
    width: 100%;
    max-width: 708px;
}

.scroll-sp li {
    width: 100%;
    max-width: 291px;
    
}

.scroll-pc img,
.scroll-sp img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.scroll-pc img{
    max-width: 708px;
}

.scroll-sp img{
    max-width: 291px;
}

.works-banner{
    width: 100%;
    max-width: 624px;
    margin: 0 auto;
    border: #3c3c3c solid 21px;
}

.works-banner img{
    width: 100%;
    max-width: 624px;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 575px){
    .works-scroll{
    flex-direction: column;
    }

    .scroll-sp li {
    width: 100%;
    max-width: 691px;
    height: 600px;
    }

    .scroll-sp img{
    max-width: 664px;
    }
}


/* ABOUT */

.work-list .item:nth-child(1){
    border-top: 1px #D9D9D9 solid;
}

.item{
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 64px 0;
    border-bottom: 1px #D9D9D9 solid;
    width: 100%;
    max-width: 1080px;
}

.item h3{
    width: 80%;
    max-width: 500px;
    min-width: 236px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase;
}

.item-list{
    width: 100%;
    max-width: 652px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-list p {
    line-height: 180%;
}

.item-list  a {
    font-size: 1.6rem;
    transition: all 0.7s;
}

.item-list a:hover{
    opacity: .7;
}



/* 共通のh4 */
.works-h4{
    font-size: 1.8rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 575px){
    .works-h4 {
            min-width: 100px;
            font-size: 1.6rem;
        }
}

/* 制作期間 */
.item-period{
    display: flex;
    gap: 32px;
    width: 100%;
    max-width: 652px;
}

.item-period-item{
    width: 80%;
}

/* 使用ツール */
.item-tool{
    display: flex;
    gap: 32px;
    width: 100%;
    max-width: 652px;
    text-transform: capitalize;
}

@media screen and (max-width: 768px){
    .item-period {
            flex-direction: column;
        }
}

@media screen and (max-width: 575px){
        .item{
            flex-direction: column;
            gap: 40px;
            border-bottom: 1px #D9D9D9 solid;
            width: 100%;
            max-width: 1080px;
        }

        .item h3 {
            width: 100%;
            max-width: 500px;
            min-width: 236px;
            line-height: 150%;
        }
    
        .item-list {
            width: 100%;
            max-width: 652px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
    
        .item-list p {
            line-height: 150%;
        }

        .item-period {
            gap: 8px;
        }

        .item-period-item{
            display: flex;
            gap: 16px;
            align-items: center;
        }
}


.data{
    width: 100%;
    background-color: #F8EB77;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.data-item{
    max-width: 735px;
    width: 90%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.data-item img{
    width: 100%;
    max-width: 735px;
    min-width: 218px;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
    border: #3c3c3c solid 10px;
}

.data-flex{
    width: 100%;
    max-width: 996px;
    display: flex;
    margin: 0 auto;
    gap: 40px;
}

.data-flex  img{
    height: auto;
    object-fit: contain;
    border: #3c3c3c solid 10px;
}

.persona {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media screen and (max-width: 575px) {
    .data {
        gap: 24px;
    }

    .persona{
        gap: 24px;
    }

    .data-item img{
    margin-bottom: 2px;
    }

    .data-flex{
        flex-direction: column;
    }
}

/* CONCEPT */

.concept-list .item-list{
    gap: 40px;
}

.item-text h4{
    margin-bottom: 8px;
}

.item-text p{
    line-height: 180%;
}

/* デザインコンセプトのギャップ40px */
.item-list-concept{
    gap: 48px;
}

/* カラー */

.color-container{
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    row-gap: 48px;
}

.item-color{
    width: 100%;
    max-width: 529px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.item-color img{
    width: 100%;
    max-width: 108px;
    height: auto;
    margin-bottom: 16px;
}

.item-color .works-h4{
    margin-bottom: 16px;
}

.font-container{
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.item-font{
    width: 100%;
    max-width: 648px;
}

.item-font h4{
    margin-bottom: 16px;
}

.item-font img{
    width: 60%;
    height: auto;
    object-fit: contain;
    margin-bottom: 16px;
}

.font1{
    max-width: 287px;
}

.font2 {
    max-width: 190px;
}

.font3 {
    max-width: 359px;
}

@media screen and (max-width: 575px){
    .concept-list .item-list{
            gap: 40px;
        }

    .item-list-concept{
        gap: 24px;
    }
        
    .color-container{
        gap: 16px;
        row-gap: 32px;
    }

    /* フォント */
    .font-container{
    gap: 40px;
    }

}

/* point */

.point-container{
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.point-item{
    width: 100%;
    max-width: 735px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
}

.point-title{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}

.point-title h3{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.point-title img {
    width: 26%;
    max-width: 98px;
    min-width: 47px;
    height: auto;
    object-fit: contain ;
}

.point-item-text p{
    width: 100%;
    max-width: 744px;
    margin-bottom: 48px;
}

.point-box-container{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.point-box{
    margin: 0 auto;
    text-align: center;
}

.point-box-img{
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    align-items: flex-start;
}

.point-box-img img{
    width: 100%;
    object-fit: contain;
    height: auto;
    border: #3c3c3c solid 10px;
}

.point-box p{
    text-align: center;
    display: inline;
}

.link-text{
    font-weight: 700;
}

.link-text:hover{
    opacity: .5;
}

@media screen and (max-width: 575px){
    .point-title h3{
        font-size: 2.4rem;
    }

    .point-item-text p{
        margin-bottom: 48px;
    }

    .point-box-container{
        gap: 24px;
    }

    .point-box-img {
        flex-direction: column;
        margin-bottom: 2px;
    }
}