@charset "UTF-8";


.fade1 {
	opacity: 0;
	animation: fadeIn1 2s ease 0s 1 normal;
	animation-fill-mode: forwards;
}

.fade2 {
	display: none;
	animation: fadeIn2 2s ease 0.2s 1 normal;
}

.fade3 {
	display: none;
	animation: fadeIn3 2s ease 0.4s 1 normal;
}


@keyframes fadeIn1 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn1 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeIn3 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn3 {
    0% {opacity: 0}
    100% {opacity: 1}
}




/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 1000ms;
	position: fixed;
    }

/* 2つ目の要素に200msのdelayをかける */
.fadein2 {
	opacity : 0.1;
    transform : translate(0, 100px);
    transition : all 1000ms;
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    }
/* 3つ目の要素に400msのdelayをかける */
.fadein3 {
	opacity : 0.1;
    transform : translate(0, 100px);
    transition : all 1000ms;
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
}
/* 4つ目の要素に400msのdelayをかける */
.fadein4 {
	opacity : 0.1;
    transform : translate(0, 100px);
    transition : all 1000ms;
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    -ms-transition-delay: 600ms;
}

.img_box1 {
  animation: img_box_1 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
	position: absolute;
	top: 0;
}
 
@keyframes img_box_1 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
		
.img_box2 {
  animation: img_box_2 3.5s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
	position: absolute;
	top: 0;
	-webkit-animation-delay: 0.4s;
}
 
@keyframes img_box_2 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
		
.img_box3 {
  animation: img_box_3 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
	position: absolute;
	top: 0;
	-webkit-animation-delay: 0.8s;
}
 
@keyframes img_box_3 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
		
#personal-top section {
	position: absolute;
	bottom: 8%;
	z-index: 1;
	color: #fff;
	height: 0;
    width: 90%;
    border-left: 0px solid transparent;
	opacity: 0.93;
	animation-duration: 1s;
}

.arrow-bg {
	margin-bottom: 60px;
}

.arrow-bg {
	position: relative;
}

.arrow-bg div img {
	vertical-align: bottom;
}

.pg_expert .pointWrap .title .point {
	background: #1da9ef;
	border: 4px solid #1da9ef;
	box-shadow: inset 0 0 0 1px #fff;
	color: #fff;
	display: inline-block;
	left: 0;
	margin: -28px 0 0;
	padding: 5px 10px 3px;
	position: absolute;
	top: 50%;
}
	
.pg_expert .pointWrap .title {
    color: #1da9ef;
    font-size: 20px;
    margin: 0 0 15px;
    padding: 0 0 0 90px;
    position: relative;
}	

@media only screen and (min-width: 769px) {
.arrow-left {
	/*border-left: 10px solid #1da9ef;*/
	opacity: 0.85;
	height: 180px;
	display: inline-block;
	animation-name: animeborder;
	animation-delay: 0.2s;
	animation-duration: 1.5s;
	width: 0px;
	background-color: #1da9ef;
	animation-fill-mode: forwards;
}

@keyframes animeborder {
0% { 
	/*border-left: 0px solid #1da9ef;*/
	width: 0px;
	}
100% { 
	/*border-left: 50px solid #1da9ef;*/
	width: 99px;
	}
}
	

	
}

/* 幅768px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	.arrow-bg {
		display: none;
	}
	
	.img_box1 {
	bottom: 0;
	top: 10%;
}

.img_box2 {
	bottom: 0;
	top: 10%;
}

.img_box3 {
	bottom: 0;
	top: 10%;
}

.pg_expert .pointWrap .title {
		line-height: 1.4;
		margin: 0 0 10px;
		padding: 0 0 0 75px;
		font-size: 17px;
	}	
	
.pg_expert .pointWrap .title .point {
		border-width: 3px;
		margin: -20px 0 0;
		padding: 5px 5px 3px;
	}	
}