/*++++トップ画像全体++++*/

#mainimg {
 position: relative;
 width  : 100%;
 margin     : 0 auto;
 overflow   : hidden;
}

/*++++スライド背景++++*/
#mainimg .bgImg {
 position   : absolute;
 top        : 0;
 left       : 0;
 bottom     : 0;
 right      : 0;
 opacity    : 0;
/*++++7枚5合計35s表示を繰り返し++++*/
 animation  : pseudoAnimation 35s infinite;
}

/*++++背景画像と表示時間設定++++*/
#mainimg .slide0 {
 background-image : url(image/sanei0.jpg);
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

#mainimg .slide1 {
 background-image :  url(image/sanei1.jpg);
 animation-delay  : 5s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}
#mainimg .slide2 {
 background-image : url(image/sanei2.jpg);
 animation-delay  : 10s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

#mainimg .slide3 {
 background-image : url(image/sanei3.jpg);
 animation-delay  : 15s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

#mainimg .slide4 {
 background-image : url(image/sanei4.jpg);
 animation-delay  : 20s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

#mainimg .slide5 {
 background-image : url(image/sanei5.jpg);
 animation-delay  : 25s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

#mainimg .slide6 {
 background-image : url(image/sanei6.jpg);
 animation-delay  : 30s;
 background-color: #efccaa; 
 background-blend-mode: luminosity;
}

/*++++35s間に5s表示する設定++++*/
@keyframes pseudoAnimation {
   0% { opacity: 0; }
/*++++表示タイミングをずらす++++*/
   5% { opacity: 1; } 
  15% { opacity: 1; }
  20% { opacity: 0; }
 100% { opacity: 0; }
}

/*++++トップ画像の文字設定（displayで切り替えする）++++*/
#mainimg .parallaxString{
 position: absolute;
 width:100%;
 padding:15px;
 font-size:4em;
 color:#fff;
 text-align: center;
 /*background:rgba(0, 0, 0, 0.2);*/
 /*++++上下中央配置++++*/
 top:90%; 
 left:50%;
 transform:translate(-50%,-50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 z-index:1;
 animation-name:fade;
 animation-duration:5s;
 animation-iteration-count:infinite;
 /*filter:drop-shadow(0 0 3px #000000);*/
 text-shadow:0 0 5px #808080,0 0 5px #808080,0 0 5px #808080,0 0 5px #808080,0 0 5px #808080,0 0 5px #808080,0 0 5px #808080;
 display: none;
}

@keyframes fade {
  0% { opacity: 0; }
 100% { opacity: 1; }
}

/*++++パララックス設定++++*/
#mainimg .para {
 background-attachment:fixed;
 background-position: 50% 20%;
 background-repeat: no-repeat;
 background-size: 1100px;
}

/*safari対応cssハック*/
_::-webkit-full-page-media, _:future, :root #mainimg .para {
background-attachment:scroll;
background-position: 50% 23%;
}

/*++++各画面サイズ指定++++*/

@media screen and (max-width:980px){
	#mainimg .para {background-size: 1040px;}
}
	
@media screen and (max-width:820px){
	#mainimg .para {background-size: 880px;}
}
	
@media screen and (max-width:720px){
	#mainimg .para {background-size: 780px;}
}

@media screen and (max-width:620px){
	#mainimg .para {background-size: 680px;}
}
	
@media screen and (max-width:520px){
	#mainimg .para {background-size: 580px;}
#mainimg .parallaxString{font-size:3em;}
}
	
@media screen and (max-width:420px){
	#mainimg .para {background-size: 480px;}
}
	
@media screen and (max-width:320px){
	#mainimg .para {background-size: 380px;}
	#mainimg .parallaxString{font-size:1.5em;}
}