.mainimage{
  width: 100%;
  height:80vh;
  position: relative;
  overflow: hidden;
}
.mainimagebg{
  width:100%;
  height:100%;
  background:url("../img/mainimage.jpg") no-repeat;
  background-size: cover;
}
/* loaderとは名ばかりで、白背景のdivをabsoluteで配置してコンテンツを隠し、アニメーション描画後にfadeoutさせています */
.loader{
  width:100%;
  height:80vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.logofade,.copy{
  opacity:0;
}
.forload {width:100%;
  width: 100%;
  height:20vh;
  position: relative;
	overflow: hidden;
}
.loader2 {
width:100%;
  height:20vh;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;}


/* PCとTablet時ロゴサイズ */
@media only screen and (min-width: 768px) {
.logosvg,.logowhite,.logoblack{position: absolute; top:calc(50% - 180px); left: calc(50% - 147px); width:294px; height:400px;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}
}
/* スマホ時ロゴサイズ */
@media only screen and (max-width: 768px) {
.logosvg,.logowhite,.logoblack{position: absolute; top:calc(50% - 180px); left: calc(50% - 137px); width:294px; height: 400px;}
}


/* ------------------------
背景画像拡大アニメーション設定 
------------------------ */
.mainimagebg{
background: url("../img/mainimage.jpg") no-repeat center center;
background-size: cover;
-webkit-animation: imagebulger 60s;
animation: imagebulger 60s forwards;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;
}
@-webkit-keyframes imagebulger {
  0% {
background-size: cover;
transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}
  100% {
background-size: cover;
transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 0.7
    );	
}
}
@keyframes imagebulger {
0%{
background-size: cover;
transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}
100% {
background-size: cover;
transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 0.7
    );	
}
}

	.st2{fill:#FFFFFF;}
	.st3{fill:#C30D23;}

/* IEはアニメーションさせない*/
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, .mainimagebg{
background: url("../img/mainimage.jpg") no-repeat center center;
background-size: cover;
animation: none;
}
}