@charset "UTF-8";

/* Base --------------- */
#mainBg{
background:none;
}

.pure-pusher{
height: 100%;
}

.innerBg{
box-sizing:border-box;
height: 100%;
min-height: 100%;
margin: 0 0 0 250px;
position:relative;
}

.innerBg > .pageTtl{
box-sizing:border-box;
float:left;
height:100%;
width:30%;
padding:10% 0 0;
background:rgba(255,255,255,0.8) url(../../../w2img/20161017115707nav_main.jpg) no-repeat center center / cover;
}

.innerBg > .pageTtl .ttlSquare{
margin:0 auto;
}

.innerNav{
box-sizing:border-box;
float:left;
background-color:#efefef;
height:100%;
width:70%;
padding:1%;
}

#navBlc > nav{
height:100%;
position:relative;
}

#navBlc > nav > .up{
width:100%;
height:60%;
position:absolute;
}

#navBlc > nav > .up li{
width:32%;
height:48%;
position:absolute;
}

#navBlc > nav > .up li:nth-child(1){
background:url(../../../w2img/20161017115707nav_bg01.jpg) scroll no-repeat center center / cover;
width:31%;
height:100%;
top:0;
left:0;
}

#navBlc > nav > .up li:nth-child(2){
background:url(../../../w2img/20161017115707_DSC0831_500.jpg) scroll no-repeat center center / cover;
width:33%;
height:100%;
top:0;
left:33%;
}

#navBlc > nav > .up li:nth-child(3){
background:url(../../../w2img/20161017115707nav_bg03.jpg) scroll no-repeat center center / cover;
top:0;
right:0;
}

#navBlc > nav > .up li:nth-child(4){
background:url(../../../w2img/20161017115707nav_bg07.jpg) scroll no-repeat center center / cover;
top:52%;
right:0;
}

#navBlc > nav > .middle,
#navBlc > nav > .down{
width:100%;
height:38%;
position:absolute;
}

#navBlc > nav > .middle li,
#navBlc > nav > .down li{
width:31%;
height:100%;
position:absolute;
}

#navBlc > nav > .middle{
top:62%;
}

#navBlc > nav > .middle li:nth-child(1){
background:url(../../../w2img/20161017115707nav_bg04.jpg) scroll no-repeat center center / cover;
top:0;
left:0;
}

#navBlc > nav > .middle li:nth-child(2){
background:url(../../../w2img/20161017115707nav_bg05.jpg) scroll no-repeat center center / cover;
width:33%;
top:0;
left:33%;
}

#navBlc > nav > .middle li:nth-child(3){
background:url(../../../w2img/20161017115707nav_bg06.jpg) scroll no-repeat center center / cover;
width:32%;
top:0;
right:0;
}

/*
#navBlc > nav > .down{
top:76%;
}

#navBlc > nav > .down li:nth-child(1){
background:url(../img/top/nav_bg06.jpg) scroll no-repeat center center / cover;
top:0;
left:0;
}

#navBlc > nav > .down li:nth-child(2){
background:url(../img/top/nav_bg04.jpg) scroll no-repeat center center / cover;
top:0;
left:34%;
}

#navBlc > nav > .down li:nth-child(3){
background:url(../img/top/nav_bg04.jpg) scroll no-repeat center center / cover;
top:0;
right:0;
}
*/

#navBlc > nav li > a{
height:100%;
display:block;
}

#navBlc > nav .subj{
background-color:#1a4259;
font-size:90%;
color:#fff;
padding:15px 30px;
position:relative;
z-index:2;
text-align:center;
}

#navBlc > nav .overlay{
background-color:rgba(26,66,89,0.7);
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
transition:all 200ms ease-in-out;
}

#navBlc > nav li > a:hover .overlay{
background-color:rgba(26,66,89,0.0);
}

@media screen and (max-width: 1000px) {
.innerBg{
margin: 0;
}

#navBlc > nav .subj{
}
}

@media screen and (max-width: 800px) {
.innerBg > .pageTtl{
background:rgba(255,255,255,0.8) url(../../../w2img/20161017115707nav_main.jpg) no-repeat center center / cover;
width:100%;
height:auto;
padding:10% 0;
float:none;
}

.innerBg > .pageTtl .ttlSquare{
background-color:rgba(26,66,89,0.8);
}

.innerNav{
width:100%;
padding:2%;
float:none;
}

#navBlc > nav .subj{
padding:7px 20px;
}
}

@media screen and (max-width: 600px) {
.innerBg > .pageTtl .ttlSquare{
width:180px;
height:160px;
line-height:160px;
}

.innerNav{
height:auto;
}

#navBlc > nav > .up,
#navBlc > nav > .middle,
#navBlc > nav > .down{
height:auto;
position:static;
}

#navBlc > nav > .up li,
#navBlc > nav > .middle li,
#navBlc > nav > .down li{
width:100%;
height:auto;
padding:0 0 50%;
margin:0 0 2%;
position:relative;
}

#navBlc > nav > .up li:nth-child(1){
width:100%;
height:auto;
}

#navBlc > nav > .up li:nth-child(2){
width:100%;
height:auto;
left:auto;
}

#navBlc > nav > .up li:nth-child(3){
float:right;
width:49%;
padding:0 0 40%;
left:auto;
}

#navBlc > nav > .up li:nth-child(4){
float:left;
width:49%;
padding:0 0 40%;
}

#navBlc > nav > .middle li{
padding:0 0 40%;
}

#navBlc > nav > .middle li:nth-child(2){
width:49%;
float:left;
left:auto;
}

#navBlc > nav > .middle li:nth-child(3){
width:49%;
float:right;
}


#navBlc > nav > .down li{
width:49%;
padding:0 0 40%;
float:left;
}

#navBlc > nav > .down li:nth-child(2){
left:0;
float:right;
}
*/

#navBlc > nav .subj{
padding:7px 20px;
}
}

@media only screen and (max-device-width:768px) and (orientation:landscape) {
.innerNav{
}
}