@charset "utf-8";
/*  c o m m o n  */
html,body{
	font-family: "Noto Sans Japanese","spinnaker",sans-serif;
	height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    border: none;
    margin:0 ;
    padding: 0;
    color: #303030;
	width: 100%;
	background-color: #f1f1f1;
	background-image: url("../img/ironpatern.png");
	font-weight: 300;
}
a{
	color:#292929;
	text-decoration: none;
}
#wrapper {
    overflow: hidden;
    position: relative;
    height: auto !important;
    min-height: 100%;
    width: 92%;
    background-color: #ffffff;
    margin: 0 auto;
}
.section{
	margin: 0 auto;
	text-align: center;
	height: 100%;
}
.section img{
	width: 100%;
}
/* m e n u */
nav .sns, nav .copyright{
	position: fixed;
	top: 45%;
	padding-left: 10px;
	text-transform: none;
}
nav{
	font-family: "spinnaker",sans-serif;
	text-transform: uppercase;
	position: fixed;
	height: 80px;
	top: 0;
	left: 4%;
	width: 92%;
	text-align: center;
}
nav>ul{
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
}
nav>ul>li:not(:first-child){
	width: 12%;
	display: inline;
	padding: 0 2%;
}
nav>ul>li:first-child{
	font-size: 18px;
	padding-bottom: 10px;
	letter-spacing: 3px;
}
nav>ul>li>a{
	font-size: 14px;
}
nav>ul>li.active a{
	position: relative;
	font-size: 15px;
}
nav .copyright{
	top: auto;
	bottom: 20px;
	right: 0;
	padding-right: 8%;
	text-align: right;
	font-size: .8rem;
}
nav>ul>li.active a:before{
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-top: 1px solid #f7f4f4;
	border-right: 1px solid #f7f4f4;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
nav>ul>li.active a:before{
	right: auto;
	top: auto;
	left: -18px;
	bottom: 6px;
	border-top: 1px solid #303030;
	border-right: 1px solid #303030;
};
	/* transition */
	nav a{
		transition: all .5s ease;
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
	}
	nav li, .sns, .mail{
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
	}
	/* 初期 */
	nav li, .sns, .mail, h2{
		opacity:0;
	}
	.display, .display li{opacity: 1 !important;}
	.undisplay{opacity: 0 !important;}
	/* hover */
		nav a:hover{
			color: #003300;
		}

/* f i r s t */
h1{
	font-family: "spinnaker",sans-serif;
	font-size: 20px;
	letter-spacing: 5px;
	text-align: center;
	word-wrap:break-word;
	padding-bottom:2%;
}
.boxslider2{
	display: none;
}
/* g a l l e r y */
.gallery_td{
	text-align: center;
	border-right: solid 25px #ffffff;
	padding: 20px 20px 10px 20px;
	font-size: 17px;
	letter-spacing: 8px;
	font-weight: 100;
  }
.gallery>a{
	color: #424242;
}
.gallery_line{
	width: 200px !important;
}

.gallery_line2{
	width: 150px !important;
}

/* p r o f i l e  &  w o r k s */
h2{
	font-size: 18px;
	letter-spacing: 0.5em;
	padding-right: 50px;
	float:left;
}
h3{
	font-family: "spinnaker",sans-serif;
	letter-spacing: 2px;
	padding: 20px 0 20px 0;
	font-size: 16px;
}
table{
	clear: both;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin-bottom:20px;
}

td{
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 30px;
	font-size: 14px;
}
.date{
	padding-right:20px;
	vertical-align: top;
}
.anime, .more{
	margin-top: 20px;
	font-family: "spinnaker",sans-serif;
    font-size:14px;
    letter-spacing: 3px;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 8px;
    border:1px solid #acacac;
   border-radius: 15px;        /* CSS3草案 */  
    -webkit-border-radius: 15px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 15px;   /* Firefox用 */ 
}

/* p r o f i l e */
.kitsune{
	width: 90px !important;
}
.profile{
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 0px;
}
.title{
	width: 45px;
	opacity: 0.8;
	padding-right: 15px;
}
.more{
	width: 200px;
}
#biography{
  padding:10px 30px 30px 25px;
}
/* w o r k s */
.title2{
	width: 60px;
	opacity: 0.8;
	padding-right: 25px;
}
.anime{
	width: 240px;
}
.name{
	padding:0 0 0 30px;
	font-size: 12px;
}
#animation{
  padding:0 30px 30px 20px;
}
/* c o n t a c t */
.meishi{
   font-family: "spinnaker",sans-serif;
  letter-spacing: 3px;
  padding:30px 0;
  margin:20px auto;
}
.contact{
	font-size: 14px;
	padding: 10px;
}
.contact_img{
	width: 80px !important;
	padding-top: 15px;
	text-align: right;
}

/* s m a r t p h o n e */
@media all and (max-width:640px){
h1{
	position: absolute;
	top: 20px;
	left: 14%;
	padding-bottom: 0px;
}
/* m e n u */
nav{
	height: 65px;
}
nav>ul{
	padding-top: 5px;
}
nav>ul>li:first-child{
	letter-spacing: 1px;
	padding-bottom: 5px;
}
nav>ul>li.active a:before{
	left: -10px;
}
nav .sns{
	top: auto;
	bottom: 0px;
	right: 0;
	padding-right: 8%;
	text-align: right;
	font-size: .8rem;
}
.sns>li{
display: inline !important;
padding-left: 10px;
}
nav .copyright{
	bottom: 30px;
	right: 5px;
}
/* f i r s t */
.boxslider{
	display: none;
}
.boxslider2{
	display: block;
}
/* g a l l e r y */
.gallery_td{
	display: list-item;
	border: none;
	list-style-type: none;
	padding-top: 5px;
	text-align: center;
}
.gallery_line2{
	width: 200px !important;
}
/* p r o f i l e  &  w o r k s */
table{
	letter-spacing: 0px;
}
td{
	padding-left: 0;
	padding-right: 0;
}
.profile{
	padding-left: 5px;
	padding-right: 5px;
}
.works{
	padding-left: 15px;
	padding-right: 5px;
}
#biography, #animation{
  padding:0px;
}
/* p r o f i l e */
.kitsune{
	display: none;
}
.date{
	padding-right: 5px;
	width: 70px;
}
.title{
	display: none;
}
/* w o r k s */
.title2{
	display: none;
}
/* c o n t a c t */
.meishi{
  letter-spacing: 0px;
}
}