@charset "utf-8";




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

.gazomei {
height: 64px;
position: absolute;
top: 656px;
right: 0px;
background: #ffffff;
z-index: 11;
opacity: 0.7;
padding: 0 32px 0 32px;
font-size: 14px;
color: #333333;
display:table;
}
.gazomei p {
display:table-cell;
text-align: left;
vertical-align:middle;
line-height:150%;
}

.mae {
position: absolute;
top: 0;
left: 0;
height: 64px;
width: 64px;
z-index: 3;
opacity: 0.9;
transition: 0.3s ease-in-out;
}
.mae img { 
width: 100%; 
}

.mae:hover {
height: 85px;
width: 85px;
}

.ato {
position: absolute;
height: 64px;
width: 64px;
z-index: 3;
opacity: 0.9;
transition: 0.3s ease-in-out;
}
.ato img { 
width: 100%; 
}

.ato:hover {
height: 85px;
width: 85px;
}



.b1 {
background: #73858f;
}

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

.b1 img {
width: 100%; 
}

.b2 {
background: #6b8780;
}

#trigger2:checked ~ label .b2 {
background-color: #ffffff;
opacity: 1;
width: 720px;
height: 720px;
z-index: 9;
left: 0px;
} 

.b2 img {
width: 100%; 
}


.b3 {
background: #8d8e72;
}

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

.b3 img {
width: 100%; 
}

.b4 {
background: #8d1a6c;
text-align: left;
color: #ffffff;
}

.b4title {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: 148px; 
padding: 12px 48px 0px 12px; 
overflow: hidden;
font-size: 16px;
line-height: 140%;
}

.b4setsumei {
position: absolute;
left: 0px;
bottom: 0px;
width: 216px;
padding: 12px; 
overflow: hidden;
font-size: 14px;
line-height: 160%;
}

.b5 {
background: #8f8173;
}

#trigger5:checked ~ label .b5 {
background-color: #ffffff;  
opacity: 1;
width: 720px;
height: 720px;
z-index: 9;
top: 0px;
} 

.b5 img {
width: 100%; 
}

.b6 {
background: #856b7e;
}

.b6 img {
width: 100%; 
}

.b7 {
background: #6f657d;
}

#trigger7:checked ~ label .b7 {
background-color: #ffffff;  
opacity: 1;
width: 720px;
height: 720px;
z-index: 9;
top: 0px;
left: 0px;
} 

.b7 img {
width: 100%; 
}

.b8 {
background: #fae3ed;
text-align: left; 
overflow: auto;
opacity: 0.9;
}

#trigger8:checked ~ label .b8 {
opacity: 0.95;
z-index: 9;
} 

.b8setsumei {

width: 100%; 
height: 80px; 
margin: 0; 
padding: 0;
background: #8d1a6c; 
overflow: hidden;
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; 
-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; 
-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; 
-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; 
-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; 
}

.b8title {
/* width: 120px; */
height: 56px; 
padding: 12px; 
overflow: hidden;
font-size: 14px;
line-height: 133%;
color: #ffffff;
}

.b8title a:link{color: #ffffff; font-weight: bold;}
.b8title a:visited{color: #ffffff;}
.b8title a:hover{color: #555555;}

.b9 {
background: #678392;
}

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

.b9 img {
width: 100%; 
}


.b10 {
background: #73858f;
}

#trigger10:checked ~ label .b10 {
background-color: #ffffff;  
opacity: 1;
width: 720px;
height: 720px;
z-index: 9;
left: 0px;
} 

.b10 img {
width: 100%; 
}

.b11 {
background: #6b8780;
}

#trigger11:checked ~ label .b11 {
background-color: #ffffff;  
opacity: 1;
width: 720px;
height: 720px;
z-index: 9;
} 

.b11 img {
width: 100%; 
}

.b12 {
background: #fae3ed;
}





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



@media screen and (orientation:landscape) {

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

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

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

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

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

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

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

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

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

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

.b8 {
right: 0px;
bottom: 0px;
height: 480px; 
width:240px;
}

#trigger8:checked ~ label .b8 {
height: 720px;
} 

.setsumei1 {
background: #f2bcd5; 
}
.setsumei2 {
background: #c499ae; 
}
.setsumei3 {
background: #f2bcd5; 
}
.setsumei4 {
background: #c499ae; 
}


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

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

.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;
}

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

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

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

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

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

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

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

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

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

.b8 {
left: 0px;
bottom: 0px;
height: 240px; 
width:480px;
}

#trigger8:checked ~ label .b8 {
height: 400px; 
width:720px;
z-index: 9;
} 

.setsumei1 {
background: #f2bcd5; 
}
.setsumei2 {
background: #c499ae; 
}
.setsumei3 {
background: #c499ae; 
}
#trigger8:checked ~ label .setsumei3 {
background: #f2bcd5;
} 

.setsumei4 {
background: #f2bcd5; 
}
#trigger8:checked ~ label .setsumei4 {
background: #c499ae;
} 

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

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

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

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


}