html {
  visibility: hidden;
}

html.wf-active, html.loading-delay {
  visibility: visible;
}


body{
	font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
	margin: 0;
}


h3{
	font-size: 45px;
	font-family:interstate;
	margin-bottom: 30px;
	margin-top: 0;

}

h4{
	font-size: 20px;
	margin-top: 30px;
}

.border{
	margin-bottom: 130px;
	margin-top: 130px;
	width: 50%;
}

a,a:hover,a:focus{
	color: #000;
	text-decoration: none;
}

#white-area a,
#white-area a:hover,
#white-area a:focus{
	color: #444;
	text-decoration: none;
}



a:hover,a div:hover{
	cursor: pointer;
	opacity: 0.8;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}


span.under_bar{
	font-size: 48px;
    vertical-align: 9px;
    padding-left: 5px;
}


#contents-wrapper{
	width: 1260px;
	margin:0 auto;
	text-align: justify;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph;
    opacity: 0;
}



	#top{
		height: 780px;
		position: relative;
	}


		#title{
			margin-top: 70px;
		}


			#title p:first-child{
				font-size:120px;
				font-family:interstate;
				letter-spacing: 0.02em;
				margin:0;
				font-weight: bold;
			}

			#title p:first-child span{
				font-size:110px;
				font-family:interstate;
				font-weight: bold;
				vertical-align: 20px;
			}

			#title p:first-child span:first-child{
				padding: 8px;
				color:#00c2dd;
			}

			#title p:first-child span:last-child{
				padding: 0px;
				color:#f65c00;
			}

			#title p:nth-child(2) {
				font-size: 35px;
				margin-top: -20px;
				margin-left: 4px;
				font-weight: bold;
			}

		#lead1,#lead2{
			font-size: 18px;
			line-height: 2.0em;
			margin-left: 10px;
			margin-top: 40px;
			color:#444;
		}

		#sns{
			margin-left: 10px;		
		}


		#blue_and_cat{
			position: absolute;
			top: 11px;
		    right: 110px;
		}

		#sato{
			position: absolute;
			width: 550px;
			height:500px;
		    top: 240px;
		    right: 90px;
		}


	#now{
	}


		.now-block{
			float: left;
			width: 420px;
			margin: 0 auto;
		}

			.now-block img{
				border-radius: 100px;
			}

			.now-block div{
				text-align: center;
				margin: 0 auto;
			}

			.now-block p:first-of-type{
				font-size: 22px;
				text-align: center;
			}

			.now-block p:last-child{
				width: 330px;
				margin:0 auto;
			}


	#skill_profile{
		width: 1260px;
	}


		#skill,#profile{
		    text-align: center;
		    width: 630px;
		    float: right;

		}


			#skill{

			}

				#skill .black-span{
					background-color: #000;
				    color: #fff;
				    font-size: 20px;
				    padding: 1px 5px;	
				   	vertical-align: -30px;
				}


				#skill ul{
					text-align: left;
					font-size: 20px;
					margin-left: 150px;
				}


				#skill p{
					font-size: 15px;
					margin-top: 30px;
				}



			#profile{

			}

				#profile p{
					text-align: left;
					width: 490px;
					margin: 0 auto;
					margin-top: 50px;
					text-align: justify;
				    text-justify: inter-ideograph;
				    -ms-text-justify: inter-ideograph;
				    color: #444;
				}



				#profile .black-span{
					background-color: #000;
				    color: #fff;
				    font-size: 20px;
				    padding: 1px 5px;	
				}


			#profile table{
				text-align: left;
				width: 400px;
				margin: 0 auto;
				margin-bottom: 0px;
				margin-top: 45px;
			}


				#profile table tr{
					padding: 10px 0;
				}

				#profile table tr td:first-of-type{
					width: 120px;
					padding: 10px 0;
				}

				#profile table tr td:last-of-type{
				}

			#profile table+table{
				margin-top: 0;
			}


				#profile .moremoremore{
					font-size: 12px;
					text-align: center;
					background-color: #ddd;
				    color: #000;
				    padding: 3px 10px;	
				    cursor :pointer;
				    transition: all 0.5s;
				}

				#profile label{
				}

				#profile .moremoremore:hover{
					opacity: 0.8;
				}

				.more-box {
					margin-bottom: 15px;
				}

				/*チェックは隠す*/
				.more-box input {
				    display: none;
				}

				/*中身を非表示にしておく*/
				.more-box .more-show {
				    height: 0;
				    padding: 0;
				    overflow: hidden;
				    opacity: 0;
				    transition: 0.8s;
				}

				/*クリックで中身表示*/
				.more-css:checked + .more-show {
				    height: auto;
				    opacity: 1;
				}





		#projects{
			text-align:center;
		}



			.projects-box div{
				float: left;
				margin-top: 40px;
			}


			.projects-box div:first-of-type{
				width:350px;
				height:200px;
			}

			.projects-box div:last-of-type{
				margin-left: 50px;
				width: 850px;
				text-align: left;
				text-align: justify;
			    text-justify: inter-ideograph;
			    -ms-text-justify: inter-ideograph;
			}


			.projects-box div:last-of-type p:first-of-type{
				font-size: 25px;
			}

			.projects-box div:last-of-type p:first-of-type img{
				width: 75px;
				vertical-align: -3px;
				margin-left: 20px;
			}


			.projects-box div:last-of-type p:last-of-type{
				line-height: 1.8em;
				color: #444;
			}


		#movies{
			text-align: center;
			margin: 0 auto;
		}

			#movies > div{
				margin-top: 50px;
			}

			#movies > div > div:nth-child(1),
			#movies > div > div:nth-child(2),
			#movies > div > div:nth-child(3){
				float: left;
				margin-left: 30px;
			}

			#movies > div > div:nth-child(1){
				margin-left: 0;
			}

			#movies > div+div{
				margin-top: 20px;
			}


		#history{
			text-align: center;
			width: 1200px;
			margin: 0 auto;
		}



		#media{
			text-align: center;
			width: 1200px;
			margin: 0 auto;
		}



		.media-block{
			margin-top: 10px;
			text-align: justify;
		    text-justify: inter-ideograph;
		    -ms-text-justify: inter-ideograph;
		}


		.media-block div{
			float: left;
			padding: 8px 10px;

		}

		.media-block div:first-of-type{
			background-color: #eee;
			width: 120px;
			text-align: left;
		}

		.media-block div:last-of-type{
			width: 1030px;
			text-align: left;
			color:#444;
		}


#neko{
	line-height: 0px;
	width: 100%;
	text-align: right;
	margin-top: 80px;
}

#neko img{

	margin: 0;
	padding: 0;
}

#contact{
	position: relative;
	text-align: center;
	padding-top: 50px;
	padding-bottom:50px;
	background-color: #000;
	color:#fff;
	width: 100%;
}

	#contact form{
		margin: 0 auto;
		width: 800px;
	}

	#contact input,#contact textarea{
		border:0px;
		padding: 10px;
		font-size:17px;
		width: 100%;
		border: 1px solid;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin-top: 12px;
		letter-spacing: 0.02em;

	}

	#contact input:hover,#contact textarea:hover{
		cursor: pointer;
		background-color: #ddd;
	    -webkit-transition: all 0.4s;
	    -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	    -o-transition: all 0.4s;
	    transition: all 0.4s;
	}

	#contact input:focus{
	}



div#mail_check,div#send{
	margin: 0 auto;
	margin-bottom: 100px;
	margin-top: 100px;
	width: 600px;
}

#mail_check h2{

}

#mail_check table{
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

	 #mail_check tr td{
	 	border-top:1px solid #fff;
	 	padding: 15px 0;
	 }

	 #mail_check tr:hover{
	 	background-color: #222;
	    -webkit-transition: all 0.2s;
	    -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	    -o-transition: all 0.2s;
	    transition: all 0.2s;
	 }

	 #mail_check tr td:first-child{
	 	padding-left: 10px;
	 	width: 150px;
	 	padding-right:20px;
	 }

	 #mail_check tr:last-child td{
	 	border-bottom:1px solid #fff;
	 }


	 #mail_check button+button{
	 	margin-left: 15px;
	}

button {
    display: inline;
    font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
    background-color: #fff;
    color: #333;
    padding: 10px 40px;
    font-size: 17px;
    border: 1px solid #333;
    margin: 0 auto;
    margin-top: 20px;
    letter-spacing: 0.06em;
}


button:hover{
	background-color:#333;
	cursor: pointer;
	color:#fff;
	border:1px solid #fff;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}



div#mail_check,div#send{
	margin: 0 auto;
	margin-bottom: 100px;
	margin-top: 100px;
	width: 50%;
	text-align: center;
	color:#fff;

}

#mail_check h2{

}

#mail_check table{
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

	 #mail_check tr td{
	 	border-top:1px solid #fff;
	 	padding: 15px 0;
	 }

	 #mail_check tr:hover{
	 	background-color: #222;
	    -webkit-transition: all 0.2s;
	    -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	    -o-transition: all 0.2s;
	    transition: all 0.2s;
	 }

	 #mail_check tr td:first-child{
	 	padding-left: 10px;
	 	width: 150px;
	 	padding-right:20px;
	 }

	 #mail_check tr:last-child td{
	 	border-bottom:1px solid #fff;
	 }


	 #mail_check button+button{
	 	margin-left: 15px;
	}



#copy-rights{
	margin-top: 50px;
	margin-right: 20px;
	text-align: right;
	font-size: 12px;
	color:#eee;
}



.when-pc-view{
	display: inline;
}

.when-sp-view{
	display: none;
}





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





	body{
	}

	h3{
		font-size: 30px;
		margin-bottom: 30px;
		margin-top: 0;

	}


	span.under_bar{
		font-size: 35px;
	    vertical-align: 7px;
	    padding-left: 3px;
	}


	.border{
		margin-bottom: 50px;
		margin-top: 50px;
		width: 100%;
	}


	#contents-wrapper{
		width: 96%;
		margin: 0 auto;
	}



	#top{
		margin-top: 0px;
		width: 96%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
	 	-webkit-justify-content: center;
	 	-webkit-flex-direction: column;
	 	-ms-flex-direction: column;
	 	flex-direction: column;
	 	margin:0 auto;
	}

		#sato{
			position: static;
			height:50px;
		    top: auto;
		    right: 0;
		    margin-left: -5%;
		}


		#lead1{
			font-size: 13px;
			margin-top: 55px;
			margin-left: 1%;
			position: relative;
			color: #444;
			line-height: 2em;
			width: 99%;
		}


		#lead2{
			margin-top: 20px;
		}

		#title {
		    margin-top: 0px;
		    position: relative;
		    width: 99%;
		}


			#title p:first-child{
				font-size: 11.5vw;
				letter-spacing: -0.07em;
			}

			#title p:first-child span {
			    font-size: 50px;
			    vertical-align: 10px;
			}

			#title p:nth-child(2) {
			    font-size: 6.0vw;
			    letter-spacing: -0.15em;
			    margin-top: -12px;
			    margin-left: 0px;
			}


		#sns{
			position: absolute;
			margin-left: 1%;
			font-size:12px;
		}

			#sns img{
				width: 30%;
				padding: 0%;
			}

			#sns img+img{
				margin-left: 5%;
			}

		#blue_and_cat{
			top: -85px;
		    right: 0px;
		    text-align: center;
		}


		#scroll{
			opacity: 0.3;
		}

	.now-block{
		width: 100%;
		margin-top: 100px;
	}

		.now-block img{
			width: 30%;
		}

		.now-block+.now-block{
			margin-top: 40px;
		}

		.now-block p:first-of-type{
			font-size: 20px;
			margin: 10px;
			letter-spacing: -0.1em;
		}

		.now-block p:last-child {
		    width: 70%;
		    font-size: 13px;
		    line-height: 1.8em;
		    color: #444;
		}


	.now-block:nth-child(3){
		margin-bottom: 20px;
	}



	#skill_profile {
	    width: 100%;
	}

	#skill{
		width: 100%;
	}

		#skill ul {
		    margin-left: auto;
		    font-size: 18px;
		    margin-left: 2%;
		}

		#skill .black-span{
		    font-size: 16px;
		}

		#skill p {
		    font-size: 15px;
		    margin-top: 15px;
		}

	#profile{
		width: 100%;
		margin-bottom: 20px;
	}


		#profile p {
		    width: 90%;
		    margin-top: 20px;
		    font-size: 14px;
		    line-height: 1.8em;
		}

		#profile .black-span{
		    font-size: 16px;	
		}


		#profile table{
			width: 90%;
			margin-top: 45px;
		}


			#profile table tr{
				padding: 10px 0;
			}

			#profile table tr td:first-of-type{
				width: 100px;
				padding: 10px 0;
			}

			#profile table tr td:last-of-type{
				font-size: 13px;
			}

		#profile table+table{
			margin-top: 0;
		}


	#projects{
		text-align:center;
	}


			.projects-box div{
				float: none;
				margin-top: 60px;
			}

			.projects-box div > img{
				width: 96%;
			}




			.projects-box div:first-of-type {
			    width: 105%;
			    height: auto;
			    margin-left: -5%;
			}

			.projects-box div:last-of-type {
				width: 90%;
				margin: 0 auto;
			}



			.projects-box div:last-of-type p:first-of-type{
				font-size: 22px;
				margin: 10px 0;
				position: relative;
			}

			.projects-box div:last-of-type p:first-of-type img{
				width: 75px;
				top: 5px;
				right: 0;
				position: absolute;
			}

			.projects-box div:last-of-type p:last-of-type{
				font-size: 13px;
				color: #444;
				line-height: 1.8em;
			}



		#movies{
		}

			#movies > div{
				margin-top: 50px;
			}

			#movies > div > div:nth-child(1),
			#movies > div > div:nth-child(2),
			#movies > div > div:nth-child(3){
				float: none;
				margin-left: 0px;
			}

			#movies iframe{
				width: 100%;
			}

			#movies > div+div{
				margin-top: auto;
			}








	#media {
	    width: 100%;
		text-align: center;
	}






		.media-block{
			margin-top: 20px;
		}


		.media-block div{
			float: none;
			padding: 8px 10px;

		}

		.media-block div:first-of-type{
			font-family:interstate;
			font-weight: bold;
			width: 130px;
			margin-left: -2%;
		}

		.media-block div:last-of-type {
		    width: 90%;
		    margin-left: 3%;
		    text-align: left;
		    font-size: 14px;
		}





	#neko{
		line-height: 0px;
		width: 100%;
		text-align: right;
		margin-top: 30px;
	}

	#neko img{
		width: 50%;
		margin: 0;
		padding: 0;
	}







	#contact form {

	}







#contact{
	margin-top: 0;
}

	#contact p{
		font-size: 14px;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	#contact form{
	    margin: 0 auto;
	    width: 100%;
	}

	#contact input,#contact textarea{
		border:0px;
		padding: 10px;
		font-size:14px;
		width: 90%;
		border: 1px solid;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin-top: 12px;
		letter-spacing: 0.02em;

	}

	#contact input:hover,#contact textarea:hover{
		cursor: pointer;
		background-color: #ddd;
	    -webkit-transition: all 0.4s;
	    -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	    -o-transition: all 0.4s;
	    transition: all 0.4s;
	}

	#contact input:focus{
	}




	button {
	    font-size: 14px;
	}


	button:hover{
	}



	#mail_check h4{

	}

	#mail_check table{
		margin-top: 30px;
		margin-bottom: 30px;
		font-size:14px;
	}

		 #mail_check tr td{
		 }

		 #mail_check tr:hover{

		 }

		 #mail_check tr td:first-child{
		 	padding-left: 10px;
		 	width: 60px;
		 	padding-right:20px;
		 }

		 #mail_check tr:last-child td{
		 	border-bottom:1px solid #fff;
		 }


		 #mail_check button+button{
		 	margin-left: 15px;
		}

	div#mail_check,div#send{
		margin: 0 auto;
		margin-bottom: 10px;
		margin-top: 10px;
		width: 100%;
	}

	div#send{
		margin-bottom: 50px;
		margin-top: 10px
	}



	.when-pc-view{
		display: none;
	}

	.when-sp-view{
		display: inline;
	}
















}