@charset "utf-8";




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

.gazomei {
height: 64px;
position: absolute;
top: 656px;
right: 64px;
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%;
}

.gazomeicont {
height: 64px;
width: 64px;
position: absolute;
top: 656px;
right: 0px;
background: #ffffff;
z-index: 11;
opacity: 0.7;
}

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

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

.mae img, .maegazo img { 
width: 100%; 
}

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

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

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


.ato img, .atogazo img { 
width: 100%; 
}

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



.b1, .b1page {
background: #ffffff;
opacity: 1;
}

.kijiwaku {
width: 648px;
height: 100%;
padding: 0px 36px 0px 36px; 
text-align: left;
color: #000000;
overflow: auto;
}

.kiji {
width: 100%;
height: auto;
padding: 30px 0px 18px 0px; 
line-height: 166%;
}

.kiji img{
max-width: 440px;
max-height: 440px;
}

.b4 {
background: #148f74;
text-align: left;
color: #ffffff;
}

.b4page {
display: none;
}

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

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

.b8page {
background: #6b8780;
text-align: left; 
overflow: auto;
opacity: 0.9;
}

.b8setsumei {
width: 100%; height: 80px; 
margin: 0; 
padding: 0;
background: #8d1a6c; 
overflow: hidden;
}

.b8setsumeipage {
width: 100%; margin: 0; 
padding: 0;
background: #8d1a6c; 
overflow: auto;
position: relative;
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; 
}

.share {
width: 100%; height: 80px; 
background: #3b5998;
text-align: right;
overflow: hidden;
}


.b8title {
width: 216px;
height: 56px; 
padding: 12px; 
overflow: hidden;
font-size: 14px;
line-height: 160%;
color: #ffffff;
}

.b8titlepage {
width: 200px;
padding: 12px; 
font-size: 14px;
line-height: 160%;
color: #ffffff;
}

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

.b12 {
background: #c499ae;
}

.tsukisoroe {
display: inline-block; 
width: 40px; 
text-align: right;
}
.tsukisoroe2 {
display: inline-block; 
width: 80px; 
text-align: left;
padding-left: 14px;
}

.tsukisoroe3 {
text-align: left;
padding: 5px 0 8px 94px;
font-size: 11px;
line-height: 140%;
}



.bg1 {
background: #73858f;
}

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

.bg1 img {
width: 100%; 
}

.bg2 {
background: #6b8780;
}

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

.bg2 img {
width: 100%; 
}


.bg3 {
background: #8d8e72;
}

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

.bg3 img {
width: 100%; 
}

.bg5 {
background: #8f8173;
}

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

.bg5 img {
width: 100%; 
}

.bg6 {
background: #856b7e;
}

.bg6 img {
width: 100%; 
}

.bg7 {
background: #6f657d;
}

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

.bg7 img {
width: 100%; 
}

.bg9 {
background: #678392;
}

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

.bg9 img {
width: 100%; 
}


.bg10 {
background: #73858f;
}

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

.bg10 img {
width: 100%; 
}

.bg11 {
background: #6b8780;
}

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

.bg11 img {
width: 100%; 
}

.bg99 {
display: none;
}


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



@media screen and (orientation:landscape) {

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

.b1, .b1page {
top: 0px;
left: 0px;
width: 720px;
height: 720px;
}

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

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

.b8page {
right: 0px;
bottom: 0px;
height: 720px; 
width:240px;
}

.setsumei1 {
background: #a2bebc; 
}
.setsumei2 {
background: #6b8780; 
}

.setsumei3 {
background: #a2bebc; 
}
.setsumei4 {
background: #6b8780; 
}

.pno1 {
background: #7fc8ef; 
height: 80px; 
}

.pno2 {
background: #96b4c4; 
height: 80px; 
overflow: hidden;
}

#trigger82:checked ~ label .pno2 {
opacity: 1;
height: 240px;
z-index: 9;
} 

.pno3 {
background: #7fc8ef; 
height: 80px; 
overflow: hidden;
}

#trigger83:checked ~ label .pno3 {
opacity: 1;
height: 320px; 
z-index: 9;
} 

.pno4 {
background: #96b4c4; 
height: 80px; 
}

.pno6 {
background: #7fc8ef; 
height: 80px; 
}

.pno5 {
position: absolute;
bottom: 0; 
left: 0;
height: 80px; 
}


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


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

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

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

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

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

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

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

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

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

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

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



}






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


@media screen and (orientation:portrait) {

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

.b1, .b1page {
top: 0px;
left: 0px;
width: 720px;
height: 720px;
}

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


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

.b8page {
left: 0px;
bottom: 0px;
height: 320px; 
width: 720px;
opacity: 1;
background: transparent; 
}

.homepage {
top: 80px; 
}

.setsumei1 {
background: #a2bebc; 
}
.setsumei2 {
background: #6b8780; 
}

.setsumei3 {
background: #6b8780; 
}
.setsumei4 {
background: #a2bebc; 
}

.pno1 {
position: absolute;
bottom: 160px; 
right: 0;
background: #7fc8ef; 
height: 80px; 
}

.pno2 {
position: absolute;
bottom: 0px; 
left: 0px;
background: #96b4c4; 
height: 240px;
}

#trigger82:checked ~ label .pno2 {
opacity: 1;
height: 320px; 
z-index: 9;
} 

.pno3 {
position: absolute;
bottom: 0px; 
left: 240px;
background: #7fc8ef; 
height: 240px;
}

#trigger83:checked ~ label .pno3 {
opacity: 1;
height: 320px; 
z-index: 9;
} 

.pno4 {
position: absolute;
bottom: 80px; 
right: 0;
background: #96b4c4; 
height: 80px; 
}

.pno5 {
position: absolute;
bottom: 0; 
right: 0;
height: 80px; 
}

.pno6 {
position: absolute;
bottom: 0;
right: 0px; 
height: 80px; 
background: #7fc8ef; 
display: none;
}


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


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

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

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

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

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

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

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

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

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

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


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



}