@charset "utf-8";
/* CSS Document */
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden;
    opacity: 0;
}

#pagetop{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3;
}
#pagetop a{
  position: relative;
  display: flex;
  width: 50px;
  height: 50px;
  text-decoration: none;
	justify-content:center;
	align-items:center;
  background-color:#5a5339;  
  color: #fff;
  font-size: 0.8em;
}
#pagetop a:hover{
	background-color: #454545;
}

/*========= レイアウトのためのCSS ===============*/
.btn-block {
  width: 200px;
  padding: 30px;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #EEEEEE;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash-logo svg{
    width:300px;
}

/*========= 画面遷移のためのCSS ===============*/


/*画面遷移の後現れるコンテンツ設定*/
#container #header{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name: Animetion;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション1秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}