@charset "UTF-8";

/* TOPバナーの背景基本指示 */

#top-banner {position:relative;
background-image: url(../images/top-banner_back.png),url(../images/back-img04.jpg);
background-position: top center, bottom center;
background-repeat: no-repeat, repeat;
background-size:100% auto, auto auto;
color:#101010;}

.top-text {width:160px;/*横幅指定しないとファイアフォックスが中心寄せされないため追加。fit-contentもダメだった*/
writing-mode:vertical-rl /*縦書き指定*/;
font-size: 22px;font-weight: bold;letter-spacing: 8px;line-height: 1.8;margin:40px auto 0;position: relative;right:95px;}

/* 画像の拡縮に合わせて文字位置を細かく切り替えている */
@media (max-width:1500px) {.top-text{letter-spacing:3px;line-height:1.2;margin:0 auto;position:relative;right:80px;}}
@media (max-width:1300px) {.top-text{font-size: 1.8vw;position:relative;right:60px;text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;}}
@media (max-width:999px) {.top-text{position:relative;right:50px;top:}}
@media (max-width:768px) {.top-text{letter-spacing:0;;position:relative;right:20px;width:fit-content;text-shadow:none;}}
@media (max-width:530px) {.top-text{position:relative;right:30px;top:0;font-size:11px;}}
@media (max-width:470px) {.top-text{font-size:9px;position:relative;right:20px;}}


/* ▽中間（タブレット）時：追加切り替え（現行スマホ最小320pxまで）========================= */

@media (max-width:1620px) {
#top-banner{background-image:url(../images/top-banner_back.png),url(../images/back-img04.jpg);
background-position:top center,bottom center;
background-repeat:no-repeat,repeat;
background-size:contain,auto auto;}
/**/}

@media (max-width:768px) {
.banner-pc{display:none;}
.banner-sp{display:block;}

#top-banner{
background-image:url(../images/top-banner_back-sp.png),url(../images/back-img04.jpg);
background-position:top center,bottom center;
background-repeat:no-repeat,repeat;
background-size:contain,50px 50px;}

#top-banner header img{display:none;}
}
/*------------ TOPバナーのアニメーション指示 -----------------*/
.top-anime{
background-position: top center;
background-repeat: no-repeat;
background-size:100% auto;

position: absolute;inset: 0;opacity: 0;
animation:bannerAnime 21s infinite;/* 3画像 × 7秒 = 21秒 */
}

.top-text{animation:textAnime 7s infinite;opacity:0;}
@keyframes textAnime{
/* 非表示 */0%{opacity:0;}
/* 2秒フェードイン */28.57%{opacity:1;}
/* 3秒表示 */71.42%{opacity:1;}
/* 2秒フェードアウト */100%{opacity:0;}
}

/*-- 各画像 --*/
.src1{background-image: url(../images/top-banner_anime1.png);
animation-delay: 0s;
}
.src2{background-image: url(../images/top-banner_anime2.png);
animation-delay: 7s;}

.src3{background-image: url(../images/top-banner_anime3.png);
animation-delay: 14s;}

@keyframes bannerAnime{
/*1画像あたり 7秒
0～2秒     フェードイン
2～5秒     表示
5～7秒     フェードアウト
*/

/* 初期 */0%{opacity:0;}
/* 2秒フェードイン */9.52%{opacity:1;}
/* 3秒表示 */23.80%{opacity:1;}
/* 2秒フェードアウト */33.33%{opacity:0;}
/* 残り非表示 */100%{opacity:0;}
}

@media (max-width:768px) {
.top-anime{
background-image: url(../images/top-banner_anime-sp1.png);
background-size:containl}

.src1{background-image:url(../images/top-banner_anime-sp1.png);}
.src2{background-image:url(../images/top-banner_anime-sp2.png);}
.src3{background-image:url(../images/top-banner_anime-sp3.png);}

}