@charset "utf-8";
/***********************
  平常時TOP画像用CSS
  2017.04.04
  auther: smiyata
***********************/

/***********************
  画像切替サイクル
***********************/

div.cycle1 > img.diff_img,
div.cycle1 > img.base_img,
div.cycle1 > div.cover{
	animation-delay: 4s;
}

div.cycle2 > img.diff_img,
div.cycle2 > img.base_img,
div.cycle2 > div.cover{
	animation-delay: 8s;
}

div.cycle3 > img.diff_img,
div.cycle3 > img.base_img,
div.cycle3 > div.cover{
	animation-delay: 12s;
}

div.cycle4 > img.diff_img,
div.cycle4 > img.base_img,
div.cycle4 > div.cover{
	animation-delay: 16s;
}

/***********************
  メイン画像・余白設定
***********************/

div#img_square{
	position: absolute;
	margin: 0px;
	overflow: hidden;
	height: 410px;
	width: 410px;
	left: 0px;
	top: 0px;
}

img#img_square_bg{
	position: absolute;
	left: 0px;
	top: 0px;
}

img#img_square_main{
	position: absolute;
	left: 0px;
	top: 0px;
}

div#img_buffer1{
	position: absolute;
	height: 56px;
	width: 56px;
	left: 590px;
	top: 177px;
	background: #0cb3e7;
}

div#img_buffer2{
	position: absolute;
	height: 56px;
	width: 56px;
	left: 649px;
	top: 177px;
	background: #5fc315;
}

div#img_buffer3{
	position: absolute;
	height: 56px;
	width: 56px;
	left: 826px;
	top: 236px;
	background: #e55c2d;
}

div#img_buffer4{
	position: absolute;
	height: 115px;
	width: 115px;
	left: 885px;
	top: 0px;
	background: #fff211;
}

/***********************
  切替画像設定
***********************/

div#img_inner_wrap > div.img_base{
	position: absolute;
	margin: 0px;
	overflow: hidden;
}

div#img_diff_01{
	height: 174px;
	width: 292px;
	left: 413px;
	top: 0px;
}

div#img_diff_02{
	height: 115px;
	width: 174px;
	left: 413px;
	top: 177px;
}

div#img_diff_03{
	height: 115px;
	width: 174px;
	left: 413px;
	top: 295px;
}

div#img_diff_04{
	height: 115px;
	width: 174px;
	left: 708px;
	top: 0px;
}

div#img_diff_05{
	height: 115px;
	width: 174px;
	left: 708px;
	top: 118px;
}

div#img_diff_06{
	height: 174px;
	width: 233px;
	left: 590px;
	top: 236px;
}

div#img_diff_07{
	height: 174px;
	width: 115px;
	left: 885px;
	top: 118px;
}

div#img_diff_08{
	height: 115px;
	width: 174px;
	left: 826px;
	top: 295px;
}

img.diff_img, img.base_img{
	position: absolute;
	top: 0px;
	left: 0px;
	animation-duration: 32s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-direction: normal;
}

img.diff_img{
	opacity:0.0;
	animation-name: diff_img_anime;
}

img.base_img{
	opacity:1.0;
	animation-name: base_img_anime;
}

@keyframes diff_img_anime {
0% {opacity:0.0;}
1% {opacity:0.0;}
2% {opacity:1.0;}
51% {opacity:1.0;}
52% {opacity:0.0;}
100% {opacity:0.0;}
}

@keyframes base_img_anime {
0% {opacity:1.0;}
1% {opacity:1.0;}
2% {opacity:0.0;}
51% {opacity:0.0;}
52% {opacity:1.0;}
100% {opacity:1.0;}
}




/***********************
  切替時カバーの設定
***********************/

div#img_inner_wrap div.cover{
	position: absolute;
	height: 100%;
	width: 100%;
	max-height: 0px;
	max-width: 0px;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-direction: normal;
}

div#cover_01{
	top: 0;
	right: 0;
	animation-name: hw_292_174;
	background: #FF9900;
}

div#cover_02{
	bottom: 0;
	left: 0;
	animation-name: wh_174_115;
	background: #FF80CC;
}

div#cover_03{
	top: 0;
	left: 0;
	animation-name: wh_174_115;
	background: #73E600;
}

div#cover_04{
	bottom: 0;
	right: 0;
	animation-name: wh_174_115;
	background: #E680FF;
}

div#cover_05{
	top: 0;
	right: 0;
	animation-name: wh_174_115;
	background: #FFCC80;
}

div#cover_06{
	top: 0;
	right: 0;
	animation-name: hw_233_174;
	background: #FF80CC;
}

div#cover_07{
	bottom: 0;
	left: 0;
	animation-name: hw_115_174;
	background: #80FF8D;
}

div#cover_08{
	bottom: 0;
	left: 0;
	animation-name: hw_174_115;
	background: #55CCFF;
}

@keyframes hw_292_174 {
0% {max-width: 292px; max-height: 0px;}
1% {max-width: 292px; max-height: 174px;}
10% {max-width: 292px; max-height: 174px;}
11% {max-width: 0px; max-height: 174px;}
12% {max-width: 0px; max-height: 0px;}
100% {max-width: 292px; max-height: 0px;}
}

@keyframes hw_233_174 {
0% {max-width: 233px; max-height: 0px;}
1% {max-width: 233px; max-height: 174px;}
10% {max-width: 233px; max-height: 174px;}
11% {max-width: 0px; max-height: 174px;}
12% {max-width: 0px; max-height: 0px;}
100% {max-width: 233px; max-height: 0px;}
}

@keyframes hw_174_115 {
0% {max-width: 174px; max-height: 0px;}
1% {max-width: 174px; max-height: 115px;}
10% {max-width: 174px; max-height: 115px;}
11% {max-width: 0px; max-height: 115px;}
12% {max-width: 0px; max-height: 0px;}
100% {max-width: 174px; max-height: 0px;}
}

@keyframes wh_174_115 {
0% {max-width: 0px; max-height: 115px;}
1% {max-width: 174px; max-height: 115px;}
10% {max-width: 174px; max-height: 115px;}
11% {max-width: 174px; max-height: 0px;}
12% {max-width: 0px; max-height: 0px;}
100% {max-width: 0px; max-height: 115px;}
}

@keyframes hw_115_174 {
0% {max-width: 115px; max-height: 0px;}
1% {max-width: 115px; max-height: 174px;}
10% {max-width: 115px; max-height: 174px;}
11% {max-width: 0px; max-height: 174px;}
12% {max-width: 0px; max-height: 0px;}
100% {max-width: 115px; max-height: 0px;}
}


/***********************
  オープニングスライド
***********************/

/* アニメーション以外の設定は【メイン画像・余白設定】にて */
img#img_square_main{
	animation:
		op_6 2s linear 0s 1 normal both;
}

@keyframes op_6 {
	0% {opacity:0.0; z-index: 1;}
	55% {opacity:0.0; z-index: 1;}
	95% {opacity:1.0; z-index: 1;}
	100% {opacity:1.0; z-index: 1;}
}

div.img_base:after{
	content:"";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	opacity:0.0;
	background: #ffffff;
}

div#img_diff_01{
	animation:
		img_fade_01 2s linear 0s 1 normal both;
}

div#img_diff_02{
	animation:
		img_fade_02 2s linear 0s 1 normal both;
}

div#img_diff_03{
	animation:
		img_fade_03 2s linear 0s 1 normal both;
}

div#img_diff_04{
	animation:
		img_fade_04 2s linear 0s 1 normal both;
}

div#img_diff_05{
	animation:
		img_fade_05 2s linear 0s 1 normal both;
}

div#img_diff_06{
	animation:
		img_fade_06 2s linear 0s 1 normal both;
}

div#img_diff_07{
	animation:
		img_fade_07 2s linear 0s 1 normal both;
}

div#img_diff_08{
	animation:
		img_fade_08 2s linear 0s 1 normal both;
}

img#img_square_bg{
	animation:
		img_fade_09 2s ease-in 0s 1 normal both;
}

div#img_buffer1{
	animation:
		img_fade_09 2s ease-in 0s 1 normal both;
}

div#img_buffer2{
	animation:
		img_fade_09 2s ease-in 0s 1 normal both;
}

div#img_buffer3{
	animation:
		img_fade_09 2s ease-in 0s 1 normal both;
}

div#img_buffer4{
	animation:
		img_fade_09 2s ease-in 0s 1 normal both;
}


@keyframes img_fade_01 {
	0% {opacity:0.0;}
	35% {opacity:0.0;}
	55% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_02 {
	0% {opacity:0.0;}
	20% {opacity:0.0;}
	40% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_03 {
	0% {opacity:0.0;}
	45% {opacity:0.0;}
	65% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_04 {
	0% {opacity:0.0;}
	25% {opacity:0.0;}
	45% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_05 {
	0% {opacity:0.0;}
	50% {opacity:0.0;}
	70% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_06 {
	0% {opacity:0.0;}
	55% {opacity:0.0;}
	75% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_07 {
	0% {opacity:0.0;}
	40% {opacity:0.0;}
	60% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_08 {
	0% {opacity:0.0;}
	30% {opacity:0.0;}
	50% {opacity:1.0;}
	100% {opacity:1.0;}
}

@keyframes img_fade_09 {
	0% {opacity:0.0;}
	25% {opacity:0.0;}
	75% {opacity:1.0;}
	100% {opacity:1.0;}
}