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

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

	header{

	}

	#wrap{
		grid-row: 1;
		grid-column: 9 / 20;

		.worksList{
			margin: 36.5vh 0 0;
			
			a{
				display: grid;
				grid-template-columns: repeat(5, minmax(0, 1fr) 24px) 1fr;
				color: var(--white);
				padding: 20px 0;
				
				p{
					letter-spacing: 0;
				}
			}

			.category {
				grid-row: 1;
				grid-column: 1 / 2;
				letter-spacing: 0;
			
				li{
					text-box-trim: trim-both;
					margin: 0 4px 0 0;
					line-height: 1;
				}

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

			.projectName{
				grid-row: 1;
				grid-column: 3 / 12;
				
				h4 {
				line-height: 1.2;
				 }	
			}
		}

	}

	.aboutBox{
		grid-row: 1;
		grid-column: 21 /24;
		position: relative;

		.aboutImage {
		bottom: 60vh;
		position: fixed;
		margin: 0 24px 0 0;
		}
		.aboutImage img {
			width: 100%;
		}
		.aboutText{
			position: fixed;
			bottom: 24px;
			margin: 0 24px 0 0;
			text-align: justify;
			text-align: justify;
            overflow: hidden;
            max-height: 50vh;
		}
	}

	.textnone{
		display: none;	
	}

}


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

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

	#wrap{
		grid-row: 1;
		grid-column: 9 / 20;

		.worksList{
			margin: 16vh 0 0;
			
			a{
				display: grid;
				grid-template-columns: repeat(7, minmax(0, 1fr) 16px) 1fr;
				color: var(--white);
				padding: 8px 0;
				
				p{
					letter-spacing: 0;
				}
			}

			.category {
				grid-row: 1;
				grid-column: 1 / 4;
				letter-spacing: 0;
			
				li{
					text-box-trim: trim-both;
					margin: 0 4px 0 0;
					line-height: 1;
				}

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

			.projectName{
				grid-row: 1;
				grid-column: 5 / 16;
				
				h4 {
				line-height: 1.2;
				 }	
			}
		}

	}
	
	.aboutBox{
		display: none;
	}

	.textnone{
		display: none;	
	}
}