body{
text-align: center;
background:#fcefc0;
background:-webkit-gradient(-1deg, #fcefc0, #ffdcdc, #bdfcfa,#fcefc0);
background: linear-gradient(-1deg, #fcefc0, #ffdcdc, #bdfcfa,#fcefc0);

background-size: 300% 300%;
-webkit-animation:bgcolor 60s ease infinite;
animation: bgcolor 60s ease infinite;
width: 100%;
font-size: 15px;
font-family: "Noto Sans Japanese"; 
color: #666;
position: relative;
}



h1{
font-weight: light;
color: #00c1b2;
padding: 0;
margin: 0;
font-size: 105%;
letter-spacing: 0.1em;
}

h2{ 
font-family: Arial, Helvetica," sans-serif";
font-weight: bold;
color: #00c1b2;
font-size: 160%;
padding: 0 0 20px 0;
}



p{
font-weight: 100;
color: #666;
line-height: 1.8;
}


/*背景グラデ*/
@-webkit-keyframes bgcolor {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

@keyframes bgcolor { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}


/*ロゴ*/

.svg-wrap {
position: relative;
width: 100%;
height:70px;
text-align: center;
padding-top: 0;
}


#logo{
padding:0px 0 0 0;
margin: 0 auto;
display: block;
position: absolute;
height: 100%;
top: 100px;
left: 0;
}




.logoAnimation {
-webkit-stroke-width:1;
-webkit-stroke: #00c1b2;
stroke-width:1;
stroke: #00c1b2;
-webkit-fill: rgba(0, 193, 178, 1);
-webkit-stroke-dasharray: 300;
-webkit-stroke-dashoffset: 300;
fill: rgba(0, 193, 178, 1);
stroke-dasharray: 300;
stroke-dashoffset: 300;
-webkit-animation: logo_move 1.5s linear 0s 1 forwards;
animation: logo_move 1.5s linear 0s 1 forwards;
opacity: 1; 

}


@-webkit-keyframes logo_move {
0% {-webkit-stroke-dashoffset: 300;-webkit-fill: rgba(0, 193, 178,0.0);}
70% {-webkit-stroke-dashoffset:0;-webkit-fill: rgba(0, 193, 178,0.0);}
100% {-webkit-stroke-dashoffset: 0;-webkit-fill: rgba(29, 172, 185,1);}
}

@keyframes logo_move {
0% {stroke-dashoffset: 300;fill: rgba(0, 193, 178,0.0);}
70% {stroke-dashoffset:0;fill: rgba(0, 193, 178,0.0);}
100% {stroke-dashoffset:0;fill: rgba(0, 193, 178,1);}
}



#contents{
padding: 0px 0%;
margin: 200px auto 0 auto;
width: 100%;
}


.hide{
visibility: hidden;
}


.copyAnimation{
-webkit-animation: copyIn 0.5s linear 1.5s 1 forwards;
animation: copyIn 0.5s linear 1.5s 1 forwards;
opacity: 0;
}


@-webkit-keyframes copyIn {
 0% { opacity: 0; -webkit-transform: translateY(-5px);  }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes copyIn {
 0% { opacity: 0; transform: translateY(-5px); }
 100% { opacity: 1;  transform: translateY(0); }
}

.contentsAnimation{
margin: 100px 0;
opacity: 0;
}

.fadeInDown {
-webkit-animation: fadeInDown 0.3s ease 0s 1 forwards;
animation: fadeInDown 0.3s ease 0s 1 forwards;
opacity: 0;
}


@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInDown {
 0% { opacity: 0;  transform: translateY(-20px); }
 100% { opacity: 1; transform: translateY(0); }
}


.fadeInDown2 {
-webkit-animation: fadeInDown2 0.5s linear 0.3s 1 forwards;
animation: fadeInDown2 0.5s linear 0.3s 1 forwards;
opacity: 0;
}


@-webkit-keyframes fadeInDown2 {
 0% { opacity: 0; -webkit-transform: translateY(0);}
 100% { opacity: 1; -webkit-transform: translateY(0);  }
}

@keyframes fadeInDown2 {
 0% { opacity: 0;  transform: translateY(0); }
 100% { opacity: 1; transform: translateY(0); }
}

.copyright{
font-family: Arial, Helvetica," sans-serif";
display: block;
font-weight: 100;
font-size: 70%;
padding:0% 0 5% 0;
color: #00c1b2;
}

.worksCont{
padding: 0;
margin: 1% 0 0 0;
text-align: center;
width: 100%;
}

.worksCont ul{
margin: 0 auto;
padding: 0;
width:85%;
}

.worksCont li{
display:inline-block;
vertical-align: top;
margin: 0 0.5% 0% 0.5%;
}

.worksCont li p{
font-size: 95%;
padding: 0;
display: block;
margin: 5% 0;
line-height: 1.6!important;
}

.worksCont li p span{
display: block;
padding: 0.2% 0 0 0;
font-size: 90%;
font-weight: 100;
}

.worksCont li img{
width: 100%;
}


@media screen and (max-width: 1200px) {
#logo{

}

}


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

.svg-wrap{
height: 60px;
}

#logo{

}

}


@media screen and (max-width: 480px) {
.svg-wrap{
height: 45px;
}


#logo{
top: 80px;
}

#contents{
width:90%;
margin: 150px auto 0 auto;
}

}