z@charset "utf-8";
/* CSS Document */
/*ローダー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 5rem;
  width: 5rem;

  -webkit-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba(0, 0, 0, 0.19999999999999996);
}


/*メイン画像＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html{
	box-sizing:border-box;
}
#maicPict{
	width:100%;
	height:auto;
	position:relative;
}
.main{
	width:100%;
	/*display:none;*/
	opacity:0;
}
h1.center{
	font-family: 'Lato', sans-serif;
	font-size:22px;
	position:absolute;
	left:7%;
	top:15%;
	display:none;
}

article h1{
	font-family: 'Lato', sans-serif;
	font-size:70px;
	text-align:center;
	padding-top:100px;
	padding-bottom:100px;
	opacity:0;
}
.main1st{
	text-align:center;
}
figure{
	opacity:0;
}
figure img {
	border-radius:50%;
	border:#CCC 8px solid;
}
figure:hover img {
	-webkit-transform: rotate(15deg) scale(1);
  transform: rotate(15deg) scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity:0.5;
  }
a{
	text-decoration:none;
}
img.corporeit{
	width:70%;
	height:auto;
	border-radius:50%;
	padding:0px 0 0px 0 ;
	margin-top:10%;
}
figcaption{
	font-family: 'Lato', sans-serif;
	font-size:40px;
	color:black;
}

article section p{
	font-size:25px;
	padding-left:10%;
	padding-top:5%;
	padding-right:10%;
}
p{
	text-align:center;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#666;
}
.contentswrapper{
	width:100%;
	height:100%;
	/*display:table;
	table-layout:fixed;*/
	display:flex;

}
.moviearea{
	width:50%;
	height:auto;
	box-sizing: border-box;
	/*display:table-cell;*/
	overflow:hidden;
}
#video{
	width:188%;
	background:url(../images/nature1.mp4);
	background-size:cover;
	z-index:-10;
	vertical-align:bottom;
}
.contentright{
	width:50%;
	box-sizing: border-box
}
	
.toppicture{
	width:100%;
	float:left;
	/*display:table-cell;
*/}
.toppicture img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}
/*.flex{
	/*display:flex;*/
/*}*/
.textarea{
	width:50%;
	float:left;
	background-color:#333333;
	color:white;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 	align-items: center; /* 縦方向中央揃え */
 	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 	justify-content: center; /* 横方向中央揃え */
	line-height:1577%;
	vertical-align:bottom;
	overflow:hidden;

}
.textarea:hover{
	background-image: url(../images/graffitiare-min.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	transition: all .3s ease-out;
}
.textarea img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	
}
.textarea img:hover{
	opacity:0.05;
	transition: all .3s ease-out;
}
.bottompicture{
	width:50%;
	float:right;
	/*display:table-cell;*/
	vertical-align:bottom;
}
.bottompicture:hover{
	background: url(../images/vintagewood-min.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	transition: all .3s ease-out;
}
.bottompicture img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}
.bottompicture img:hover{
	opacity:0.05;
	transition: all .3s ease-out;
}
.bottombox{
	width:100%;
	display:flex;
}
.bottomleft{
	width:25%;
}
.bottomleft:hover{
	background: url(../images/sara-min.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	transition: all .3s ease-out;
}

.bottomleft img{
	width:100%;
}
.bottomleft img:hover{
	opacity:0.05;
	transition: all .3s ease-out;

}
.gryatext{
	width:25%;
}
.gryatext:hover{
	background: url(../images/jobs.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	transition: all .3s ease-out;
}

.gryatext img{
	width:100%;
}
.gryatext img:hover{
	opacity:0.05;
	transition: all .3s ease-out;
}
.middleright{
	width:25%;
}
.middleright:hover{
	background: url(../images/creative.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	transition: all .3s ease-out;
}
.middleright img{
	width:100%;
}
.middleright img:hover{
	opacity:0.05;
	transition: all .3s ease-out;
}
.bottomright{
	width:25%;
}
.bottomright:hover{
	background: url(../images/motokuross.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	transition: all .3s ease-out;
}
.bottomright img{
	width:100%;
}
.bottomright img:hover{
	opacity:0.05;
	transition: all .3s ease-out;
}
.skillwrap{
	padding:50px 0 50px 0;
	display:flex;
}
.skillwrap p{
	font-size:50px;
	padding-left:10%;
	padding-top:5%;
	padding-right:10%;
}
.scoreTop1{
	width:20%;
}
.scoreBottom1{
	width:70%;
	height:60px;
	background-color:#60F;
	margin-left:-150%;
}
.scoreBottom2{
	width:50%;
	height:60px;
	background-color:#60F;
}
.scoreBottom3{
	width:20%;
	height:60px;
	background-color:#60F;
}
.scoreBottom4{
	width:5%;
	height:60px;
	background-color:#60F;
}
.scoreBottom5{
	width:70%;
	height:60px;
	background-color:#F09;
}
.scoreBottom6{
	width:70%;
	height:60px;
	background-color:#F09;
}
.scoreBottom7{
	width:40%;
	height:60px;
	background-color:#F09;
}
section.contact p{
	font-family: 'Lato', sans-serif;
	font-size:30px;
	text-align:center;
}
.toppageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align:center;
  display:inline-block;
  z-index:9999;
  opacity:1;
}
i{
	display:block;
	text-align:center;
}
 
.toppageTop i {
	color:white;
	font-size:50px;
	text-align:center;
	position:absolute;
	top:6px;
	left:6px;
}

.toppageTop a {
  display: block;
  z-index: 999;
  padding: 30;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  background-color: #9FD6D2;
  color: #fff;
  font-size:6rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
.toppageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
footer small p{
	padding-top:200px;
	padding-bottom:80px;
	text-align:center;
}
.habilidades_contenedor {
	width: 100%;
}
h2{text-align:center;}

#codeconSkills {
font-size: 12px;
height: auto;
margin: 0 auto;
padding: 10px;
width: 80%;
}

.codeconSkillbar {
width: 90%;
height: 100px;
position: relative;
background: rgba(17, 17, 17, .3);
margin: 20px auto;
}
#codeconHTML {
width: 100%;
animation: Animate-HTML 4s;
-webkit-animation: Animate-HTML 4s;
-moz-animation: Animate-HTML 4s;
-o-animation: Animate-HTML 4s;
height: 100px;
position: absolute;
background-color: #ea8564;
}

/*フォーム======================================*/

#formWrap {
	width:90%;
	margin:0 auto;
}
#formWrap p{
	font-size:18px;
	padding-bottom:20px;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
	text-align:center;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
	margin:0 auto;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

@keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-webkit-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-moz-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-o-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}
#codeconCSS {
animation: Animate-CSS 5s;
-webkit-animation: Animate-CSS 5s;
-moz-animation: Animate-CSS 5s;
-o-animation: Animate-CSS 5s;
width: 70%;
height: 100px;
position: absolute;
background-color: #55a69f;
}
@keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-webkit-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-moz-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-o-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}
#codeconjQuery {
animation: Animate-jQuery 5s;
-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;
width: 50%;
height: 100px;
position: absolute;
background-color: #99856d;
}

.skillBar {
	width: 5%;
	height: 100px;
	position: absolute;
	background-color: transparent;
	transition: 3s;
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
} 

@keyframes Animate-jQuery {
from {
	width: 10px;
}
to {
	width: 50%}
}
@-webkit-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-moz-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-o-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
#codeconCakePHP {
	animation: Animate-CakePHP 5s;
	/*-webkit-animation: Animate-jQuery 5s;
	-moz-animation: Animate-jQuery 5s;
	-o-animation: Animate-jQuery 5s;*/
	width: 60%;
	height: 50px;
	position: absolute;
	background-color: #2f96b4;
}

@keyframes Animate-CakePHP {
from {
		width: 10px;
}
to {
		width: 60%
	}
}


.codeconSkillArea {
z-index: 1;
float: left;
//position: absolute;
margin-top: 15px;
margin-left: 15px;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
}
.PercentText {
z-index: 3;
position: relative;
padding-right: 15px;
margin-top: 15px;
float: right;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
}

/*PC用=================================================================*/
@media only screen and (min-width:960px){
#maicPict{
	width:100%;
	height:auto;
	position:relative;
	vertical-align:bottom;
}
.main{
	width:100%;
	/*display:none;*/
	opacity:0;
}
div h1.center{
	font-family: 'Lato', sans-serif;
	font-size:79px;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	display:none;
}
.contentWrapper{
	display:flex;
}
article h1{
	opacity:0;
}
p{
	text-align:center;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#666;
}
article section p{
	opacity:0;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
figure{
	opacity:0;
}
figure img {
	border-radius:50%;
	border:#CCC 8px solid;
}
figure:hover img {
	-webkit-transform: rotate(15deg) scale(1);
  transform: rotate(15deg) scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity:0.5;
  }
figcaption {
    font-family: 'Lato', sans-serif;
    font-size: 40px;
	color:black;
}
figure a{
	text-decoration:none;
	position: relative;
  display: inline-block;
  transition: .3s;
}
figure a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #F0C;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a:hover::after {
  width: 60%;
}
article section p {
    font-size: 30px;
    padding-left: 10%;
    padding-top: 5%;
    padding-right: 10%;
}
.skillwrap p {
    font-size: 30px;
    padding-left: 10%;
    padding-top: 5%;
    padding-right: 10%;
}
.contentWrapbottom{
	width:80%;
	margin:0 auto;
}
.habilidades_contenedor {
	width: 100%;
}
h2{text-align:center;}
#video{
	width:188%;
}

#codeconSkills {
font-size: 12px;
height: auto;
margin: 0 auto;
padding: 10px;
width: 80%;
}

.codeconSkillbar {
width: 90%;
height: 100px;
position: relative;
background: rgba(17, 17, 17, .3);
margin: 20px auto;
}
#codeconHTML {
width: 100%;
animation: Animate-HTML 4s;
-webkit-animation: Animate-HTML 4s;
-moz-animation: Animate-HTML 4s;
-o-animation: Animate-HTML 4s;
height: 100px;
position: absolute;
background-color: #ea8564;
}
.toppageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align:center;
  display:inline-block;
  z-index:9999;
  opacity:0;
}
i{
	display:block;
	text-align:center;
}

#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
#formWrap p{
	font-size:18px;
	padding-bottom:20px;
}

table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
	text-align:center;
}
table.formTable th{
	width:97%;
	font-weight:normal;
	background:#efefef;
	/*text-align:left;*/
}
p.error_messe{
	margin:5px 0;
	color:red;
}
.toppageTop i {
	color:white;
	font-size:50px;
	text-align:center;
	position:absolute;
	top:6px;
	left:6px;
}

.toppageTop a {
  display: block;
  z-index: 999;
  padding: 30;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  background-color: #9FD6D2;
  color: #fff;
  font-size:6rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
.toppageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
footer small p{
	padding-top:200px;
	padding-bottom:80px;
	text-align:center;
}
@keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-webkit-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-moz-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-o-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}
#codeconCSS {
animation: Animate-CSS 5s;
-webkit-animation: Animate-CSS 5s;
-moz-animation: Animate-CSS 5s;
-o-animation: Animate-CSS 5s;
width: 70%;
height: 100px;
position: absolute;
background-color: #55a69f;
}
@keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-webkit-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-moz-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-o-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}
#codeconjQuery {
animation: Animate-jQuery 5s;
-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;
width: 50%;
height: 100px;
position: absolute;
background-color: #99856d;
}

.skillBar {
	width: 5%;
	height: 100px;
	position: absolute;
	background-color: transparent;
	transition: 3s;
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
} 

@keyframes Animate-jQuery {
from {
	width: 10px;
}
to {
	width: 50%}
}
@-webkit-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-moz-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-o-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
#codeconCakePHP {
	animation: Animate-CakePHP 5s;
	/*-webkit-animation: Animate-jQuery 5s;
	-moz-animation: Animate-jQuery 5s;
	-o-animation: Animate-jQuery 5s;*/
	width: 60%;
	height: 50px;
	position: absolute;
	background-color: #2f96b4;
}

@keyframes Animate-CakePHP {
from {
		width: 10px;
}
to {
		width: 60%
	}
}
.codeconSkillArea {
z-index: 1;
float: left;
//position: absolute;
margin-top: 15px;
margin-left: 15px;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
}
.PercentText {
z-index: 3;
position: relative;
padding-right: 15px;
margin-top: 15px;
float: right;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
}


}