@charset "utf-8";
/* CSS Document */


/*-----------------------------
PC：アニメーションエリアの高さ
商品画像の枚数によって適宜高さを調整する
	-----------------------------*/
	.hnb_page .campaign_tpl .under_line.non{margin: 0;border:none}
	/*商品画像3枚*/
	.hnb_page .campaign_tpl .under_line .animation_area.type3.a{height: 1500px}
	.hnb_page .campaign_tpl .under_line .animation_area.type3{height: 1420px}

	@media (max-width: 767px) { 
/*-----------------------------
SP：アニメーションエリアの高さ
商品画像の枚数によって適宜高さを調整する
	-----------------------------*/
	/*商品画像3枚*/
	.hnb_page .campaign_tpl .under_line .animation_area.type3.a{height: 930px}
	.hnb_page .campaign_tpl .under_line .animation_area.type3{height: 860px}
}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein:nth-child(1){z-index: 0}
/*商品の配置*/
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A1{z-index: 1}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A1 {left: 100px;top:20px;right: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A2 {right: 30px;top: 300px;left: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A3 {right: 130px;top: 870px;left: auto}


.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B1 {right: 130px;top: 20px;left: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B2 {left: 0;top:380px;right: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B3 {right: 0%;top: 740px; left: auto}


.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C1 {right: 0%;top: 20px; left: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C2 {left: 100px;top:580px;right: auto}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C3 {right: 30px;top:860px;left: auto}	

@media (max-width: 767px) { 

.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A1 {left: 0%;top:10px;width: 60%}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A2 {right: 0;top: 250px;width: 70%}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A3 {right: 30px;top: 530px;width: 80%}

.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B1 {right: 30px;top: 10px;width: 80%;}	
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B2 {left: 0;top:290px;width: 60%}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B3 {right: 0px;top: 500px;width: 70%}

.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C1 {right: 0;top: 10px;width: 70%}	
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C2 {left: 0%;top:300px;width: 60%}
.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C3 {right: 0px;top:510px;width: 70%}
}			

@media screen and (max-width: 800px) and (min-width: 450px) {
/*-----------------------------
画面を縮めたPC：アニメーションエリアの高さ
商品画像の枚数によって適宜高さを調整する
	-----------------------------*/
	/*画像サイズ*/
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A1,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A2,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.A3,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B1,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B2,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.B3,
	.hnb_page .campaign_tpl .under_line .animation_area .type3.item .fadein.C1,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C2,
	.hnb_page .campaign_tpl .under_line .animation_area.type3 .item .fadein.C3{width: 50%}

}		
@media screen and (max-width: 767px) and (min-width: 676px) {
	/*商品画像3枚*/
	.hnb_page .campaign_tpl .under_line .animation_area{height: 1480px}
}
@media screen and (max-width: 671px) and (min-width: 450px) {
	/*商品画像3枚*/
	.hnb_page .campaign_tpl .under_line .animation_area{height: 1360px}		
}