@charset "UTF-8";
/* CSS Document */


.Inner{
	display: block;
	width: 900px;
	margin: 0 auto;
}

/*loading*/


/*hero-image*/

.colomLeft{
	padding: 150px 0;
}
.colomLeft,.colomRight{
 width: 50%;
	
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 13px 20px;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #ffffff;
 border-radius: 10px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffffff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  width: 300px;
  word-wrap: break-word;
}

h1{
	font-size: 33px;
	font-weight:bold;
}

/*wave*/
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}


.gradient{
    background: linear-gradient(rgba(255,153,0,1),rgba(255,153,0,0));
    width: 100%;
    height: 150px;
}
.gradient, .character,.waveAnimation{
	position: absolute;
}
.character{
	right: 25%;
	top: 250px;
	animation: move-y .9s infinite alternate ease-in-out;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5px);
  }
}

.waveAnimation{
	center:0;
	top:52%;
	width: 100%;
}

.gradient{
	top: 67%;
	center:0;
}

/*sns*/
.sns{
	position: fixed;
	z-index: 30;
	top: 25%;
	left: 2%;
}


/*main*/
h2,h3{
	text-align: center;
}
h2{
	margin: 100px 0 0px;
	font-size: 50px;
}
h3{
	font-size: 21px;
	margin: 30px 0 20px;
}
section{
	margin:40px 0;
}
main a{
	display:block;
}
/*about*/
#about{
	margin:300px 0 0;
}
#about h3{
	text-align: left;
}
#about .profile{
	padding: 50px 0 0 100px;

}
#about .text{
	width: 380px;
}
#about .reverse{
	padding: 120px 0 0;
	flex-direction:row-reverse;
}
#about .picture{
	position:relative;
}
#about .circle1,
#about .circle2,
#about .circle3{
	position: absolute;
	width: 177px;
	height: 177px;
	border-radius: 50%;
	/*opacity: 0.5;*/
}
#about .circle1{
	background-color: rgba(255,155,4,0.50);/*#FF9B04*/
	top:19px;
	left:-246px;
}
#about .figtext1,
#about .figtext2,
#about .figtext3{
	width: 100%;
	height: 100%;
	/*background-color: rgba(255,255,255,0.50);*/
	border-radius: 50%;
}
#about .circle2{
	background-color: rgba(14,210,179,0.50);/*#0ed2b3*/
	bottom:-42px;
	left: -177px;
}
#about .circle3{
	background-color: rgba(67,152,209,0.50);/*#4398D1*/
	bottom:-42px;
	right: 140px;
}
#about .figtext1 p{
	padding: 65px 0 0;
	opacity: 1.0;
}
#about .figtext2 p{
	padding: 77px 0 0;
	opacity: 1.0;
}
#about .figtext3 p{
	padding: 77px 0 0;
	opacity: 1.0;
}
/*service*/

#service-sp{
	margin: 150px 0 0;
}

.colomB{
	display: flex;
	display: -webkit-flex;
	width: 60%;
	margin: 0 auto;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.picture{
	text-align: center;
	padding:0 0 20px;
}

/*works*/
.service-list li{
	width:40%;
}

.works-list{
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	padding:0 0 30px;
}

/*contact*/
#contact{
	width: 700px;
	margin: 0 auto;
}

#contact p{
	margin:0 0 20px;
}

input, textarea{
	text-decoration: none;
	width:100%;
	border: none;
	background-color: #E2DCCB;
    border-radius: 8px;
    padding: 8px 10px;
}
textarea{
	resize: none;
}
.send{
	display: flex;
	justify-content: center;
}
.submit a{
	width: 180px;
	color:#FFFFFF;
	padding:10px 15px;
}

.submit{
	border: none;
    background: #FF9900;
    color: #fff;
    border-radius: 50px;
	transition: .3s;
}
.submit:hover {
    background-color: #5bc78c;
}
.submit:active{
	background-color: #5bc78c;
}

.center{
	margin: 10px 0 0;
	padding: 20px 0 25px;
	background: #ffffff;
	text-align: center;
}

/*copy wright*/
footer{
	text-align: center;
	padding:50px 0 30px;
	font-size: 14px;
}


/*Shrinking for mobile*/
@media (max-width: 900px) {
/*total*/
	.Inner{
	display: block;
	width: 90%;
	margin: 0 auto;
}
	.sns{
		display: none;
	}

/*hero-image*/
	.colom{
	align-items: center;
	flex-flow:column;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.colomLeft{
	padding: 80px 0 5px;
}
.colomLeft,.colomRight{
 width: 100%;
	
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 13px 20px;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #ffffff;
 border-radius: 10px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffffff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  width: 100%;
  word-wrap: break-word;
}
	.gradient{
    width: 100%;
    height: 150px;
}

.character{
	right: 10%;
	top: 350px;
	animation: move-y .9s infinite alternate ease-in-out;
}

/*big animation
	
.waveAnimation{
	center:0;
	top:450px;
	width: 100%;
}
*/
	
.gradient{
	top: 81%;
	center:0;
}
/*small-animation*/

	.waveAnimation{
	center:0;
	top:76%;
	width: 100%;
}
	.waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
	/*about*/
	#about .profile{
	padding: 20px 0 0;
}
	#about h3{
	text-align: center;
}
	#about .picture{
		height:255px;
	}
	#about .reverse{
	padding: 120px 0 0;
	flex-direction: column;
	}
	#about .circle1{
	top:-70px;
	left:-88px;
}
#about .circle2{
	bottom: 34px;
	left: -19px;
}
#about .circle3{
	bottom: 34px;
	right: -14px;
}
	/*service*/
	.colomB{
	display: flex;
	display: -webkit-flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
	.service-list .work{
	width:45%;
	padding: 20px 0;
}

/*works*/

	.works-list .work{
		padding: 0 0 20px;
	}

/*contact*/
#contact {
    width: 90%;
    margin: 0px auto;
}

}