body {

	/* border: 5px solid #0005ff; */

}

#body_wrapper {
	display: none;
	/* overflow: auto;
	scrollbar-gutter:auto; */

	/* border: 5px solid #ff0000; */
}

.firstImg {
	display: none;
	/* scrollbar-gutter:scroll; */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0; /* Location of the image
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
      url("background-photo.jpg");
*/
	background-image: url("../dist/images/firstImp.png"); /* Image is centered vertically and horizontally at all times */
	background-position: center center; /* Image doesn't repeat */
	background-repeat: no-repeat; /* Makes the image fixed in the viewport so that it doesn't move when
     the content height is greater than the image height */
	background-attachment: fixed; /* This is what makes the background image rescale based on its container's size */
	background-size: contain;
	-webkit-background-size: contain; 
	/* Pick a solid background color that will be displayed while the background image is loading */
	/* background-size: 50%; */
	/* -webkit-background-size: 50%;  */
	/* Pick a solid background color that will be displayed while the background image is loading */
	 /* background-color:#464646;*/
	background-color: white; /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */ /*
      background-image: url("01359.jpg");
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
    */
}

.firstImg.scrollLock {
	overflow: scroll;
}

.setLogo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
/*
flex-direction: row; // デフォルト値
align-items: stretch; // デフォルト値
justify-content: flex-start; // デフォルト値
flex-wrap: nowrap; // デフォルト値
align-content: stretch; // デフォルト値
*/
	position: relative;
	top: 20%;
	left: 20%;
	height: auto;
	width: 30%;
	padding-bottom: 20px;

}

.setLogo_item { /*
   .flex-item {
    flex-grow: 0; //デフォルト値
    flex-shrink: 1; // デフォルト値
    flex-basis: auto; // デフォルト値
    }
*/
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	color: #ffffff;
	font-family: Modak, cursive;
	font-size: 60px;
	text-shadow: 5px 5px 20px #000;
}

.setLogo .boundText1 {
	-webkit-animation: BouTex 0.5s ease-in-out;
	animation: BouTex 0.5s ease-in-out;
}

.setLogo .boundText2 {
	-webkit-animation: BouTex 0.7s ease-in-out;
	animation: BouTex 0.7s ease-in-out;
}

.setLogo .boundText3 {
	-webkit-animation: BouTex 0.9s ease-in-out;
	animation: BouTex 0.9s ease-in-out;
}

.setLogo .boundText4 {
	-webkit-animation: BouTex 1.1s ease-in-out;
	animation: BouTex 1.1s ease-in-out;
}

.setLogo .boundText5 {
	-webkit-animation: BouTex 1.2s ease-in-out;
	animation: BouTex 1.2s ease-in-out;
}

.setLogo .boundText6 {
	-webkit-animation: BouTex 1.02s ease-in-out;
	animation: BouTex 1.02s ease-in-out;
}


@-webkit-keyframes BouTex {

0% {
	-webkit-transform: scale(0) translate(0, -500px);
	transform: scale(0) translate(0, -500px);
}

50% {
	-webkit-transform: scaleX(2) translate(0, 200px);
	transform: scaleX(2) translate(0, 200px);
}

70% {
	-webkit-transform: scaleY(0.5) translate(0, -100px);
	transform: scaleY(0.5) translate(0, -100px);
}

90% {
	-webkit-transform: scaleX(1.5) translate(0, 50px);
	transform: scaleX(1.5) translate(0, 50px);
}

100% {
	-webkit-transform: scale(1) translate(0, 0);
	transform: scale(1) translate(0, 0);
}

}

@keyframes BouTex {

0% {
	-webkit-transform: scale(0) translate(0, -500px);
	transform: scale(0) translate(0, -500px);
}

50% {
	-webkit-transform: scaleX(2) translate(0, 200px);
	transform: scaleX(2) translate(0, 200px);
}

70% {
	-webkit-transform: scaleY(0.5) translate(0, -100px);
	transform: scaleY(0.5) translate(0, -100px);
}

90% {
	-webkit-transform: scaleX(1.5) translate(0, 50px);
	transform: scaleX(1.5) translate(0, 50px);
}

100% {
	-webkit-transform: scale(1) translate(0, 0);
	transform: scale(1) translate(0, 0);
}
}
