@charset "utf-8";
/* CSS Document */

body {
	line-height: 1.75rem;
}

a {
	background-color: #000;
	color:#FFF;
	padding: 0 0.25rem;
}

a#jp, a#en {
	background-color: #FFF;
}

a:hover {
	color:yellow;
	text-decoration: none;
}

header {
	position:relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	height: auto;
}

header p a {
	font-size:1.25rem;
}

header img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

header p.lang {
	text-align: center;
	width: 100%;
	position:absolute;
	bottom:20%;
}

header p.lang a{
	padding: 0.5rem 1rem;
}

header p.lang a:last-child{
	padding: 0;
}

header p.lang a img{
	display: inline-block;
	height:2.5rem;
	width: auto;
	background: none;
	vertical-align: middle;
	padding-bottom: 3px;
}

.star {
	margin: 2rem auto;
	width: 90%;
	text-align: center;
	font-size:0.85rem;
}

.star img{
	width: 100%;
	max-width: 100px;

}

.main {
	display: block;
	margin: 0 auto;
	padding: 0 8rem;
	width: calc(100% - 16rem);
	max-width: 1280px;
}

.main section {
	margin: 0;
	padding: 0;
	text-indent: 0;
	padding: 4rem 0;
	width: 100%;
}

.main section h1 {
	margin: 0 0 2rem 0;
	font-size:1.5rem;
	line-height: 2rem;
	font-weight: bold;
	border-left: 7px solid #000;
    padding-left: 1rem;
}

.main section .remark {
	font-size:0.75rem;
	color:tomato;
}

.main section .profile {
	margin: 2rem 0;
	padding: 2rem 2rem 1rem 2rem;
	background-color: #F9F9F9;
}

.main section .profile h2 {
	font-size:1.25rem;
	margin-bottom: 3rem;
}

.main section .profile h3 {
	font-size: 1rem;
	font-weight: bold;
}

.main section .profile p {
	margin-bottom: 3rem;
}

.main ul.works {
	list-style: none;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	width: 100%;
}

.main ul.works li{
	width: calc(33.3% - 10px);
	margin: 0;
	padding: 1rem 0;
	font-size:0.75rem;
	overflow: hidden;
}

.main ul.works li img {
	width: 100%;
}

.main ul.works li a {
	background: none;
	color:#000;
}

.main ul.works li a:hover {
	opacity:0.75;
	color:#666;
}

.main ul.works li a[target="_blank"]:after {
	content:url('../img/icn_link.png');
	margin: 0;
	vertical-align:middle;
}

.pageback {
	width: 100%;
	text-align: center;
}

.pageback a {
	background-color: #FFF;
	color:#000;
	font-weight: bold;
}

.pageback img {
	width: 64px;
}

@media screen and (max-width:1280px) { 

	header {

	}
	
	.main {
		display: block;
		margin: 0 auto;
		padding: 0 3rem;
		width: calc(100% - 6rem);
		max-width: 980px;
	}
	
}

@media screen and (max-width:640px) { 
	
	header p a {
	font-size:1rem;
	}
	
	header p.lang {
		bottom:12.5%;
	}
	
	.main {
		display: block;
		margin: 0 auto;
		padding: 0 0.5rem;
		width: calc(100% - 1rem);
		max-width: 640px;
	}
	
	
	.main section h1 {
		margin: 0 0 2rem 0;
		font-size:1.25rem;
		line-height: 1.75rem;
	}
	
	.main section .profile {

		padding: 2rem 0.5rem 1rem 0.5rem;

	}
	
	.main ul.works{
		flex-direction:column;
	}
	
	.main ul.works li{
		width: 100%;
		margin: 0;
		padding: 1rem 0;
	}

}