body {
	margin: auto;
	color: #fff;
	background-color: #121212;
	text-align: center;
}
.header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
}
.item-left {
	grid-column-start: 1;
	grid-column-end: span 1;
}
.item-right {
	grid-column-start: 2;
	grid-column-end: span 1;
}
.menu {
  display: grid;
  gap: 10px;
  padding: 10px;
}

@media screen and (min-width: 768px) {
	img { max-width:100%; height:auto; }
  .menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  li {
	  height: 100px;
	  font-size: 200%;
  }
  .introduce {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
	  font-size: 120%;
  }
  .box02 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .box02-in {
	  font-size: 200%;
  }
  .box02-in img {
  	width: 36%
  }
}

@media screen and (min-width: 1024px) {
  .menu {
    grid-template-columns: repeat(6, 1fr);
    margin: auto;
    text-align: center;
    width: 68%;
  }
  .menu li {
	  height: 30px;
	  font-size: 16px;
  }
  .introduce {
    grid-template-columns: repeat(2, 1fr);
	  font-size: 16px;
  }
  .box02 {
    grid-template-columns: repeat(5, 1fr);
	  font-size: 16px;
  }
  .box02-in img{
  	width: 36%
  }
}

.menu li {
  border: 1px solid #8cbce9;
  display: flex;
  justify-content: center;
  align-items: center;
	background-color: midnightblue;
}
a {
	text-decoration: none;
	color: #fff;
}
li:hover {
	background-color: dimgray;
}
.box01 {
	margin:auto;
	width: 70%;
  border: 1px solid #8cbce9;
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.link01 {
	color: cyan;
}
.link01:hover {
	background-color: dimgray;
}
.box02 {
	margin:auto;
	width: 80%;
	display: grid;
	gap: 1px;
  padding: 10px;
	justify-content: center;
}
.introduce {
	margin:auto;
  display: grid;
  gap: 10px;
  padding: 10px;
	justify-content: center;
	color: #fff;
	font-family: "M PLUS 1p";
	padding: 30px;
}
.introduce-in {
	width: 100%;
}