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

/*-------------------------------------------
#hanabi_header
-------------------------------------------*/
#hanabi_header {
    width: 100%;
    position : relative; /* 相対位置を設宁E*/
    aspect-ratio : 16 / 9; /* PC時�E16:9 */
    overflow: hidden;
    background-color: #000;

    /* 📱 スマ�E時（画面幁E68px以下）�E設宁E*/
    @media (max-width: 768px) {
        aspect-ratio: 1 / 1; /* スマ�E時�E1:1�E�正方形�E�にする */
    }
	#img_logo{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 100%;
	max-width: 480px;
	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;
	}
	}

    .hanabifade {
        /* リスト�E体�E高さを親要素ぁE��ぱぁE��庁E��めE*/
        width: 100%;
        height: 100%;

        li {
            width   : 100%;      /* 画像�E幁E��設宁E*/
            height  : 100%;      /* 枠に合わせて高さめE00%にする */
            position: absolute;  /* 絶対位置を設宁E*/
            top     : 0;        /* 上端に配置 */
            right   : 0;        /* 右端に配置 */
            opacity : 0;        /* 最初�E不透�E度めEに設宁E*/
            animation: hanabifade 18s infinite; /* hanabifadeアニメーションめE8秒ごとに無限に繰り返し実衁E*/

            /* 画像ごとにアニメーション遁E��を設宁E*/
            &:nth-child(1) {
                animation-delay : 0s;  
            }
            &:nth-child(2) {
                animation-delay : 6s;  
            }
            &:nth-child(3) {
                animation-delay : 12s; 
            }

            /* 画像�Eサイズを調整 */
            img {
                width      : 100%;
                height     : 100%;    /* 16:9 めE1/1 のエリアぁE��ぱぁE��庁E��めE*/
                object-fit : cover;   /* 比率を保ったまま、�Eみ出た部刁E��表示 */
            }
        }
    }
}


/* 画像フェードインアニメーションのキーフレーム */
@keyframes hanabifade {
    0% { opacity: 0; transform: scale(1); }
    /* --- 1枚目の拁E��時間（�E体�E1/3 = 6秒間�E�E--- */
    3% { opacity: 1; }   /* フェードイン完亁E*/
    29% { opacity: 1; }  /* ここまで表示 */
    33.3% { opacity: 0; transform: scale(1.05); } /* 次の画像へ�E�フェードアウト！E*/
    /* --- 残りの2/3の時間�E�E2秒間�E��E非表示 --- */
    100% { opacity: 0; transform: scale(1.05); } 
}