/*オーバーレイ---------------------------------------------------------*/
.ol001,
.ol002,
.ol003,
.ol004,
.ol005{
	display: none;
	position:fixed;
	bottom:0;
	width:100%;
}

.ol_box{
	position: relative;
}
.ol_box .ol_bg{
	margin:0 !important;
	width: 100%;
}
.ol_box .ol_btn{
	position:absolute;
	bottom:0px;
	left:25%;
	width:75%;
	animation-name: ol_btn_scale;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol_btn_scale;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol_btn_scale;
	-moz-animation-duration: 1.2s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@keyframes ol_btn_scale {0% {transform:scale(0.9);}100% {transform:scale(1);}}
@-webkit-keyframes ol_btn_scale {0% {-webkit-transform:scale(0.9);}100% {-webkit-transform:scale(1);}}
@-moz-keyframes ol_btn_scale {0% {-moz-transform:scale(0.9);}100% {-moz-transform:scale(1);}}



.ol003 .ol_box{
	background:rgba(0,0,0,0.5);
	bottom:0;
	margin-bottom:0;
	border-top: solid 1px #FFFFFF;
}
.ol003 .ol_btn{
	position:absolute;
}
.ol003 .ol_bg{
	margin-top:0 !important;
	margin-bottom:0 !important;
	width:100%;
}
.ol003 .ol_btn{
	position:absolute;
	bottom:0;
	left:25%;
	width:75% !important;
	animation-name: ol003_btn_scale;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol003_btn_scale;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol003_btn_scale;
	-moz-animation-duration: 1.2s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@keyframes ol003_btn_scale {0% {transform:scale(0.9);}100% {transform:scale(1);}}
@-webkit-keyframes ol003_btn_scale {0% {-webkit-transform:scale(0.9);}100% {-webkit-transform:scale(1);}}
@-moz-keyframes ol003_btn_scale {0% {-moz-transform:scale(0.9);}100% {-moz-transform:scale(1);}}

.ol004 .ol_box{
	max-width:500px;
	animation-name: ol004_btn_scale;
	animation-duration: .7s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol004_btn_scale;
	-webkit-animation-duration: .7s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol004_btn_scale;
	-moz-animation-duration: .7s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@keyframes ol004_btn_scale {0% {transform:scale(0.95);}100% {transform:scale(1);}}
@-webkit-keyframes ol004_btn_scale {0% {-webkit-transform:scale(0.95);}100% {-webkit-transform:scale(1);}}
@-moz-keyframes ol004_btn_scale {0% {-moz-transform:scale(0.95);}100% {-moz-transform:scale(1);}}
.ol004 .ol_box .ol_btn,
.ol004 .ol_box .ol_txt{
	left:0;
	width:100%;
}
.ol004 .ol_box .ol_txt{
	position: absolute;
	z-index: 2;
}
.ol004 .ol_box .ol_prdct{
	position: absolute;
	right:0;
	top:0;
	width:30%;
	z-index: 1;
	
	animation-name: ol004_btn_prdct;
	animation-duration: 1.8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol004_btn_prdct;
	-webkit-animation-duration: 1.8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol004_btn_prdct;
	-moz-animation-duration: 1.8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@keyframes ol004_btn_prdct {0% {transform:rotate(0);}92% {transform:rotate(0);}96% {transform:rotate(10deg);}100% {transform:rotate(0);}}
@-webkit-keyframes ol004_btn_prdct {0% {-webkit-transform:rotate(0);}92% {-webkit-transform:rotate(0);}96% {-webkit-transform:rotate(10deg);}100% {-webkit-transform:rotate(0);}}
@-moz-keyframes ol004_btn_prdct {0% {-moz-transform:rotate(0);}92% {-moz-transform:rotate(0);}96% {-moz-transform:rotate(10deg);}100% {-moz-transform:rotate(0);}}
.ol004 .ol_box .ol_mov{
	position: absolute;
	width:20.3%;
	left:4%;
	top:33.1%;
	z-index: 2;
}
@media screen and (min-width:500px) {
.ol004{
	width:450px;
	right:25px;
}
.ol004:hover{
	opacity: 0.8;
}
}

.ol005 .ol_box .ol_txt{
	position: absolute;
	z-index: 2;
	left:0;
	bottom:0;
	width:100%;
	
	
	animation-name: ol005_btn_txt;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol005_btn_txt;
	-webkit-animation-duration: .6s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol005_btn_txt;
	-moz-animation-duration: .6s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@keyframes ol005_btn_txt {0% {opacity: 0;}24% {opacity: 0;}25% {opacity: 1;}100% {opacity:1;}}
@-webkit-keyframes ol005_btn_txt {0% {opacity: 0;}24% {opacity: 0;}25% {opacity: 1;}100% {opacity:1;}}
@-moz-keyframes ol005_btn_txt {0% {opacity: 0;}24% {opacity: 0;}25% {opacity: 1;}100% {opacity:1;}}


.ol005 .ol_box .ol_btn{
	position: absolute;
	z-index:2;
	width:75%;
	left:auto;
	right:0;
	bottom:0;
	
	animation-name: ol005_btn_shake;
	animation-duration: 2.4s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: normal;

	-webkit-animation-name: ol005_btn_shake;
	-webkit-animation-duration: 2.4s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;

	-moz-animation-name: ol005_btn_shake;
	-moz-animation-duration: 2.4s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
}
@keyframes ol005_btn_shake {
	0% {right: 8px;}
	3.5% {right: -5px;}
	7% {right: 5px;}
	10.5% {right: -3px;}
	14% {right: 3px;}
	17.5% {right: -2px;}
	21% {right: 2px;}
	28% {right: -1px;}
	35% {right: 1px;}
	42% {right: 0;}
	100% {right: 0;}
}
@-webkit-keyframes ol005_btn_shake {
	0% {right: 8px;}
	3.5% {right: -5px;}
	7% {right: 5px;}
	10.5% {right: -3px;}
	14% {right: 3px;}
	17.5% {right: -2px;}
	21% {right: 2px;}
	28% {right: -1px;}
	35% {right: 1px;}
	42% {right: 0;}
	100% {right: 0;}
}
@-moz-keyframes ol005_btn_shake {
	0% {right: 8px;}
	3.5% {right: -5px;}
	7% {right: 5px;}
	10.5% {right: -3px;}
	14% {right: 3px;}
	17.5% {right: -2px;}
	21% {right: 2px;}
	28% {right: -1px;}
	35% {right: 1px;}
	42% {right: 0;}
	100% {right: 0;}
}

.ol005 .ol_box .ol_balloon{
	position: absolute;
	z-index:2;
	width:36%;
	right:0;
	top:0;
	
	animation-name: ol005_btn_balloon;
	animation-duration: .8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	-webkit-animation-name: ol005_btn_balloon;
	-webkit-animation-duration: .8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name: ol005_btn_balloon;
	-moz-animation-duration: .8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}

@keyframes ol005_btn_balloon {0% {transform:rotate(0);}80% {transform:rotate(0);}90% {transform:rotate(10deg);}100% {transform:rotate(0);}}
@-webkit-keyframes ol005_btn_balloon {0% {-webkit-transform:rotate(0);}80% {-webkit-transform:rotate(0);}90% {-webkit-transform:rotate(10deg);}100% {-webkit-transform:rotate(0);}}
@-moz-keyframes ol005_btn_balloon {0% {-moz-transform:rotate(0);}80% {-moz-transform:rotate(0);}90% {-moz-transform:rotate(10deg);}100% {-moz-transform:rotate(0);}}


@media screen and (min-width:500px) {
.ol005{
	width:500px;
	right:15px;
	bottom:10px;
}
.ol005:hover{
	opacity: 0.8;
}
.ol005 .ol_box .ol_btn{
	width:70.5%;
}
.ol005 .ol_box .ol_balloon{
	top:-5px;
}
}
