@charset "utf-8";
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: relative;
    width:100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image:url(../images/main3.jpg);
    background-size:cover;
    background-position:center;
}

#splash .inner {
	width: 100%;
	height: 60vh;
	background-color: rgb(255 255 255 / 0%);
	animation: change-color-anim 0.8s linear;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

@keyframes change-color-anim {
  0%{
    background-color: rgb(255 255 255 / 0%);
  }
  100%{
    background-color: rgb(255 255 255 / 40%);
  }
}



/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width: 100%;
    min-width: 200px;
    max-width: 500px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
    fill-opacity: 0;/*最初は透過0で見えない状態*/
    transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
    fill: none;/*塗りがない状態*/
    /*stroke: #254F25;/*線の色*/
  }

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path.st0{
    fill: #FFFFFF;/*塗りの色*/
    fill-opacity: 1;/*透過1で見える状態*/
    stroke: none;/*線の色なし*/
  }
  
#mask.done path.st1{
    fill: #6EC873;/*塗りの色*/
    fill-opacity: 1;/*透過1で見える状態*/
    stroke: none;/*線の色なし*/
  } 

/*========= レイアウトのためのCSS ===============*/

#container{
    width:100%;
    height: 60vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image:url(../images/main.jpg);
    background-size:cover;
    background-position:center;
}

#container .inner{
	width: 100%;
    height: 60vh;
    background-color: rgb(158 158 158 / 100%);
}

.ccopy{
    background: #6EC873;
    padding: 5px 10px;
    color:#FFFFFF;
    font-size:1.5rem;
}


.titlelogo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}


/*========= レイアウトのためのCSS ===============*/

h1{
  text-align: center;
  margin: 20px 0;
  font-size:1.5rem;
}

p{
  text-align: center;
  margin: 20px 0;
  font-size:1.5rem;
}

.eachTextAnime img.catch{
	margin-top: 10px;
	background-color: rgba(110,200,115,0.8);/*IE11*/	
}



/*========= 1文字ずつ出現させるためのCSS ===============*/


.eachTextAnime{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.eachTextAnime span{
	opacity: 0;
	}
.eachTextAnime.appeartext span{
	animation:text_anime_on 1.5s forwards;
	/*background-color: rgba(110,200,115,0.8);*//*IE11*/
	/*background-color: rgb(110 200 115 / 80%);*/
}
	
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

.eachTextAnime.appeartext {
	position: absolute;
    top: 77%;
    /*background-color: rgb(5 5 5 / 50%);*/
	background-color: rgb(110 200 115 / 80%);
    padding: 0 3%;
    color: #FFFFFF;
    width: fit-content;
    font-size: 1em;
    box-shadow:
    0 1.9px 2.5px rgb(0 0 0 / 5.7%),
    0 5px 6.1px rgb(0 0 0 / 7.6%),
    0 10.1px 11.4px rgb(0 0 0 / 8.6%),
    0 19.2px 19.8px rgb(0 0 0 / 9.2%),
    0 38.4px 34.8px rgb(0 0 0 / 10%),
    0 101px 74px rgb(0 0 0 / 13%);
    font-family:"Segoe UI", "メイリオ", Meiryo, sans-serif;
	letter-spacing: 0.1em;
}






/* 1600px以上 */
@media (min-width: 1600px) {

	/* Loading背景画面設定　*/
	#splash {
		height: 115vh;
	}
	
	
}

/* Small Tablets */
@media (max-width: 800px) {
	
	
	/* Loading背景画面設定　*/
	#splash {
		height: 60vh;
	}
	

	#splash_logo svg {
		width: 95%;
		min-width: 250px;
		max-width: 400px;
	}
	
	.eachTextAnime img.catch {
    margin-top: 10px;
    width: 75%;
	}

}
