@charset "UTF-8";
/* CSS Document */




.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item {
  border-radius: 10px;
  background: #abcdef;
  padding: 15px;
  text-align: center;
}

.item p{
	color: darkslategray;
}
img {
  max-width: 100%;
	width: auto;
  height: auto;
}
p {
  text-align: left;
}

#viewport p{
	color: darkslategray;
}

/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
 color:#333333;
}
@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
p {}
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
 
}