@charset "UTF-8";

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom:20px;
}

.fadeItemText{
    opacity: 0;
    transition: all .5s .2s ease;
    left:-30px;
    position: relative;
    padding-left:50px;
    
    overflow: hidden;
    position: relative;
}

.fadeItemText.head{
    font-size:20px;
    font-weight: bold;
    padding-left:0px;
}

.fadeItemText.active{
    opacity: 1;
    left:0px;
}

.fadeItemTextP{
    width:410px;
}

.fadeItemImgP{
    align-self:center;
}

.fadeItemImg{
    overflow: hidden;
    position: relative;
}
 
.fadeItemImg img{
    display: block;
    opacity: 0;
    position: relative;
    transition:all .5s .2s ease; 
    z-index: 0;
}
 
.fadeItemImg:before{
    background: #333;
    content: '';
    display: block;
    position: absolute;
    transform: translateX(-100%);
    transition:all .8s 0s ease; 
    width:100%;
    height:100%;
    z-index: 1;
}

.fadeItemImg.active img{
    opacity: 1;
}

.fadeItemImg.active:before{
    transform: translateX(100%);
}

.fadeItemIcon{
    transition: all .5s .2s ease;
    opacity: 0;
    width:150px;
    height:150px;
    border:10px;
    border-color:Black;
}

.fadeItemIcon img{
    width:150px;
    transition: all .1s;
}

.fadeItemIcon a {
    display: block;
    background: #CCC;
    color: #fff;
	height:150px;
    width: 150px;
    text-align: center;
	border-radius:90px;
	opacity:0.8;
	cursor:pointer;
	
    transform: scale(0.5, 0.5);
    transition: all .1s;
}
.fadeItemIcon .next:before {
	content: "";
	width: 40px;
	height: 40px;
	border-top: 10px solid #000;
	border-right: 10px solid #000;
	transform: rotate(45deg); /*図形回転*/
	-webkit-transform: rotate(45deg); /*図形回転*/
	-moz-transform: rotate(45deg); /*図形回転*/
	-ms-transform:rotate(45deg);
	position:absolute; /*絶対位置指定*/
	top:52px;
	left:47px;
	text-align:center;
	font-size:20px;
}
.fadeItemIcon .previous:before {
	content: "";
	width: 40px;
	height: 40px;
	border-top: 10px solid #000;
	border-right: 10px solid #000;
	transform: rotate(225deg); /*図形回転*/
	-webkit-transform: rotate(225deg); /*図形回転*/
	-moz-transform: rotate(225deg); /*図形回転*/
	-ms-transform:rotate(225deg);
	position:absolute; /*絶対位置指定*/
	top:52px;
	left:60px;
	text-align:center;
	font-size:20px;
}
.fadeItemIcon a:hover {
    opacity: 0.9;
    transform: scale(0.6, 0.6);
    cursor:pointer;
}

.fadeItemIcon.active{
    opacity: 1;
}

.fadeItemIcon.active img:hover{
    opacity: 0.9;
    transform: scale(1.05, 1.05);
    cursor:pointer;
    border-radius: 10px;
}

/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}