/* +++++++++++++++++++++++++++++++++++　svgロゴのアニメーション */

#logo-box path,
#logo-box rect,
#logo-box circle,
#logo-box polygon {
	stroke:transparent;
	fill:transparent;
}

/* タイポグラフィ */
#logo-box.start .typo {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	stroke-width: 0;
	-webkit-animation: logo_typo 3s ease-in 0s both;
	animation: logo_typo 3s ease-in 0s both; 
}
@keyframes logo_typo {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}
@-webkit-keyframes logo_typo {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}

/* サブタイトル */

#logo-box.start .logo-subtitle {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	stroke-width: 0;
	-webkit-animation: logo_subtitle 3s ease-in 0s both;
	animation: logo_subtitle 3s ease-in 0s both; 
}
@keyframes logo_subtitle {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}
@-webkit-keyframes logo_subtitle {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}

/* マーク */

#logo-box.start .logo-mark01 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	stroke-width: 0;
	-webkit-animation: logo_mark01 3s ease-in 0s both;
	animation: logo_mark01 3s ease-in 0s both; 
}
@keyframes logo_mark01 {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}
@-webkit-keyframes logo_mark01 {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}

#logo-box.start .logo-mark02 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	stroke-width: 0;
	-webkit-animation: logo_mark02 3s ease-in 0s both;
	animation: logo_mark02 3s ease-in 0s both; 
}
@keyframes logo_mark02 {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}
@-webkit-keyframes logo_mark02 {
  0% {
	stroke:#FFF;
    fill:transparent;
    stroke-dashoffset: 1000;
	stroke-width: 0.5;
  }
  50% {
    fill:transparent;
	stroke-width: 0.5;
  }
  100% {
    fill:#FFF;
    stroke-dashoffset: 0;
	stroke-width: 0;
  }
}
#main-copy.start{
	opacity: 0;
	margin-top:0;
	-webkit-animation: main_copy 1s ease-in 2.5s both;
	animation: main_copy 1s ease-in 2.5s both; 
}
@keyframes main_copy {
  0% {
	opacity: 0;
	margin-top:20px;
  }
  100% {
	opacity: 1;
	margin-top:0;
  }
}
@-webkit-keyframes main_copy {
  0% {
	opacity: 0;
	margin-top:20px;
  }
  100% {
	opacity: 1;
	margin-top:0;
  }
}




/* +++++++++++++++++++++++++++++++++++名刺を持っている手を出す */

#meishi-hand.start{
	display:block;
	-webkit-animation: meishi_hand 1.5s ease 0s both;
	animation: meishi_hand 1.5s ease 0s both; 
}
@keyframes meishi_hand {
  0% {
	top:-478px;
  }
  100% {
	top:0%;
  }
}
@-webkit-keyframes meishi_hand {
  0% {
	top:-478px;
  }
  100% {
	top:0%;
  }
}

/* 名刺のコピーライト */

#meishi-copy.start{
	display:block;
	opacity: 0;
	-webkit-animation: meishi_copy 1s ease 1.5s both;
	animation: meishi_copy 1s ease 1.5s both; 
}
@keyframes meishi_copy {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}
@-webkit-keyframes meishi_copy {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}
@media screen and (max-width:1024px) { 

#meishi-copy.start{
	display:none;
}

}





/* +++++++++++++++++++++++++++++++++++サービス */

/* サービス */

.service-img .content-area{
	opacity: 0;
	top:0;
}
.service-img .content-area.start{
	-webkit-animation: service_line01 1.5s ease 0s both;
	animation: service_line01 1.5s ease 0s both; 
}
@keyframes service_line01 {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}
@-webkit-keyframes service_line01 {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}

/* +++++++++++++++++++++++++++++++++++実績 */

/* 事例全体 */

.case-img .content-area{
	opacity: 0;
	top:0;
}
.case-img .content-area.start{
	-webkit-animation: case_line01 1.5s ease 0s both;
	animation: case_line01 1.5s ease 0s both; 
}
@keyframes case_line01 {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}
@-webkit-keyframes case_line01 {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}

/* 土下座アニメーション */

#dogeza-img{
  animation: dogeza 1.5s steps(2) infinite;
}
 
@keyframes dogeza {
  to {
    background-position: -300px 0;
  }
}


/* +++++++++++++++++++++++++++++++++++プロフィール */

/* プロフィール全体 */

.prof-img .content-area{
	opacity: 0;
	top:0;
}
.prof-img .content-area.start{
	-webkit-animation: prof_cont 1.5s ease 0s both;
	animation: prof_cont 1.5s ease 0s both; 
}
@keyframes prof_cont {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}
@-webkit-keyframes prof_cont {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}

/* +++++++++++++++++++++++++++++++++++お問い合わせ */

/* お問い合わせ全体 */

.contact-img .content-area{
	opacity: 0;
	top:0;
}
.contact-img .content-area.start{
	-webkit-animation: contact_cont 1.5s ease 0s both;
	animation: contact_cont 1.5s ease 0s both; 
}
@keyframes contact_cont {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}
@-webkit-keyframes contact_cont {
  0% {
	opacity: 0;
	top:300px;
  }
  100% {
	opacity: 1;
	top:0;
  }
}