body {
	background-color: #FFFFFF;
	text-align: center;
	font-family: "Swis721 Cn BT",
               "Helvetica Neue",
               Helvetica,
               "Noto Sans JP",
               "Hiragino Kaku Gothic ProN",
               "Yu Gothic",
               Meiryo,
               sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 20px; 
}

h1.section-title {
	text-align: center;
	font-size: 1.2em;
  font-weight: 600;
}

#footer {
	float: none;
	width: auto;
	clear: both;
	font-size: 12px;
}


		
		.projects{
			display: grid; /* CSS Gridを使用 */
			grid-template-columns: 33.33% 33.33% 33.33%; /* 3等分の幅を指定 */
			/*display: flex;
            justify-content:space-between; /* 等間隔配置 */
            align-items:center; /* 縦方向を中央揃え（任意） */
            width: 90%; /* コンテナ全体を画面幅に */
			margin-left: 5%;
			margin-top: 40px;
            padding: 0px;
            box-sizing: border-box; /* パディングを含む幅 */
		}
		.photo-item {
			align-items: center;
            width: 80%; /* 各写真アイテムの幅 */
			margin-left:10%;
        }
        .photo-item img{
			display:block;
			width:100%;
			height:auto;
}
        .photo-item p {
			margin-top: 0px;
			margin-bottom: 0px;
			/*font-size: 16px;*/
           font-size: 1vw;
            /*color: #000000; /* 文字色 */
            text-align: left; /* 左揃え */
            width: 100%; /* imgの幅に揃える */
            /*padding-left: 5%; /* 左側に余白がないように */
            box-sizing: border-box; /* パディングを含む幅調整 */
        }

		.content {
			text-align: center;
            width: 75%; /* 画面幅の80% */
            margin: 0 auto; /* 中央揃え */
        }
		

@media (max-width : 400px ){
	body {
		font-size: 12px; /* スマホ用の文字サイズ */
		margin: auto;
	}
	.projects{
		display: Grid;
		grid-template-columns: 100%;
        width: 100%; /* コンテナ全体を画面幅に */
		margin-top: 10px;
		margin-left: -10%;
	}
	.photo-item {
		width: 100%; /* 各写真アイテムの幅 */
		margin-top: 25px;
		align-items: center;
        }
	.photo-item p {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 5%;
		font-size: 3vw;
        /*font-size: 12px;
            /*color: #000000; /* 文字色 */
        text-align: left; /* 左揃え */
        width: 100%; /* imgの幅に揃える */
            /*padding-left: 5%; /* 左側に余白がないように */
        box-sizing: border-box; /* パディングを含む幅調整 */
        }

			
}