/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
header {
}

/*
#main0 img {
    animation: ani_bg 8s infinite;
}
@keyframes ani_bg {
    0% {transform: scale(1)}
    75% {transform: scale(1.05)}
    80% {transform: scale(1)}
}

#main1 {
    animation: ani_chara 8s infinite;
}
@keyframes ani_chara {
    0% {transform: translate(-5%, 2.5%)}
    75% {transform: translate(0%, 0%)}
    75.25% {transform: translate(-1%, 0.5%)}
    75.5% {transform: translate(1%, -0.5%)}
    77% {transform: translate(-4%, 2%)}
    100% {transform: translate(-5%, 2.5%)}
}
#main2 {
    animation: ani_ball 8s infinite;
}
@keyframes ani_ball {
    0% {transform: translate(0%, 0%) rotateZ(0deg);opacity: 0;}
    75% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
    75.5% {transform: translate(4px, 4px) rotateZ(1deg)}
    76% {transform: translate(0px, 4px) rotateZ(0deg)}
    76.5% {transform: translate(4px, 0px) rotateZ(-1deg)}
    77% {transform: translate(0px, 0px) rotateZ(0deg)}
    77.5% {transform: translate(4px, 4px) rotateZ(1deg)}
    78% {transform: translate(0px, 4px) rotateZ(0deg)}
    78.5% {transform: translate(4px, 0px) rotateZ(-1deg)}
    79% {transform: translate(0px, 0px) rotateZ(0deg) scale(1);}
	90%  {transform: translate(-40%, 20%) scale(2);opacity: 0;}
	100%  {transform: translate(-40%, 20%) scale(2);opacity: 0;}
}


#main {
	display: block;
	position: relative;
    width: 100%;
	height: 142.85vw;
	background-size: contain;
	pointer-events: none;
}
#main0 {
	overflow: hidden;
}
#main1 {
	display: block;
	position: absolute;
	width: 90%;
	top: 4%;
	left: -4%;
	z-index: 10;
}
#main2 {
	display: block;
	position: absolute;
	width: 80%;
	top:0%;
	right:-24%;
	z-index: 11;
}

#main_sub h3 {
	border:none;
}#main_sub h3 img{
	margin: 20px auto;
}

img.ani1 {
    animation: ani_bg1 8s infinite;
}
*/

img.ani2 {
    animation: ani_bg2 10s infinite;
}
@keyframes ani_bg1 {
    0% {opacity:1;}
    50% {opacity:1;}
    55% {opacity:0;}
    94% {opacity:0;}
    95% {opacity:1;}
}
@keyframes ani_bg2 {
    0% {opacity:0;}
    30% {opacity:0;}
    50% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}


/* ================================================== */
/* ==================== 1080px以上 ==================== */
/* ================================================== */
@media (min-width: 1080px) {

/*
#main_wrap {
	display: flex;
	flex-direction: row;
}
#main {
	display: block;
	width: 50%;
	height: auto;
	margin-bottom: 0;
}
#main1 {
	left: 6%;
}
#main2 {
	right:-34%;
}
#main_sub {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	flex-grow: 1;
	flex-shrink: 1;

	width: 50%;
	height: 80vh;
	min-height: 640px;
	max-height: 900px;
	padding: 5% 0;
	background-color: rgba(255,255,255,0);
	text-align: center;
	box-sizing: border-box;
	z-index: 5;
}
#main_sub h2 {
	display: flex;
	margin: 0;
}
#main_sub h2 img{
	height: 75%;
	margin: auto;
}
#main_sub h3 {
	display: block;
	margin: 0;
}
#main_sub h3 img{
	height: auto;
	margin: auto;
}
*/


}