@charset "UTF-8";
#firstView h1 {
	font-size: 500%;
	line-height: 1.2em;
	font-weight: 900;
	margin: 0 0 -0.5em 2em;
	position: relative;
	z-index: 1;
}
#firstView h1 strong {
	display: block;
	color: #99cc44;
}
#firstView #slideBox .inBox .photo {
	margin: 0 1px;
}
#firstView #slideBox .inBox .en {
	font-size: 300%;
	line-height: 1em;
	font-weight: 900;
	margin: -0.5em 0 0 40px;
	text-transform: uppercase;
	letter-spacing: normal;
	position: relative;
	z-index: 1;
}
#firstView #slideBox .inBox .title {
	font-size: 100%;
	line-height: 1.5em;
	font-weight: normal;
	margin: 0 0 0 40px;
}
#aboutBox {
	margin-top: 40px;
	display: flex;
	gap: 40px;
}
#aboutBox .inBox {
	flex: 1;
	padding: 40px;
	background-color: #99cc44;
	border-radius: 200px 200px 10px 10px;
}
#aboutBox .inBox .photo img {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 999px;
}
#aboutBox .inBox h3 {
	margin-top: 20px;
	font-size: 180%;
	line-height: 1.5em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: normal;
}
#ploblemBox {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	align-items: end;
	gap: 20px;
}
#ploblemBox .inBox ul {
	margin: 0;
	padding: 1em;
	border-radius: 10px;
	background-color: #99cc44;
	position: relative;
	font-size: 110%;
	color: #fff;
}
#ploblemBox .inBox ul::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: #99cc44;
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -10px;
	transform: rotate(45deg);
}
#ploblemBox .inBox ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#ploblemBox .inBox .photo img {
	width: 150px;
	border-radius: 999px;
	border: solid 1px #ccc;
	margin: 20px auto 0;
}
#worksBox ul {
	margin-top: 20px;
	padding: 0;
}
#worksBox ul .slick-track {
  display: flex;
}
#worksBox ul .slick-slide {
  height: auto !important;
}
#worksBox ul li.inBox {
	list-style: none;
	margin: 0 5px;
	padding: 0;
	border: solid 1px #ccc;
}
#worksBox ul li.inBox .photo img {
	width: 100%;
	aspect-ratio:3/2;
	object-fit: cover;
}
#worksBox ul li.inBox .title {
	padding: 1em;
}
#worksBox ul li.inBox a {
	color: inherit;
}
@media screen and (max-width: 700px) {
	#width-----700px----- {}
	#firstView h1 {
		font-size: 200%;
		margin: 0 0 -0.5em 20px;
	}
	#firstView h1 strong {
		display: block;
		color: #99cc44;
	}
	#firstView #slideBox .inBox .photo {
		margin: 0;
	}
	#firstView #slideBox .inBox .en {
		font-size: 180%;
		margin: -0.5em 0 0 20px;
	}
	#firstView #slideBox .inBox .title {
		margin: 0 0 0 20px;
	}
	#aboutBox {
		flex-direction: column;
		margin-top: 20px;
		gap: 10px;
	}
	#aboutBox .inBox {
		padding: 10px;
		border-radius: 100px 10px 10px 100px;
		display: flex;
	}
	#aboutBox .inBox .photo img {
		width: 100px;
	}
	#aboutBox .inBox h3 {
		margin-top: 0px;
		font-size: 130%;
		flex: 1;
	}
#ploblemBox {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 20px;
}
	#ploblemBox .inBox ul {
		font-size: 100%;
	}
	#ploblemBox .inBox .photo img {
		width: 100px;
	}
}