/* Artfully masterminded by ZURB  */

/*　ナビゲーションメニュー　ドロップダウン用*/
.box4 span{
  font-size:2.5em;
  line-height:1.5em;
  position:relative;
  
  margin-right:0.6em;
}

/*----------ナビゲーション・メニュー　　開始------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
.bg_none nav{
  background-image:none !important;
  margin-bottom:0 !important;
}
nav {
  width:100%;
  overflow: hidden;
  background:url(../images/bg/crosspaper_black.gif);
  background:rgba(52, 152, 219,1.0);
  background:url(../img/nav-back.jpg);
}
.wrapper-nav:before{
content: "";
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 10px;
 
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.2);
    z-index: 100;
    }

.wrapper-nav1{width:100%; height:72px; margin:auto;}
.search-container{float:right; background-color:White;border-top: 1px solid Gray; padding:2px 6px 2px 7px;margin-top: 0px;margin-right: 0px;
                   
 /*Border Radius*/
-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.search-container input[type="text"]{float:left; width:150px; background-color:Transparent; border:0; outline:0;font-size:11px; color:black; 
margin-top:21px; padding:2px 2px 0px 2px;
                   　　                  
/*Transactions*/
transition: width 0.5s;-moz-transition: width 0.5s; /* Firefox 4 */ -webkit-transition: width 0.5s; /* Safari and Chrome */ -o-transition: width 0.5s; /* Opera */}
.search-container input[type="text"]:focus{width:150px;}
.search-container input[type="text"]:focus .search-container{background-color:Red;}
.search-container input[type="submit"]{background-image: url('../img/icons-sprite.png');background-color: transparent;border: 0;background-position: 18px 20px;float:right;}
.search-container input[type="submit"]:hover{opacity:0.7;}





/* ナビゲーションメニュー　設定　*/
/* メニューコンテンツ　*/
nav ul {
  list-style: none;
  overflow: hidden;
  float:left;
  width:940px;
  height:100%;
  padding-top:0px !important;
   padding-bottom:0px !important;}
nav ol{
  list-style:none;
}
nav ol li a{
  font-size:11px !important;
}

/*　各コンテンツ*/  
nav ul li{float:left; width:14%; height:100%;padding-bottom: 0px;padding-top: 0px; border-left:1px solid transparent; border-right:1px solid transparent;
  -webkit-transition: all 0.24s ease;
  -moz-transition: all 0.24s ease;
  -o-transition: all 0.24s ease;
  transition: all 0.24s ease;}

nav ul li:hover{
height:100%;
  background-color:rgba(51,51,51,1.0); 
  border-left:1px solid #343434; 
  border-right:1px solid #343434;
  -moz-box-shadow:    inset 0 0 7px rgba(0,0,0,0.8);
  -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.8);
  box-shadow:         inset 0 0 7px rgba(0,0,0,0.8);
}
nav ul li a{display:block; width:100%; height:100%; text-align:center; text-decoration:none; color:White; text-transform:capitalize;
font-size:20px;
font-family: 'Source Sans Pro', sans-serif; 
text-transform: uppercase;
font-weight:900;}
nav ul li a:hover{color:#ececec;text-decoration:none;}
nav ul li a span{display:block; width:27px; height:100%; margin:auto;}
nav ul li .span-notification{background-color:Red;position: absolute;margin-top: -63px;font-size: 10px;color: white;padding:0px 4px 0px 4px; margin-left:73px;font-weight: bold;
                             
/*Border Radius*/
-webkit-border-radius: 99px; -moz-border-radius: 99px; border-radius: 99px;
                              
/*Notification Shadow*/
-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);}                              
nav ul li .arrow-down{background-image:url('../img/arrow.png'); background-repeat:no-repeat; background-position: 114px 41px;}

nav ul li a .home{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-2px 0px;
}
nav ul li a .profile{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-33px 0px;}
nav ul li a .settings{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-63px 0px;}
nav ul li a .account{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-98px 0px;}
nav ul li a .messages{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-134px 0px;}
nav ul li a .dashboard{background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; background-position:-169px 0px;}


nav ul li a:hover .home{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-2px 0px;
}
nav ul li a:hover .profile{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-33px 0px;
}
nav ul li a:hover .settings{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-63px 0px;
}
nav ul li a:hover .account{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-98px 0px;
}
nav ul li a:hover .messages{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-134px 0px;
}
nav ul li a:hover .dashboard{
  background-image:url('../img/icons-sprite.png'); 
  background-repeat:no-repeat; background-position:-169px 0px;
}


nav .w-sm:hover .ol-submenu{display:block;}
nav .ol-submenu{display:none; background-color:#ffffff; opacity:0.85; position: absolute; width:200px;   z-index:99; margin-left:0px !important;
                
/*OL Shadow*/
/* -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); */}


nav .ol-submenu li{ color:black;
float:none; width:190px; ;  
  -webkit-transition: all 0.24s ease;
  -moz-transition: all 0.24s ease;
  -o-transition: all 0.24s ease;
  transition: all 0.24s ease;}


nav .ol-submenu li:hover{
  color:black;
  background-color:transparent;  
  border-left:5px solid rgba(52, 152, 219,1.0); 
  border-right:0px; 
  -moz-box-shadow:    inset 0 0 3px rgba(0,0,0,0);
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0);
  box-shadow:         inset 0 0 3px rgba(0,0,0,0);}
nav .ol-submenu li a{color:black;
  padding:15px 8px;
    -webkit-transition: all 0.24s ease;
  -moz-transition: all 0.24s ease;
  -o-transition: all 0.24s ease;
  transition: all 0.24s ease;
}
nav .ol-submenu li:hover a{

color:black;
  font-weight:bold; padding:15px 12px;}

nav .ol-submenu li a{text-align:left; text-transform:none;}


.hr{width:16%; margin:auto; height:5px; }

/*----------Begin Menu Style------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/



/*

Update V1.1

- The Old CSS3 Media Queries (commented in bottom of file) was replaced by the following code. 


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





/* #Media Queries
==================================================  */



  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 940px) {
            .wrapper-nav{width:100%;border-bottom:5px solid #e1e1e1;}
          .hr{display:none;}
            .nav ul li .span-notification{margin-left:5%;}
    }



  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 940px) {
          .search-container{display:none;}
          nav ul {list-style: none;overflow: hidden;float:left;width:100%;height:100%;}


    }



  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
         .search-container{display:none;}
         nav ul {list-style: none;overflow: hidden;float:left;width:100%;height:100%;}
         nav ul li a{font-size:11px;}
    }



  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
   .nav ul li .span-notification{font-size:9px;}

    nav .w-sm:hover .ol-submenu{display:none;}
    nav .ol-submenu{display:none;}
    nav ul li .arrow-down{background-image: url('');}
    }



  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
      nav{width:100%; margin:0px auto; border-bottom:0px;}
  nav ul{width:100%; height:30px; text-align:center;}
  nav ul li{width:16%; height:62px; border-left:0; border-right:0; border-bottom:5px solid #eeeeee;}
  nav ul li:nth-child(1){border-right:1px solid #e1e1e1; }
  nav ul li:nth-child(3){border-right:1px solid #e1e1e1;}
  nav ul li:nth-child(5){border-right:1px solid #e1e1e1;}

  nav ul li:hover{border-left:0; border-right:0; border-bottom:5px solid #f1f1f1;}
  nav ul li:nth-child(1):hover{border-right:1px solid #e1e1e1;}
  nav ul li:nth-child(3):hover{border-right:1px solid #e1e1e1;}
  nav ul li:nth-child(5):hover{border-right:1px solid #e1e1e1;}
  nav ul li a{font-size:11px;}
  
    nav .w-sm:hover .ol-submenu{display:none;}
    nav .ol-submenu{display:none;}
    nav ul li .arrow-down{background-image: url('');}         
  .hr{display:none;}
  .search-container{display:none;}
   nav ul li .span-notification{margin-left:80px;}
    }



/* お問い合わせページ　開始*/