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

/*-------------------------------------------
#hanabi_header
-------------------------------------------*/


#hanabi_header {
    width: 100%;
    position : relative; 
    aspect-ratio : 16 / 9; /* PCアスペクト比16:9 */
    overflow: hidden;
    background-color: #000;

    /* スマホ*/
    @media (max-width: 768px) {
        aspect-ratio: 1 / 1; /* スマホアスペクト比1:1 */
    }
/*	#img_logo{	position: absolute;	right: 0px;	top: 0px;	width: 100%;	max-width: 480px;	z-index: 100;	}*/ /*右上配置*/
	#img_logo{	position: absolute;	top: 45%;	left: 50%;	transform: translate(-50%, -50%); width: 96%;	max-width: 800px;	z-index: 100;	} /*センター配置*/
	#img_logo img{	width: 100%;}
	@media screen and (max-width: 768px) {
	/*#img_logo{position: absolute;	left: 0;	bottom: 0;	right: inherit;	top:inherit;	max-width: 200px;	margin: 0 auto;	}*//*左下配置*/
		#img_logo{	position: absolute;	top: inherit; left: 50%; bottom: -10%;} /*センター配置*/
	}

    .hanabifade {
        /* リスト親要素*/
        width: 100%;
        height: 100%;

        li {
            width   : 100%;
            height  : 100%;    
            position: absolute; 
            top     : 0;        
            right   : 0;        
            opacity : 0;        
            animation: hanabifade 20s infinite; /* hanabifadeアニメーションめ20秒ごとに無限に繰り返し*/

            /* 画像ごとにアニメーション*/
            &:nth-child(1) {
                animation-delay : 0s;  
            }
            &:nth-child(2) {
                animation-delay : 5s;  
            }
            &:nth-child(3) {
                animation-delay : 10s; 
            }
            &:nth-child(4) {
                animation-delay : 15s; 
            }

            /* 画像サイズを調整 */
            img {
                width      : 100%;
                height     : 100%;    /* 16:9 、1:1 のエリア*/
                object-fit : cover;   /* 比率を保ったまま、はみ出た部分を非表示 */
            }
        }
    }
}


/* 画像フェードインアニメーションのキーフレーム */
@keyframes hanabifade {
    0% { opacity: 0; transform: scale(1); }
    /* --- 1枚目（全体の1/4 = 5秒間--- */
    3% { opacity: 1; }   /* フェードイン*/
    22% { opacity: 1; }  /* ここまで表示 */
    25% { opacity: 0; transform: scale(1.15); } /* 次の画像へフェードアウト*/
    /* --- 残りの3/4＝15秒は非表示 --- */
    100% { opacity: 0; transform: scale(1.15); } 
}