﻿@charset "utf-8";

/*PCスライド*/

.pc_slide{
	min-width:960px;
	margin:0 auto;
	position:relative;
	/*height:470px;*/
    padding:0 0 250px;
}
#main_slide_area{
    padding-top:50px;
}
.top_comment{
    /*padding:25px;
    border:3px solid #eee;*/
    max-width:800px;
    margin:0 auto;
    line-height: 1.8;
}
@media only screen and (max-width:650px){
    .top_comment{
        margin:0 20px;
        /*padding:20px 15px;*/
    }
}
@media only screen and (min-width:651px){
    .top_comment br{
        
    }
}

.pc_slide .slide1,
.pc_slide .slide2,
.pc_slide .slide3,
.pc_slide .slide4,
.pc_slide .slide5,
.pc_slide .slide3_div{
	position:absolute;
}

.pc_slide .slide1,
.pc_slide .slide5,
.pc_slide .slide3,
.pc_slide .slide4{
	bottom:0;
	z-index:2;
	margin:0 auto;
	left:0;
	right:0;
	display:none;
}
.pc_slide .slide2,
.pc_slide .slide5{
    display: block !important;
}

.pc_slide .slide2{
	display:none;
	z-index:1;
	bottom:50px;
	margin:0 auto;
	left:0;
	right:0;
	width:100%;
	height:110px;
	background:url(../img/top/slide2.jpg) repeat-x center bottom;
	background-size:auto 110px;
}

.pc_slide .slide3_div{
	z-index:3;
	top:26px;
	left:0;
	right:0;
	margin:0 auto;
	text-align:center;
	-webkit-animation: example 0.7s ease 3s 1 forwards;
	-moz-animation: example 0.7s ease 3s 1 forwards;
	-o-animation: example 0.7s ease 3s 1 forwards;
	animation: example 0.7s ease 3s 1 forwards;
}

.pc_slide .slide3_div li img{
	transform: rotate(0.0001deg);
}

.pc_slide .slide3_div li{
	margin-right:100px;
	display:inline-block;
	-webkit-animation: horizontal 4s ease-in-out 4s infinite alternate;
	-moz-animation: horizontal 4s ease-in-out 4s infinite alternate;
	-o-animation: horizontal 4s ease-in-out 4s infinite alternate;
	animation: horizontal 4s ease-in-out 4s infinite alternate;
}

.pc_slide .slide3_div li:last-child{
	margin-right:0;
}

.pc_slide .slide3_div span {
	display:inline-block;
	-webkit-animation: vertical 1.5s ease-in-out 4s infinite alternate;
	-moz-animation: vertical 1.5s ease-in-out 4s infinite alternate;
	-o-animation: vertical 1.5s ease-in-out 4s infinite alternate;
	animation: vertical 1.5s ease-in-out 4s infinite alternate;
}

@keyframes example {
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes example {
	100% {
		opacity: 1;
	}
}

@keyframes horizontal {
	0% { transform:translateX( 0px); }
	100% { transform:translateX(  -25px); }
}

@-webkit-keyframes horizontal {
	0% { -webkit-transform:translateX( 0px); }
	100% { -webkit-transform:translateX(  -25px); }
}

@keyframes vertical {
	0% { transform:translateY( 0px); }
	100% { transform:translateY(  -10px); }
}

@-webkit-keyframes vertical {
	0% { -webkit-transform:translateY( 0px); }
	100% { -webkit-transform:translateY(  -10px); }
}


/* add */
.pc_slide .slide_popup{
	z-index:3;
	width:742px;
	height:100%;
	margin:0 auto;
	text-align:center;
	position:relative;
}

.pc_slide .slide_popup.trg_on span {
	display:inline-block;
	-webkit-animation: horizontal 4s ease-in-out 2s infinite alternate;
	-moz-animation: horizontal 4s ease-in-out 2s infinite alternate;
	-o-animation: horizontal 4s ease-in-out 2s infinite alternate;
	animation: horizontal 4s ease-in-out 2s infinite alternate;
}
.pc_slide .slide_popup.trg_on li img{
	display:inline-block;
	-webkit-animation: vertical 1.5s ease-in-out 2s infinite alternate;
	-moz-animation: vertical 1.5s ease-in-out 2s infinite alternate;
	-o-animation: vertical 1.5s ease-in-out 2s infinite alternate;
	animation: vertical 1.5s ease-in-out 2s infinite alternate;
}

.pc_slide .slide_popup li{
	position:absolute;
	display:none;
}

.pc_slide .slide_popup li.pop01{
	top:105px;
	left:450px;
}
.pc_slide .slide_popup li.pop02{
	top:75px;
	left:210px;
}

.pc_slide .slide_popup li.pop03{
	top:80px;
	left:50px;
}

.pc_slide .slide_popup li.pop04{
	top:100px;
	left:300px;
}

.pc_slide .slide_popup li.pop05{
	top:20px;
	left:100px;
}



