@charset "UTF-8";
/* CSS Document */
*{
	color:#333333;
}

body{
	-webkit-text-size-adjust:100%;
}
/*--------表紙-------*/
#usagi-top{
      /*display: none;*/
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
	  background-image:url(../images/top-base.jpg);
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
}
.top-images-box {
  width: 1100px;
  height: 700px;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  margin: auto;
}
.top-images{
  /*opacity: 0;*/
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  opacity: -1;
  animation: topFade 20s linear;
}
.top-img1 {
  background: url(../images/top-1.png);
  width: 775px;
  height: 672px;
  top: 0;
  bottom: 0;
  animation-delay: 1s;
}
.top-img2 {
  background: url(../images/top-2.png);
  width: 1050px;
  height: 669px;
  top: 30px;
  animation-delay: 2s;
}
.top-img3 {
  background: url(../images/top-3.png);
  width: 216px;
  height: 188px;
  top: 110px;
  animation: topFade 12s linear 2.8s;
}
@keyframes topFade {
  0% {opacity: 0;}
  10% {opacity: 1;}
  100% {opacity: 1;}
}
#wrap{
	width:100%;
	background-image:url(../images/bg.webp);
	background-repeat:repeat-y repeat-x;
	overflow:hidden;
}

#mainVisual{
	width:1200px;
}

#mainVisual img{
	width:801px;
	display:block;
	margin:0 auto;
}
/*--------ナビ-------*/
#naviWrap{
  position:relative;
}
#naviWrap img{
  width:100%;
}

.navi {
  font-family:'Poiret One', cursive;
  font-size:15px;
  font-weight:100;
  text-align: center;
  /*color:#fff;*/
}
.navi * {
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
ul.navi{
  position:absolute;
  top:20px;
  bottom:0;
  right:0;
  left:0;
}
.navi li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.5em;
  overflow: hidden;
  color:#fff;
}
.navi a {
  padding: 0.3em 0;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  display: inline-block;
  margin: 0;
  text-decoration: none;
}
.navi a:before,
.navi a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.nav1 a:before,.nav2 a:before,.nav3 a:before,.nav4 a:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
}
.nav1 a:before{
    background-color: #ffffff;
}
.nav2 a:before{
    background-color: #ffffff;
}
.nav3 a:before{
    background-color: #ffffff;
}
.nav4 a:before{
    background-color: #ffffff;
}
.navi a:after {
  padding: 0.3em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  color: #fff;
  /*white-space: nowrap;*/
}
.navi li:hover a{
  transform: translateY(100%);
}
/*--------#content-------*/
#content{
	width:1200px;
	margin:0 auto;
}
#content h2 img, #content h2 + img {
	display:block;
	margin:70px auto 40px;
}
/*--------#skillsStats-------*/
.box-1 {
	overflow:hidden;
	width:1000px;
	margin:0 auto;
}
#skillsStats{
	width:1000PX;
	margin:0 auto;
	overflow:hidden;
}
#skillsStats li{
	width:150px;
	float:left;
  list-style: none;
}
#skillIcon{
	width:150px;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}
#skillIcon img{
	margin-top:10px;
	margin-bottom:10px;
}
#skillIcon:hover{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
}
li.wowbounce{
	text-align:center;
	margin-right:16px;
}
li.wowbounce:first-child{
	margin-left:10px;
}
li.wowbounce:last-child{
	margin-right:0;
}
.title{
	/*font-family:'Poiret One', cursive;*/
	font-family:'Khand', sans-serif;
	font-weight:900;
}
#skill1,#skill2,#skill3,#skill4,#skill5,#skill6{
	margin:0 auto;
}
.text{
	display:block;
	width:130px;
	font-size:12px;
	font-family:'Noto Sans JP', sans-serif;
	font-weight:300;
	margin:10px auto 10px;
	text-align:left;
}
/*--------#workStyle-------*/
#workStyle{
	width:960px;
	margin:0 auto;
}
.box{
	width:1300px;
	height:425px;
	overflow:hidden;
	margin-top:50px;
}
.box figure{
	margin-right:30px;
	float:left;
	width:300px;
	height:425px;
	background-image:url(../images/work-base.jpg);
	position:relative;
}
/*.box figure img:hover{
	transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-o-transform:scale(1.05);
	-ms-transform:scale(1.05);
}*/
.box figure:last-child{
	margin-right:0;
}
.ws-img{
	position:absolute;
	right:22px;
	bottom:31px;
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s linear;
	-webkit-transition:transform 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}
.fade {
	opacity: 1;
	transform: scale(1);
}
figure {
  font-family:'Khand', 'Noto Sans JP',sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  width: 100%;
  color: #333333;
  text-align: left;
  background-color: #07090c;
  font-size: 25px;
  -webkit-perspective: 50em;
  perspective: 50em;
  /*transition: 1s;*/
}
figure * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure img {
  opacity: 1;
  /*width: 100%;*/
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  transition: 1s;
}
figure figcaption {
  position: absolute;
  right: 22px;
  bottom: 31px;
  width: 256px;
  height: 363px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  z-index: 1;
  opacity: 0;
  padding: 20px 30px;
}
.box-img-flyer {
	background: rgba(0, 191, 255, .8);
}
.box-img-logo {
	background: rgba(255, 255, 0, .8);
}
figure h3,figure p {
  line-height: 1.5em;
}
figure h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure p {
  font-family:'Noto Sans JP',sans-serif;
  font-size: 0.6em;
  font-weight: 300;
  margin: 0 0 15px;
}
figure .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure .read-more2 {
  border: 2px solid #333333;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #333333;
  display: inline-block;
}
figure .read-more:hover {
  background-color: #ffffff;
  color: #333333;
}
figure .read-more2:hover {
  background-color: #333333;
  color: #ffffff;
}
figure:hover img {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  /*opacity: 0;*/
}
figure:hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure {
	margin: 0;
}
/*--------#profile-------*/
#profile{
	width:1200px;
	/*overflow:hidden;*/
}
.midashiText{
	display:block;
	margin:0 auto;
	width:900px;
	font-size:16px;
	font-family:'Noto Sans JP', sans-serif;
	font-weight:300;
}
.profilePhoto{
	width:900px;
	overflow:hidden;
	margin:50px auto 0;
	font-family:'Noto Sans JP', sans-serif;
	font-weight:300;
}
.profilePhoto img{
	float:left;
	width:300px;
	margin-right:50px;
	margin-left:20px;
	border-right:1px solid #333333;
	padding-right:40px;
}
.profilePhoto h4{
	font-family:'Noto Sans JP', sans-serif;
	font-weight:300;
	font-size:24px;
	margin-top:30px;
}

.profilePhoto h4 span{
	font-size:14px;
	font-weight:300;
}

.profilePhoto p{
	width:480px;
	float:left;
  font-family:'Noto Sans JP', sans-serif;
  font-size:16px;
	border-top:1px solid #333333;
	padding-top:10px;
}

/*--------#contact-------*/
#contactWrap{
	background-image:url(../images/black-pattern-by-dream-theme.png);
	background-repeat:repeat-x;
	height:300px;
  width:100%;
  margin-top:40px;
}
#contact h2 {
  margin:0 auto;
  padding-top:30px;
  width:500px;
}

#contact a img{
	display:block;
	margin:40px auto;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}

#contact a img:hover{
	transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-o-transform:scale(1.05);
	-ms-transform:scale(1.05);
}

.top-btn {
  position: fixed;
  right: 3%;
  bottom: 3%;
  cursor: pointer;
}

/*--------下層ページ-------*/

#underWrap{
	/*width:100%;*/
	height:1000px;
	background-image:url(../images/black-pattern-by-dream-theme.png);
	/*background-repeat:repeat-x repeat-y;*/
	border-top:60px solid rgba(255, 255, 0, .8);
	position:relative
}

#underWrap p{
  position:absolute;
  top:-45px;
  left:150px;
}

h1{
	position:absolute;
	top:-45px;
	right:150px;
}

#underContent{
	width:1200px;
	margin:50px auto;
}

.workImg{
	width:620px;
	float: left;
}

.workImg img{
	margin-left:50px;
	margin-right:55px;
}
	

table{
	width:425px;
	height:835px;
	margin-right:50px;
	background-color:#fff;
	float:right;
}

tr{
  height:24px;
}

th:first-child{
  padding-top:20px;
}
	

td{
  display:block;
  width:350px;
  margin:0 auto;
  font-family:'Noto Sans JP', sans-serif;
	font-weight:300;
	font-size:14px;
}

td a{
  text-decoration:none;
}

td a:hover{
  color:rgba(255, 255, 0, .8);
}

#underWrap2{
	/*width:100%;*/
	height:1000px;
	background-image:url(../images/black-pattern-by-dream-theme.png);
	/*background-repeat:repeat-x repeat-y;*/
	border-top:60px solid rgba(0, 191, 255, .8);
	position:relative
}

#underWrap2 p{
  position:absolute;
  top:-45px;
  left:150px;
}

#underWrap3{
	/*width:100%;*/
	height:1000px;
	background-image:url(../images/black-pattern-by-dream-theme.png);
	/*background-repeat:repeat-x repeat-y;*/
	border-top:60px solid rgba(249, 11, 67, .8);
	position:relative
}

#underWrap3 p{
  position:absolute;
  top:-45px;
  left:150px;
}

td span{
	font-size:18px;
}

td span a:hover{
	color:rgba(249, 11, 67, .8);
}