/* COMMON DEMO STYLE */
.page-view {
  height: 92vh;/*92*/
  width: 100%;/*100vw*/
  /*position: absolute;*/
  position: relative;
  top: 54px;
  left: 0;
 
}

.page-view .project {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/top/main.png);
  background-size: cover;
}



.page-view .project .text h1 {
  width: 45%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: -25px auto 0;
  display: table;
  text-align: center;
  
}


.page-view .arrows a {
  position: absolute;
  width: 60px;
  height: 65px;
  
  bottom: 0 ;
  left: 50%;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-family: sans-serif;
  margin-left: -30px;
  font-weight: normal;
  font-size: 90%;
  letter-spacing: 0;
  line-height: 100%;
  z-index: 98;
  
}


.page-view .arrows a span {
  position: absolute;
  width: 24px;
  height: auto;
  margin-left: -12px;
  bottom: 15px;
  left: 50%;
  text-align: center;
}



@media screen and (max-width: 768px) {
.page-view {
  /*height: 426px;
  width: auto;*/
  height: 80vh;/*75*/
  width: 100%;
  position: relative;
  top: 46px;
  left: 0;
  margin-bottom: 30px;
}
.page-view .project {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/top/main_sp.png);
  background-size: cover;
}

  .page-view .project .text h1 {
    width: 70%;
  position: absolute;
  top: 53%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: -30px auto 0;
  display: table;
  text-align: center;
  }
  
.page-view .arrows a {
  position: absolute;
  width: 60px;
  height: 60px;
  
  bottom: 0 ;
  left: 50%;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-family: sans-serif;
  margin-left: -30px;
  font-weight: normal;
  font-size: 70%;
  letter-spacing: 0;
  line-height: 100%;
  z-index: 98;
  
}


.page-view .arrows a span {
  position: absolute;
  width: 20px;
  height: auto;
  margin-left: -10px;
  bottom: 15px;
  left: 50%;
  text-align: center;
}


}

/* ----- 4grid ----- */
.grid_top {
	width: 100%;
        height: auto;
	margin: 0 auto;
        position: relative;
	overflow: hidden;
}

.grid_left {
	width: 49%;
        height: auto;
	margin: 0;
        margin-top: 2%;
        margin-raight: 1%;
        float: left;
        position: relative;
	overflow: hidden;
}

.grid_right {
        
	width: 49%;
        height: auto;
	margin: 0;
        right: 0;
        margin-top: 2%;
        margin-left: 1%;
        float: right;
        position: relative;
	overflow: hidden;
}

.grid50 a, .grid25 a, .grid100 a {
	color: #fff;
        text-align: center;
}

.grid50 h3, .grid25 h3, .grid100 h3 {
	width: 258px;
        height: 200px;
        margin: 0 auto 15px;
        text-align: center;
}


figure {
	position: relative;
	overflow: hidden;
	width: 100%;
}
figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
figure:hover figcaption {
	height: 100%;
	top: 0;
	left: 0;
	padding: 0;
}
.grid25 {
	width: 25%;
	height: auto;
	margin: 0;
	float: left;
}

.grid25 img, .grid50 img, .grid100 img {
        width: 100%;
        height: auto;
        overflow: hidden;
}

        
.grid50 {
	width: 50%;
	height: auto;
	margin: 0;
	float: left;
}
.grid100 {
	width: 100%;
	height: auto;
	margin: 0;
	float: left;
}