@charset "utf-8";




#sotowaku {
background: #666666;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
}


.sqbox {
font-size: 12px;
color: #555555;
text-align:left;
line-height: 150%;
}

.sqboxcover {
position: absolute;
top: 0;
left: 0;
height: 240px;
width:240px;
z-index: 2;
opacity: 1;
overflow: hidden; 
font-size: 16px;
color: #ffffff;
text-align:left;
line-height: 120%;
transition: background-color 0.5s ease-in-out, z-index 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out, margin 0.5s ease-in-out; 
-moz-transition: background-color 0.5s ease-in-out, z-index 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out, margin 0.5s ease-in-out; 
-webkit-transition: background-color 0.5s ease-in-out, z-index 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out, margin 0.5s ease-in-out; 
-o-transition: background-color 0.5s ease-in-out, z-index 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out, margin 0.5s ease-in-out; 
-ms-transition: background-color 0.5s ease-in-out, z-index 0.5s ease-in-out, opacity 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out, margin 0.5s ease-in-out; 
}

.img100 img{
width: 100%; 
}

.migishita {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
height: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}

.b1 {
background: #ffffff;
}

.bb11 {
position: absolute; 
top: 0px; 
width: 100%; 
height: 120px;
}


.bb12 {
position: absolute; 
bottom: 0px; 
width: 100%; 
height: 120px;
}

.name1z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger1:checked ~ label .name1z {
opacity: 1;
} 

#trigger1:checked ~ label .b1 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 

#trigger1:checked ~ label .name1 {
opacity: 0;
height: 0;
} 

.c1 {
top: 50%;
left: 50%;
margin: -120px 0 0 -120px;
} 

.b2 {
background: #8d1a6c;
}

.c2 {
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
} 

#trigger2:checked ~ label .name2 {
opacity: 0;
height: 0;
} 

#trigger2:checked ~ label .c2 {
top: 0;
left: 0;
margin: 0;
width: 80px;
height: 80px;
} 

.name2z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger2:checked ~ label .name2z {
opacity: 1;
} 

#trigger2:checked ~ label .b2 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 


.b3 {
background: #8f9227;
}

#trigger3:checked ~ label .name3 {
opacity: 0;
height: 0;
} 

.c3 {
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
} 
#trigger3:checked ~ label .c3 {
top: 0;
left: 0;
margin: 0;
width: 80px;
height: 80px;
} 

.name3z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger3:checked ~ label .name3z {
opacity: 1;
} 


#trigger3:checked ~ label .b3 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 



.b4 {
background: #905c24;
}
#trigger4:checked ~ label .name4 {
opacity: 0;
height: 0;
} 

.c4 {
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
} 
#trigger4:checked ~ label .c4 {
top: 0;
left: 0;
margin: 0;
width: 80px;
height: 80px;
} 

.name4z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger4:checked ~ label .name4z {
opacity: 1;
} 


#trigger4:checked ~ label .b4 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 



.b5 {
background: #148f74;
}

#trigger5:checked ~ label .name5 {
opacity: 0;
height: 0;
} 

.c5 {
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
} 

#trigger5:checked ~ label .c5 {
top: 0;
left: 0;
margin: 0;
width: 80px;
height: 80px;
} 

.c51 {
width: 240px;
height: 240px;
top: 50%;
left: 50%;
margin: -40% 0 0 -40%
} 

.c51 img{
width: 80%;
} 

.name5z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger5:checked ~ label .name5z {
opacity: 1;
} 


#trigger5:checked ~ label .b5 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 



.b51 {
position: absolute;
top: 0px;
left: 0px;
width: 240px;
height: 480px;
overflow: hidden;
}

.b52 {
position: absolute;
top: 80px;
right: 0px;
width: 204px;
height: 364px;
text-align: left;
padding: 18px;
overflow: hidden;
}

.b52 p {
padding: 0;
margin: 0;
}

.b6 {
background: #905c24;
}

#trigger6:checked ~ label .name6 {
opacity: 0;
height: 0;
} 

.b61 {
position: absolute; 
top: 80px; 
width: 100%; 
height:640px;  
text-align: left; 
overflow: auto; 
}

.c6 {
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
} 

#trigger6:checked ~ label .c6 {
top: 0;
left: 0;
margin: 0;
width: 80px;
height: 80px;
} 


.c61 {
width: 240px;
height: 240px;
} 

#trigger6:checked ~ label .c61 {
opacity: 0;
height: 0px;
} 

.name6z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger6:checked ~ label .name6z {
opacity: 1;
} 


.b7 {
background: #148f74;
}

.b8 {
background: #8d1a6c;
}

.ads {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
overflow: hidden;
}

.adama {
width: 180px;
height: 160px;
position: absolute;
top: 50%;
left: 50%;
margin: -80px 0 0 -90px;
overflow: hidden;
}



.b9 {
background: #905c24;
}

#trigger9:checked ~ label .name9 {
opacity: 0;
height: 0;
} 

.c9 {
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
} 

.c91 {
background: #0e6695;
width: 240px;
height: 240px;
} 

#trigger9:checked ~ label .c9 {
opacity: 0;
height: 0;
} 

#trigger9:checked ~ label .c91 {
opacity: 0;
height: 0;
} 

.name9z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger9:checked ~ label .name9z {
opacity: 1;
} 


#trigger9:checked ~ label .b9 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 



.b10 {
background: #8d1a6c;
}

#trigger10:checked ~ label .name10 {
opacity: 0;
height: 0;
} 

.c10 {
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
} 

.name10z {
opacity: 0;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
} 

#trigger10:checked ~ label .name10z {
opacity: 1;
} 

#trigger10:checked ~ label .b10 .migishita {
opacity: 1;
height: 80px;
z-index: 11;
} 



.b11 {
background: #8f9227;
}

.b12 {
background: #148f74;
}

.c12 {
opacity: 1;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



@media screen and (orientation:landscape) {


#sotowaku {
height:720px;
width: 960px;
margin: -360px 0 0 -480px;
}

.b1 {
top: 0px;
left: 0px;
}

#trigger1:checked ~ label .b1 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 

.b2 {
top: 0px;
left: 240px;
}

#trigger2:checked ~ label .b2 {
background-color: #ffffff;
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 

.b3 {
top: 0px;
right: 240px;
}

#trigger3:checked ~ label .b3 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 

.b4 {
top: 0px;
right: 0px;
}

#trigger4:checked ~ label .b4 {
background-color: #ffffff;  
opacity: 0.9;
height: 480px;
z-index: 9;
} 


.b5 {
top: 240px;
left: 0px;
}

#trigger5:checked ~ label .b5 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;

z-index: 9;
} 


.b6 {
top: 240px;
left: 240px;
}

#trigger6:checked ~ label .b6 { 
background-color: #ffffff;  
opacity: 0.9;
top: 0px;
left: 240px;
width: 480px;
height: 720px;
z-index: 9;
} 


.b7 {
top: 240px;
left: 480px;
}

.b8 {
top: 240px;
right: 0px;
}

.b9 {
left: 0px;
bottom: 0px;
}

#trigger9:checked ~ label .b9 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 720px;
z-index: 9;
} 

.b10 {
left: 240px;
bottom: 0px;
}

#trigger10:checked ~ label .b10 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 


.b11 {
right: 240px;
bottom: 0px;
}

.b12 {
right: 0px;
bottom: 0px;
}


}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@media screen and (orientation:portrait) {


#sotowaku {
height:960px;
width: 720px;
margin: -480px 0 0 -360px;
}



.b1 {
top: 0px;
left: 0px;
}

#trigger1:checked ~ label .b1 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 

.b2 {
top: 0px;
left: 240px;
}

#trigger2:checked ~ label .b2 {
background-color: #ffffff;
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 


.b3 {
top: 0px;
right: 0px;
}

#trigger3:checked ~ label .b3 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 

.b4 {
top: 240px;
right: 480px;
}

#trigger4:checked ~ label .b4 {
background-color: #ffffff;  
opacity: 0.9;
height: 480px;
z-index: 9;
} 


.b5 {
top: 240px;
left: 240px;
}

#trigger5:checked ~ label .b5 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;

z-index: 9;
} 


.b6 {
top: 240px;
right: 0px;
}

#trigger6:checked ~ label .b6 { 
background-color: #ffffff;
opacity: 0.9;
width: 480px;
height: 720px;
z-index: 9;
} 


.b7 {
top: 480px;
left: 0px;
}

.b8 {
top: 480px;
right: 240px;
}

.b9 {
right: 0px;
bottom: 240px;
}

#trigger9:checked ~ label .b9 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 720px;
z-index: 9;
} 

.b10 {
left: 0px;
bottom: 0px;
}

#trigger10:checked ~ label .b10 {
background-color: #ffffff;  
opacity: 0.9;
width: 480px;
height: 480px;
z-index: 9;
} 


.b11 {
right: 240px;
bottom: 0px;
}


.b12 {
right: 0px;
bottom: 0px;
}



}