@charset "utf-8";
/* ************************************************************************
* 
*   works.css
*
************************************************************************ */

@media screen and (min-width: 769px) {

/* -- worksDetail -- */
    
a{
    color: var(--white);
    }

header{
    position: fixed;
}

.worksbox-pc { display: block; }
.worksbox-sp { display: none; }
    
.worksbox{
    position: fixed;
    bottom: 24px ;
    width: 15vw;
    height: 59vh;
    overflow-y: scroll;
    scrollbar-width: none;

    a {
      opacity: 0.3;
      text-decoration: none;
      position: relative;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      padding: 2px 0;
      transition: opacity 0.1s ease-in-out;
    } 

    a::before {
      content: "/";
      color: inherit;
      margin: 0 8px 0 0;    
    }
    
    a:hover {
      opacity: 1;
    }

    a.current {
      opacity: 1;
    }

    a.current::before {
      content: "";
      margin: 0;    
    }

     li:nth-last-child(2){
        margin: 0 0 80px;
    }

    li:last-child{
        position: fixed;
        bottom: 8px;
        width: 15vw;

        img{
            width: 100%;
        }
    }
}

.scroll{
        /*position:fixed;
        bottom: 24px;*/
        display: none;
}
    
.wrap{
    grid-row: 1;
    grid-column: 9 / 24;

    img{
        width: 100%;
    }

    .credit{
        border-top: solid 0.1px;
        display: flex; 
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 36vh 0 16px ; 
        padding: 16px 0 0;

        h3{
            margin: 0 0 200px;
        }

        h3:before{
            content:"⚫︎";
            margin: 0 8px 0 0;
        }

        ul{
           display: flex; 
           flex-wrap: wrap;
        }

        li{
            margin: 0 8px 0 0 ;
        }
          
        li:after{
            content:",";
        }
        
        li:last-child:after{
            content: none;
        }      
    }

    .summary{
        margin: 160px 0 0;

        .about,.background,.target,.aim,.color,.font,.tool,.staff{
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr) 24px) 1fr;
            margin: 0 0 160px ;

            h3{
                grid-column: 1 / 4;
            }
    
            .summaryInner{
                grid-column: 5 / 16;
                text-align: justify;

                h4{
                    margin: 0 0 8px;
                }
                
                figure{
                    margin: 64px 0 ;
                }

                .colorChip, .toolList{
                    display: flex; 
                    flex-wrap: wrap;

                    li{
                       padding: 0 4px; 
                    }

                    li:after{
                        content:",";
                    }

                    li:last-child:after{
                        content: none;
                    } 

                    .txtBlack{
                        color: var(--black);
                    } 
                }

                dl{
                    display: grid;
                    grid-template-columns: repeat(5, minmax(0, 1fr) 24px) 1fr;
                    margin: 0 0 40px;

                    dt{
                        grid-column: 1 / 4;
                    }

                    dd{
                        grid-column: 5 / 10;
                    }
                }
            }
        }
    }

    .imgList{

        li{
            margin: 0 0 20px;
        }

        video{
            width: 100%;
            margin: 10px 0 0 ;
        }
    }
    
}
}




/* -------------- SP View -------------- */

@media screen and (max-width: 768px) {

/* -- SP worksDetail -- */
header{
    position: fixed;
}

.worksbox-pc { display: none; }
.worksbox-sp { display: block; }

.worksbox{
    margin: 200px 0 0;
    width: 100%;
    overflow-y: scroll;
    scrollbar-width: none;

    a {
      opacity: 0.3;
      text-decoration: none;
      position: relative;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      padding: 2px 0;
      transition: opacity 0.1s ease-in-out;
    } 

    a::before {
      content: "/";
      color: inherit;
      margin: 0 8px 0 0;    
    }
    
    a:hover {
      opacity: 1;
    }

    a.current {
      opacity: 1;
    }

    a.current::before {
      content: "";
      margin: 0;    
    }

    li:last-child{
        display: none;
    }
}

.scroll{
        display: none;
}
    
.wrap{
    grid-row: 1;
    grid-column: 9 / 24;

    img{
        width: 100%;
    }

    .credit{
        border-top: solid 0.1px;
        display: flex; 
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 36vh 0 16px ; 
        padding: 16px 0 0;

        h3{
            margin: 0 0 80px;
        }

        h3:before{
            content:"⚫︎";
            margin: 0 8px 0 0;
        }

        ul{
           display: flex; 
           flex-wrap: wrap;
        }

        li{
            margin: 0 8px 0 0 ;
        }
          
        li:after{
            content:",";
        }
        
        li:last-child:after{
            content: none;
        }      
    }

    .summary{
        margin: 80px 0 0;

        .about,.background,.target,.aim,.color,.font,.tool,.staff{
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr) 24px) 1fr;
            margin: 0 0 80px ;

            h3{
                grid-column: 1 / 4;
            }
    
            .summaryInner{
                grid-column: 5 / 16;
                text-align: justify;

                h4{
                    margin: 0 0 8px;
                }
                
                figure{
                    margin: 64px 0 ;
                }

                .colorChip, .toolList{
                    display: flex; 
                    flex-wrap: wrap;

                    li{
                       padding: 0 4px; 
                    }

                    li:after{
                        content:",";
                    }

                    li:last-child:after{
                        content: none;
                    } 

                    .txtBlack{
                        color: var(--black);
                    } 
                }

                dl{
                    margin: 0 0 40px;

                    dt{
                        grid-column: 1 / 4;
                    }

                    dd{
                        grid-column: 5 / 10;
                    }
                }
            }
        }
    }

    .imgList{

        li{
            margin: 0 0 20px;
        }

        video{
            width: 100%;
            margin: 10px 0 0 ;
        }
    }


}
}