body {
   font-family: Arial, sans-serif;
   margin: 40px;
   background-color: #ffffff;
   color: #333;
}

header {
	height: 60vh;
	display: flex;
  justify-content: center; /* 横中央 */
  align-items: center; 
	padding-top: 20vh;
}
.header-container{
	width: 100%;
	height: 100%;
}
.header-container p{
	text-align: center;
}
h1 {
   font-size: 32px;
   margin-bottom: 5px;
	text-align: center;
	font-family: Cherry Swash;
}

h2 {
   margin-top: 40px;
   /*  border-bottom: 1px solid #ccc;*/
   padding-bottom: 1.5rem;
	text-align: center;
}
ul {
   list-style: none;
   padding: 0;
}

li {
   margin-bottom: 10px;
}
li:has(.list-title){
	list-style-type: none;
}
.list-title{
	font-weight: bold;
}
a {
   color: black;
   text-decoration: underline;
}
section{
	padding-bottom: 3rem;
}
.works-category{
	display: flex;
	gap: 1rem;
}
.work-category-card{
	background-color: rgb(230, 230,230);
	border-radius: .5rem;
	padding: .3rem;
	width: 48%;
}
.work-category-card h3{
	text-align: center;
}
.work-category-card p{
	text-align: center;
}
.work-icon{
	text-align: center;
}
i{
	font-size: 2.5rem;
	text-align: center;
}
.readmore{
	width: 80%;
	height: 2rem;
	margin-left: auto;
	margin-right: auto;
	background: #444;
	border-radius: .3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s;
}
.readmore:hover{
	background: #666;
}
.readmore:active{
	background: #888;
}
.readmore a{
	color: #fff;
	text-decoration: none;
	font-size: .8rem;
}
footer p{
	text-align: center;
}