/* pcac */
.pcac {
	box-sizing:border-box;
	position:relative;
	padding-bottom:60%;
	overflow:hidden;
	z-index:0;

	font-size:2vw;
}
.pcac div {
	box-sizing:border-box;
}
/* pcac-slide-layer */
.pcac-slide-layer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
/* pcac-slide */
<?php

	$trans_effect = "coverup";
	$trans_effect = "slideup";
	$trans_effect = "fade-none";
	$trans_effect = "fade-zoomout";
	$trans_effect = "fade-zoomin";
	$trans_effect = "slideright";
	$trans_effect = "slide-left-ex";
	$trans_effect = "fade-zoomin";
	$trans_effect = "slideup";
	$trans_effect = "slideright";
	$trans_effect = "uncoverup";

	$n_cycle = 5;

	$n_slide = 6;
	$t_pause = 5.0;
	$t_trans = 0.6;
	//$t_trans = 2.0;
	$t_period = $t_pause+$t_trans;


	#[p][t][p][t][p][t]

	$t_cycle = $t_period*$n_slide;
	$t_sleep = $t_cycle-$t_pause-$t_trans*2;

	$t_tiny = 0.00001;

	#slide
	$p_pause_begin = 0;

	$p_exit_begin = 100*$t_pause/$t_cycle;
	$p_pause_end = $p_exit_begin-$t_tiny;

	$p_sleep_begin = 100*$t_period/$t_cycle;
	$p_exit_end = $p_sleep_begin-$t_tiny;

	$p_entry_begin = 100*($t_period+$t_sleep)/$t_cycle;
	$p_sleep_end = $p_entry_begin-$t_tiny;

	$p_entry_end = 100;

	#pbar
	$p_pbar_pause = 0;
	$p_pbar_trans = 100*$t_pause/$t_period;
	$p_pbar_pause_end = $p_pbar_trans-$t_tiny;
	$p_pbar_trans_end = 100;

	$text[0] = array(
		"class"=>"block-top-right",
		"text"=>"プレゼント!",
	);
	$text[1] = array(
		"class"=>"inline-top-right",
		"text"=> "クリスマス!",
	);
	$text[2] = array(
		"class"=>"block-bottom-center",
		"text"=> "サンタクロース!",
	);
?>
.pcac-slide {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.pcac-slide {
	opacity:0;
	z-index:0;


	animation-name:kf-pcac-<?php echo $trans_effect; ?>;

	animation-duration:<?php echo $t_cycle; ?>s;
	animation-timing-function:linear;
	<?php if ( $n_cycle < 0 ): ?>
	animation-iteration-count:infinite;
	<?php else: ?>
	animation-iteration-count:<?php echo $n_cycle+1; ?>;
	<?php endif; ?>

	animation-fill-mode:forwards;

	animation-play-state:paused;
}
.pcac-run .pcac-slide {
	animation-play-state:running;
}
<?php for( $i=0; $i<$n_slide; $i++ ): ?>
.pcac-slide-<?php echo pad3z($i+1); ?> {
	background:url("img/slide-<?php echo pad3z($i+1); ?>.jpg");
	background-size:cover;
	background-position:center center;

	<?php if (( $n_cycle >= 0 ) & ( $i == 0 )): ?>
	animation-name:kf-pcac-<?php echo $trans_effect; ?>, kf-pcac-halttop;
	animation-delay:<?php echo -$t_cycle+$t_period*$i; ?>s, <?php echo $t_cycle*$n_cycle; ?>s;
	<?php else: ?>
	animation-delay:<?php echo -$t_cycle+$t_period*$i; ?>s;
	<?php endif; ?>
}
<?php endfor; ?>

@keyframes kf-pcac-halttop {
	0% {
		opacity:1;
		z-index:10;
	}
	100% {
		opacity:1;
		z-index:10;
	}
}

@keyframes kf-pcac-fade-none {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
	}
	<?php echo $p_exit_begin; ?>% {
		opacity:1;
	}
	<?php echo $p_sleep_begin; ?>% {
		opacity:0;
	}
	<?php echo $p_entry_begin; ?>% {
		opacity:0;
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
	}
}
@keyframes kf-pcac-fade-zoomin {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:scale(1);
	}
	<?php echo $p_exit_begin; ?>% {
		opacity:1;
		transform:scale(1);
	}
	<?php echo $p_sleep_begin; ?>% {
		opacity:0;
		transform:scale(2);
	}
	<?php echo $p_entry_begin; ?>% {
		opacity:0;
		transform:scale(1);
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:scale(1);
	}
}
@keyframes kf-pcac-fade-zoomout {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:scale(1);
	}
	<?php echo $p_exit_begin; ?>% {
		opacity:1;
		transform:scale(1);
	}
	<?php echo $p_sleep_begin; ?>% {
		opacity:0;
		transform:scale(1);
	}
	<?php echo $p_entry_begin; ?>% {
		opacity:0;
		transform:scale(2);
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:scale(1);
	}
}
@keyframes kf-pcac-slideup {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
	}
	<?php echo $p_exit_begin; ?>% {
		transform:translate(0,0);
	}
	<?php echo $p_exit_end; ?>% {
		transform:translate(0,-100%);
	}
	<?php echo $p_sleep_begin; ?>% {
		transform:translate(0,100%);
	}
	<?php echo $p_entry_begin; ?>% {
		transform:translate(0,100%);
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:translate(0,0);
	}
}
@keyframes kf-pcac-slideright {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
	}
	<?php echo $p_exit_begin; ?>% {
		transform:translate(0,0);
	}
	<?php echo $p_exit_end; ?>% {
		transform:translate(100%,0);
	}
	<?php echo $p_sleep_begin; ?>% {
		transform:translate(-100%,0);
	}
	<?php echo $p_entry_begin; ?>% {
		transform:translate(-100%,0);
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:translate(0,0);
	}
}
@keyframes kf-pcac-slide-left-ex {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_exit_begin; ?>% {
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_exit_end; ?>% {
		transform:translate(-50%,0);
		z-index:0;
	}
	<?php echo $p_sleep_begin; ?>% {
		transform:translate(100%,0);
		z-index:1;
	}
	<?php echo $p_entry_begin; ?>% {
		transform:translate(100%,0);
		z-index:1;
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:1;
	}
}
@keyframes kf-pcac-turnup {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:scale(1,1);
	}
	<?php echo $p_exit_begin; ?>% {
		transform:scale(1,1);
		transform-origin:top;
	}
	<?php echo $p_sleep_begin; ?>% {
		transform:scale(1,0);
		transform-origin:top;
	}
	<?php echo $p_entry_begin; ?>% {
		transform:scale(1,0);
		transform-origin:bottom;
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:scale(1,1);
		transform-origin:bottom;
	}
}
@keyframes kf-pcac-coverup {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:1;
	}
	<?php echo $p_exit_begin; ?>% {
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_exit_end; ?>% {
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_sleep_begin; ?>% {
		transform:translate(0,100%);
	}
	<?php echo $p_entry_begin; ?>% {
		transform:translate(0,100%);
		z-index:1;
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:1;
	}
}
@keyframes kf-pcac-uncoverup {
	<?php echo $p_pause_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:1;
	}
	<?php echo $p_exit_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:1;
	}
	<?php echo $p_exit_end; ?>% {
		opacity:1;
		transform:translate(0,-100%);
		z-index:1;
	}
	<?php echo $p_sleep_begin; ?>% {
		opacity:0;
		transform:translate(0,0);
	}
	<?php echo $p_sleep_end; ?>% {
		opacity:0;
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_entry_begin; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:0;
	}
	<?php echo $p_entry_end; ?>% {
		opacity:1;
		transform:translate(0,0);
		z-index:0;
	}
}
/* pcac-pbar-layer */
.pcac-slide-layer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/* pcac-pbar-layer */
.pcac-pbar-layer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
.pcac-pbar {
	position:absolute;
	background:rgba(255,0,0,0.7);

	<?php if ( $n_cycle < 0 ): ?>
	animation-iteration-count:infinite;
	<?php else: ?>
	animation-iteration-count:<?php echo $n_cycle*$n_slide; ?>;
	<?php endif; ?>

	animation-duration:<?php echo $t_period; ?>s;
	animation-timing-function:linear;

	animation-play-state:paused;
}
.pcac-run .pcac-pbar {
	animation-play-state:running;
}
.pcac-pbar-top {
	top:0;
	left:0;
	width:0;
	height:10px;
	animation-name:kf-pcac-pbar-pause;
}
.pcac-pbar-bottom {
	bottom:0;
	left:0;
	width:0;
	height:3px;
	animation-name:kf-pcac-pbar-pause;
}
@keyframes kf-pcac-pbar-pause {
	<?php echo $p_pbar_pause; ?>% {
		width:0;
	}
	<?php echo $p_pbar_pause_end; ?>% {
		width:105%;
	}
	<?php echo $p_pbar_trans; ?>% {
		width:0;
	}
	<?php echo $p_pbar_trans_end; ?>% {
		width:0;
	}
}
/* pcac-link-layer */
.pcac-link-layer {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
}
/* pcac-text-layer */
/*
.pcac-text-layer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	z-index:0;
	font-size:45px;
	color:white;
	padding:10px;
	background-color:rgba(0,0,0,0.5);
}
*/
/* pcac-text-layer */
.pcac-text-layer {
	position:absolute;
	z-index:0;
	
	font-size:100%;
	color:white;
	padding:1% 2%;
	background-color:rgba(0,0,0,0.3);
}
.pcac-text-layer-block-top-right {
	width:100%;
	top:0;
	left:0;
	text-align:right;
}
.pcac-text-layer-inline-top-right {
	display:inline-block
	top:0;
	right:0;
}
.pcac-text-layer-block-bottom-center {
	width:100%;
	bottom:0;
	left:0;
	text-align:center;
}