@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;
}
.grid .item p{
	color: #333;
}
img {
  max-width: 100%;
	width: auto;
  height: auto;
}
p {
  text-align: left;
}

#viewport p{
	color: #333;
}

.contents_H{
	display: flex;
	flex-direction: row;
}

.contents_H li{
	text-align: left;
	color: #283542;
	margin: 0.7em 0;
}

.contents_H h2{
	color: #283542;
}

.contents_V{
	display: flex;
	flex-direction: column;
}

.contents_V li{
	text-align: left;
	color: #283542;
	margin: 0.5em 0;
}

.contents_V h2{
	color: #283542;
	margin-top: -1em;
}

.btn01{
	display: block;
	width: auto;
	padding: 1em;
	background-color: #283542;
	color: #E1D7F1;
	font-weight: 500;
	border-radius: 4px;
}

.btn01 a{
	display: block;
	color: #E1D7F1;
	text-decoration: none;
}

.btn01 a:visited{
	color: #E1D7F1;
}

.btn01 a:hover{
	filter: brightness(1.5); /* 明るくする */
      transition: filter 0.4s cubic-bezier(0, 2.5, 0.2, 2.5); /* イージングを強烈にかける */
}

/*
@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からはここを読み込む　*/
 
}