@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@900&display=swap');
body,div,article,section,header,footer,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none; outline:none!important;}
fieldset,img {border: 0;}
html,body,div,article,section {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
div,header,footer,article,nav,section{display:block; overflow:hidden;}
strong{font-weight: bold;}
ol,ul {list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing: 0;}
a{color:RGBA(252, 252, 228, 0.8); text-decoration:underline;}
a:hover{color:#FFF;}
a:hover img{opacity:0.8;}

html,body{width:100%; height:100%;}
html {
	position:relative;
	min-height:100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
@font-face {
	font-family: 'AozoraMinchoLight';
	src: url(AozoraMinchoLight.ttf);
}
body {
	color:RGBA(252, 252, 228, 0.8);
	background:url(../img/slide_1.jpg) center center no-repeat fixed;
	background-size:cover;
	font-size:13px;
	font-size:1.3rem;
	letter-spacing:0.2em;
	line-height:170%;
	font-family:'AozoraMinchoLight','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;
	padding:30px;
	position:relative;
}
#container{
	position: relative;
	min-width: cacl(100vw - 60px);
	min-height: calc(100vh - 60px);
	border:2px solid RGBA(252, 252, 228, 0.8);
	padding:28px;
	margin:auto;
	overflow:hidden;
}

header{
	font-family:'Yantramanav', sans-serif,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;
	letter-spacing:0em;
	display:block;
	}
	header #title{margin:30px 20px; display:block; float:left; font-size:70px; font-size:7.0rem; color:RGBA(252, 252, 228, 0.8); text-decoration:none;}

	header nav{float:right; margin-right:20px; text-align:center;}
	nav ul{text-align:center;}
	nav li{display:inline-block; margin-left:30px; color:#000;}
			nav li a{color:RGBA(252, 252, 228, 0.8); text-decoration:none; font-size:30px; font-size:3.0rem; line-height:1em; display:block;}
			nav li:hover{border-bottom:3px solid #FFF;}
			nav li.active{border-bottom:3px solid RGBA(252, 252, 228, 0.8);}
			nav li.active a{color:RGBA(252, 252, 228, 0.8)!important; cursor:default;}

footer{
	width:100%;
	margin:0 auto;
	font-size:12px;
	font-size:1.2rem;
	font-family:'Yantramanav', sans-serif,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;
	text-align:center;
	display:block;
	letter-spacing:0.1em;
}

/*  top  */
#top_menu{margin:120px auto; width:800px;}
	#top_menu li{display:block; float:left; margin-left:35px;}
	#top_menu li:first-child{margin-left:0;}
		#top_menu li a{display:block; text-align:center; text-decoration:none; font-size:30px; font-size:3.0rem; font-family:'Yantramanav', sans-serif,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;}
			#top_menu li a img{background:#888; width:240px; height:450px; margin-bottom:10px; border:1px solid RGBA(252, 252, 228, 0.8);}

#whatsnew{
	clear:both;
	margin:0 auto;
	padding:50px 0 30px;
	font-size:1.4rem;
	text-align:center;
	width:650px;
}
#whatsnew img{
	margin:0 20px 10px;
	display:inline-block;
	vertical-align:top;
}
#whatsnew div{
	display:inline-block;
	vertical-align:top;
}
#whatsnew span{
	margin-right: 10px;
	border:1px solid RGBA(252, 252, 228, 0.8);
	padding:5px;
	line-height:5rem;
}

/*  profile  */
#p_profile .prof,
#p_profile .state{color:#FCFCE0; font-size:1.5rem; width:820px; margin:50px auto; overflow:visible;}
#p_profile h2{font-size:25px; font-size:2.5rem; overflow:hidden; text-align:center; clear:both; padding:90px 0;}
	#p_profile h2 ruby{letter-spacing:0.3em; padding:3px 0;}
#p_profile h3{
	font-size:1.5rem;
	font-family:'Yantramanav', sans-serif, 'AozoraMinchoLight', 'Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;
	line-height:200%;
	border-bottom:3px dotted RGBA(252, 252, 228, 0.6);
	overflow:hidden;
	letter-spacing:4px;
	text-align:center;
	clear:both;
	padding:45px 0 10px;
}
#p_profile table{
	margin-top:10px;
}
#p_profile h3 span{font-size:3.5rem; display:block;	letter-spacing:2px;}
#p_profile th,
#p_profile td{padding:0; vertical-align:top; text-align:left; padding:3px 10px;}
#p_profile th{width:120px; white-space:nowrap; word-break:keep-all;}
#p_profile td{}
#p_profile .state p{ margin: 20px 0;}

#p_profile dt,
#p_profile dd,
#p_profile p{font-size:1.5rem;}
#p_profile ul{list-style:circle; margin:10px 0;}
#p_profile li{margin-left:20px;}

.state .right{
	float:right;
	padding:5px 0 5px 10px;
}
.state .left{
	float:left;
	padding:5px 10px 5px 0;
}

/*  works  */
nav ul.wmenu{margin-top:30px;}
	nav ul.wmenu li{color:RGBA(252, 252, 228, 0.8); padding:10px 2px 5px; margin-left:20px; font-size:22px; font-size:2.2rem; cursor:pointer;}
	nav ul.wmenu li.active{border-bottom:2px solid RGBA(252, 252, 228, 0.8); cursor:default;}
	nav ul.wmenu li.active:hover{border-bottom:2px solid RGBA(252, 252, 228, 0.8);}
	nav ul.wmenu li.active:hover{color:RGBA(252, 252, 228, 0.8)!important;}
	nav ul.wmenu li:hover{border-bottom:2px solid #FFF; color:#FFF;}
	
#p_works .box{margin:50px 20px; text-align: center;}
	#p_works .box a{width:198px; height:198px; display:inline-block; border:2px solid RGBA(252, 252, 228, 0.8); overflow:hidden; margin:9px; position:relative;}
		#p_works .box a img{margin: -250px auto auto -326px; position:absolute; top:50%; left:50%;}
		#p_works .box a.hide{display:none;}

.drawings,
.performances{display:none;}

/*  contact  */
#p_contact{}
#p_contact .box{color:#FCFCE0; margin:50px auto; text-align:center;}

#p_contact form{text-align:center; margin:40px auto;}
#p_contact table{width:700px; margin:0 auto;}
#p_contact th,
#p_contact td{padding:10px 5px; vertical-align:top;}
#p_contact th{text-align:right;}
#p_contact td{text-align:left;}
#p_contact td span{font-size:12px; font-size:1.2rem;}

#p_contact input[type="text"],
#p_contact textarea{width:400px; padding:5px; font-size:13px; font-size:1.3rem; background:#FCFCE0; border:2px solid RGBA(252, 252, 228, 0.8);}
#p_contact input[type="text"]{margin-right:7px;}
	#p_contact td.sh input[type="text"]{width:200px;}
#p_contact textarea{height:14em; margin-right:7px;}
#p_contact label{cursor:pointer; margin-right:17px;}
#p_contact input[type="checkbox"]{margin-right:5px;}
#p_contact .btn{text-align:center;}
#p_contact input[type="button"],
#p_contact input[type="submit"]{
	color:#FCFCE0;
	font-weight:bold;
	font-family:'AozoraMinchoLight','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo,'メイリオ', sans-serif;
	font-size:13px;
	font-size:1.3rem;
	background:#000;
	border:2px solid #FCFCE0;
	padding:10px 15px;
	margin:20px auto;
	letter-spacing:0.25em;
	cursor:pointer;
	}
	#p_contact input[type="button"]:hover,
	#p_contact input[type="submit"]:hover{color:#333; background:#FCFCE0;}

.box0{border-radius:0; background:rgba(0,0,0,0.0); position:absolute; top:0px; left:0px;}

@media screen and (max-width: 982px){/* スマホ用CSS */
	body{padding:0;}
	#container{
		margin:0 auto;
		padding:40px 0;
		min-width:800px;
		min-height:100%;
		height:auto;
		border:none;
	}
	header #title{margin:30px 0 0; float:none; text-align:center; line-height:7rem;}
	header nav{float:none; clear:both; margin:50px auto 0; text-align:center;}
		nav ul{text-align:center;}
			nav li{margin:0 15px;}
				header nav li a{letter-spacing:0.1em;}
	#top_menu{width:670px;}
		#top_menu li{ margin-left:30px;}
			#top_menu li a{font-size:28px; font-size:2.8rem;}
				#top_menu li a img{width:200px; height:400px;}
	#p_profile .prof,
	#p_profile .state{width:720px;}
	#p_works .box a{width:220px; height:220px; margin:10px;}
	footer{margin-top:-25px;}
	nav ul.wmenu{text-align:center;}
}
@media screen and (min-width: 982px) and (max-width: 1210px){
	header #title{float:none; text-align:center;}
	header nav{float:none; clear:both; margin:70px auto 0; text-align:center;}
	nav ul{text-align:center;}
	nav li{margin:0 15px;}
	nav ul.wmenu{text-align:center;}
}
@media screen and (min-width: 1210px) and (max-width: 1540px){
}
@media screen and (min-width: 1540px) and (max-width: 1700px){
	#p_works .box a{margin:10px;}
	#p_profile .prof,
	#p_profile .state{width:1050px;}
}
@media screen and (min-width: 1700px){
	#p_works .box a{margin:10px;}
	#p_profile .prof,
	#p_profile .state{width:1050px;}
}