@charset "UTF-8";
.wrapper {
  max-width: 1120px;
  margin: 0 auto 30px;
  padding: 0 4%;
  text-align: center;
}
.content{
	/*padding: 20px;*/
	text-align: left;
	font-size: 1.1rem;
	font-weight: bold;
  }
 /* monoクラス */
  
 .mono {
	box-shadow: 0 0 8px #5f99e6;
  }
  
  .mono h1 {
	font-weight: normal;
	text-align: center;
	font-size: 1.2rem;
	padding: 5px;
  }
  
  .mono p {
	padding: 10px;
  }
  
  .mono img {
	width: 100%;
  }
  
  aside {
	padding: 10px;
  }
/*-------------------------------------------
About
-------------------------------------------*/
#about{
	padding-top: 120px;
}
#menu{
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 10px;
	text-align: center;
 }
#menu div.mono {
	/* （全体の幅 - gapでつけた余白の合計）をカラム数で割る */
	width: calc((100% - 20px) / 3);
}
#menu div.mono img{
	/*width: 300px;*/
	height:400px;
	object-fit: cover;
}
#menu div.mono p {
	text-align: left;
  
}

/*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 600px) {
	/*追加*/
	#about h2{
		font-size: 1rem;
	  }
	  #about h3{
		font-size: 1rem;
	  }
	  #about p{
		font-size: 0.7rem;
	  }
	#menu {
		font-size: 0.7rem;
		font-weight: bold;
	}  
	#menu div.mono {
		/* （全体の幅 - gapでつけた余白の合計）をカラム数で割る */
		width: calc((100% - 10px) / 2);
	}
	#menu div.mono img{
		width: 150px;
		height:200px;
		object-fit: cover;
	}
	}