@charset "UTF-8";

/* ======================================

	Base css
	Data.2013.09.28

====================================== */



.block {
    
    display:inline-block;
    margin: 15% 15% 15% 15%;
	
}
.image_m{
     display:inline-block;
	width:100%;
    max-width:1000px;
}
.container1{
    width: 100%;
    display: grid;
    float: left;
    grid-template-columns: 1fr 1fr 1fr;
}
.parts1{
    padding: 2%; 
    grid-column: 1/2;
    grid-row: 1/2;
}
.parts2{
    padding: 2%; 
    grid-column: 2/3;
    grid-row: 1/2;
}
.parts3{
    padding: 2%; 
    grid-column: 3/4;
    grid-row: 1/2;
}
.container2{
    width: 100%;
    display: grid;
    float: left;
    grid-template-columns: 1fr 1fr;
}
.parts4{
    padding: 2%; 
    grid-column: 1/2;
    grid-row: 1/2;
}
.parts5{
    padding: 2%; 
    grid-column:2/3;
    grid-row: 1/2;
}
.container3{
    width: 100%;
    display: grid;
    float: left;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.parts6{
    padding: 2%; 
    grid-column: 1/3;
    grid-row: 1/3;
}
.parts7{
    padding: 2%; 
    grid-column:4/7;
    grid-row: 1/4;
}
.parts8{
    padding: 2%;
    grid-column: 1/4;
    grid-row: 3/6;
}
.parts9{
    padding: 2%; 
    grid-column:5/7;
    grid-row: 4/6;
}

.container4{
    width: 100%;
    display: grid;
     float: left;
     grid-template-columns: 1fr 1fr;
}
.parts10{
    text-align: center;
    padding: 2%; 
    grid-column:1/3;
    grid-row: 1/3;
}
/* Loading Block */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
/*　.spinner {
  width: 100px;
  height: 100px;
  margin: 50vh;
  background-color: #000;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}*/
/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    
    .block {

    margin: 20% 0% 20% 0%;
	
     }
    .container1{
    padding: 10% 1% 10% 1%;
    
    }
    
    .container2{
    padding: 2%;
   
    }
    
    .container3{
    padding: 2%;
    }
    
    .container4{
    padding: 15% 0% 15% 0%;
    
    }