@charset "UTF-8";

/* INTRODUCTION
-----------------------------------------*/
#introduction {
	margin-top:100px;
}
.page-title {
	font-family:"Yu Mincho Medium","游明朝 Medium","HG正楷書体-pro",serif;
	font-size: 2rem;
	color: #31A861;
}
.page-main {
	margin-top:50px;
	font-family:"Yu Gothic Medium","游ゴシック Medium";
	font-size:1rem;
	color:#666;
	line-height:2rem;
}

/* SUB
-----------------------------------------*/
#sub {
	margin-top:50px;
	color:#666;
	font-family:"Yu Gothic Medium","游ゴシック Medium";
}
.sub-title {
	font-size:1.5rem;
	font-family:"Yu Mincho Medium","游明朝 Medium","HG正楷書体-pro",serif;
}
.sub-title02 {
	font-size:1.5rem;
	font-family:"Yu Mincho Medium","游明朝 Medium","HG正楷書体-pro",serif;
	text-align:center;
}
.container02 {
	display:grid;
	grid-template-columns:150px auto;
	margin-top:20px;
}
.item02 {
	font-size:1rem;
	line-height:2rem;
	margin:10px 0;
	position:relative;
	overflow:hidden;
}
.color {
	color:#F30;
}

/* WORKS
-----------------------------------------*/
#works {
	color:#666;
	font-family:"Yu Mincho Medium","游明朝 Medium","HG正楷書体-pro",serif;
	margin-top:20px;
}
.container03 {
	display:grid;
	grid-template-columns:150px auto;
	gap:20px;
}
.item03 {
	position:relative;
	overflow:hidden;
}
.item03 img {
	border-radius:75px;
	width:100%;
	cursor:pointer;
	transition-duration:0.3s;
	margin-top:10px;
}
.item03:hover img {
	opacity:0.6;
	transition-duration:0.3s;
}
.item03 h3 {
	font-size:1.25rem;
	font-family:"Yu Mincho Medium","游明朝 Medium","HG正楷書体-pro",serif;
	line-height:1.25rem;
}
.item03 p {
	font-size:1rem;
	line-height:1rem;
}
.container04 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:20px;
}
.item04 {
	position:relative;
	overflow:hidden;
}
.item04 img {
	border-radius:20px;
	width:100%;
	cursor:pointer;
	transition-duration:0.3s;
}
.item04:hover img {
	opacity:0.6;
	transition-duration:0.3s;
}
.item04 p {
	font-size:1.1rem;
}
.click a:link {
	color: #666;
}
.click a:visited {
	color: #666;
}
.click a:active {
	color: #666;
}
.click a:hover {
	color:#31A861;
}

/*
MOBILE SIZE
============================================*/
@media (max-width:600px) {

/* INTRODUCTION
-----------------------------------------*/
#introduction {
	margin-top:50px;
}
.page-title {
	font-size: 1.1rem;
}
.page-main {
	margin-top:25px;
	font-size:0.9rem;
	line-height:2rem;
}

/* SUB
-----------------------------------------*/
.sub-title {
	font-size:1rem;
}
.sub-title02 {
	font-size:1rem;
}
.container02 {
	grid-template-columns:100px auto;
}
.item02 {
	font-size:0.85rem;
	line-height:1.5rem;
}

/* WORKS
-----------------------------------------*/
.container03 {
	grid-template-columns:100px auto;
}
.item03 h3 {
	font-size:1rem;
}
.item03 p {
	font-size:0.85rem;
	line-height:1.5rem;
}
.item04 p {
	font-size:0.85rem;
}