@charset "Shift_JIS";
.century_navi{
   font-family: century;
   font-size:98%;
}
/*================================================
 *  グローバルナビゲーション
 ================================================*/
@media screen and (min-width: 960px) {
 .inner{
   margin: 0 auto;
   width:1100px;
   text-align : center;
}
.inner::after{
   clear: both;
   display: table;
   content: "";
}
nav{
   width:100%;
   background:rgb(0, 150, 130);
   border-bottom:1px solid rgba(0, 130,120,1.0);
   box-shadow:0 1px 3px rgb(220, 220, 220);
   z-index:10;
}
/* 共通 */
nav ul{
   margin:0;
   padding:0;
}
nav ul li{
   position:relative;
   margin:0;
   padding:0;
   list-style:none;
}
nav ul li a{
   display:block;
   margin:0;
   padding:22px 0px 20px 0px;
   background:rgb(0, 150, 130);
   color:#fff;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   font-size:14px;
   line-height:1;
   text-decoration:none;
   text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.55);
     transition:0.8s;
}
nav ul li:hover > a{
   color:#fff;
   background:rgb(0, 100, 100);
   text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.85);
}
    
/* 1段目 */
	nav ul.gnav > li{
   position:relative;
   float:left;
   margin:0;
   padding:0;
   text-align:center;
   list-style:none;
}
    
/* 1段目幅 */
    
#nav_1{
 width:9.0%;
border-left: 1px solid rgba(255, 255, 255, 0.7);
border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_2{
   width:10.0%;
 border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_3{
   width:10.0%;
  border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_4{
   width:10.0%;
  border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_5{
   width:13.5%;
 border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_6{
   width:13.5%;
 border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
 #nav_7{
   width:19%;
  border-right: 1px  dashed rgba(255, 255, 255, 0.7);
}
#nav_8{
   width:14.0%;
    border-right: 1px  solid rgba(255, 255, 255, 0.7);
}
    
@media screen and (max-width: 1024px) {
#nav_1{
border-left:none;
}
#nav_8{
border-right:none;
} 
}

nav ul.gnav > li:first-child{
   width:15%;
}
nav ul.gnav > li.subnav a{
   padding-right:20px;
}
nav ul.gnav > li.subnav > a::after{
   position:absolute;
   content:"";
   top:26px;
   width:0;
   height:0;
  right: 12px;
   border:6px solid transparent;
   border-top-color:#fff;
     transition:0.8s;
}
nav ul.gnav > li.subnav > a:hover::after{
  border-top-color:rgb(255, 230, 0);
}
/* 2段目 */
	nav ul li ul{
   position:absolute;
   z-index:3;
   top:57px;
   left:0;
   width:100%;
   margin:0;
   padding:0;
}
nav ul li ul li{
   overflow:hidden;
   width:100%;
   height:0;
   color:#fff;
   transition:0.5s;
}
nav ul li ul li a{
   padding:13px 15px;
   text-align:left;
   background:rgba(0, 150, 130,1.0);
   font-weight:normal;
}
nav ul li ul li a:hover{
   padding:13px 15px;
   text-align:left;
  background:rgba(0, 180, 120, 0.70);
   font-weight:normal;
}
nav ul li:hover > ul > li{
   overflow:visible;
   height:40px;
   border-bottom:1px solid rgb(0, 80, 0);
}
    
    
nav ul li:hover ul li:last-child{
   border-bottom:none;
}
nav ul.gnav > li:last-child > ul{
   right: 0%;
}
nav ul li ul li ul::before{
   position:absolute;
   content:"";
   top:13px;
   left:-20px;
   width:0;
   height:0;
   border:5px solid transparent;
   border-left-color:#fff;
}
nav ul.gnav > li:last-child ul li ul::before{
   position:absolute;
   content:"";
   top:-13px;
   right: -10%;
   margin-left:200px;
   border:5px solid transparent;
   border-right-color:#ff0000;
}
.gnav{
   display:block !important;
}
#spMenu{
   display:none;
}
.fixed{
   position:fixed;
   top:0;
   left:0;
}
nav ul li:last-child ul li ul{
   left: 100%;
   width: 100%;
}
nav ul li ul li ul::before{
   position: absolute;
   content: "";
   top:18px;
   right: 10%;
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-left-color:#fff;
transform: rotateZ(0deg)
}  
    
nav ul li ul li:hover > ul > li{
   overflow: visible;
   height : 40px;
}
nav ul li ul li ul li a{
   background : rgba(0, 180, 120, 0.70);
}
nav ul li:hover ul li ul li a:hover{
   background : rgba(0, 135, 130,1.0);
}
    
.nav2_1{
   width:150%;
}
.nav2_2{
   width:180%;
}
.nav2_3{
   width:110%;
}
#nav2_3_0{
   width:100%;
}
.nav2_4{
   width:230%;
}    
.nav2_5{
   width:170%;
}    
 .nav2_6{
   width:130%;
}        
 .nav2_7{
   width:106%;
   } 
 .nav3_2{
 width:90%;
 position : relative;
 top : -40px; 
 left: 100%;
}
 .nav3_3{
 width:150%;
 position : relative;
 top : -40px; 
 left: 100%;
}
.nav3_5{
 width:70%;
 position : relative;
 top : -40px; 
 left: 100%;
}
}

@media screen and (max-width: 1024px) {
 .inner{
   margin: 0 auto;
   width:100% !important;
}
nav ul.gnav > li:last-child > ul{
   left:-19%;
}
.nav2_1{
   width:160%;
}
.nav2_2{
   width:180%;
}
.nav2_3{
   width:120%;
}
#nav2_3_0{
   width:100%;
}
.nav2_4{
   width:240%;
}    
.nav2_5{
   width:180%;
}    
 .nav2_6{
   width:136%;
}        
 .nav2_7{
   width:120%;
}     
 .nav3_2{
 width:100%;
 position : relative;
 top : -40px; 
 left: 100%;
}
 .nav3_3{
 width:140%;
 position : relative;
 top : -40px; 
 left: 100%;
}
.nav3_5{
 width:80%;
 position : relative;
 top : -40px; 
 left: 100%;
}
}
    
@media screen and (max-width:960px) {
nav ul.gnav > li:last-child > ul{
   left:-19%;
}
.nav2_1{
   width:170%;
}
.nav2_2{
   width:190%;
}
.nav2_3{
   width:140%;
}
#nav2_3_0{
   width:100%;
}
.nav2_4{
   width:270%;
}    
.nav2_5{
   width:190%;
}    
 .nav2_6{
   width:138%;
}        
 .nav2_7{
   width:120%;
}     
 .nav3_2{
 width:90%;
 position : relative;
 top : -40px; 
 left: 100%;
}
 .nav3_3{
 width:130%;
 position : relative;
 top : -40px; 
 left: 100%;
}
.nav3_5{
 width:80%;
 position : relative;
 top : -40px; 
 left: 100%;
}
}

@media screen and (max-width:950px) {
nav ul.gnav > li:last-child > ul{
   left:-0%;
}
.nav2_1{
   width:100%;
}
.nav2_2{
   width:100%;
}
.nav2_3{
   width:100%;
}
#nav2_3_0{
   width:100%;
}
.nav2_4{
   width:100%;
}    
.nav2_5{
   width:100%;
}    
 .nav2_6{
   width:100%;
}        
 .nav2_7{
   width:100%;
}     
 .nav3_2{
 width:100%;
 position : relative;
 top : 0px; 
 left: 0%;
}
 .nav3_3{
 width:100%;
 position : relative;
  top : 0px; 
 left: 0%;
}
.nav3_5{
 width:100%;
 position : relative;
 top : 0px; 
 left: 0%;
}
}

 #nav_9{
    display:none;
}  
/*=======================
 ここからスマホ用
 ========================*/
@media screen and (max-width:950px) {
#nav_9{
      display:block;
    width:100%;
    }
   /*nav*/
nav{
   background:#fff;
}
nav ul{
   margin:0;
   padding:0;
}
nav .inner > ul{
   z-index:30;
   overflow:auto;
   position:fixed;
   top:80px;
   right:0;
   width:100%;
   height:100%;
   height:-webkit-calc(100% - 53px);
   height:calc(100% - 53px);
}
nav li{
   position:relative;
   width:100%;
   float:none;
   margin:0;
   text-align:left;
}
nav li:first-child{
   border-top:0;
}
nav li:last-child{
   border-bottom:0;
}
nav li a{
   display:block;
   padding:14px 0px 14px 30px;
    font-size:11pt;
   color:#fff;
   text-decoration:none;
   background:rgb(0, 130, 110);
   border-bottom:1px solid rgb(0, 100, 20);
    text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.45);
}
nav li a:hover{
   color:#fff;
   background:rgb(0, 130, 110);
   border-bottom:1px solid rgb(0, 90, 0);
}
nav ul ul{
   display:none;
   position:relative;
}
nav li li a{
   background:rgb(20, 160, 140);
   box-sizing:border-box;
   width:100%;
   padding:14px 30px 14px 40px;
   text-align:left;
} 
nav li li a:hover {
   background:rgb(20, 160, 140);
} 
nav ul li ul li ::before{
   display:none;
}  
nav ul li ul li:hover > ul > li{
   overflow: visible;
     border-bottom: 1px solid rgb(0, 50, 100);
}
nav ul li ul li ul li a{
   background : rgba(0, 50, 100, 0.75);
}
nav ul li:hover ul li ul li a:hover{
   background : rgb(20, 160, 140);
}
.gnav{
   display:none;
}
    
.subnav > a::before{
   display:block;
   content:"";
   position:absolute;
   -webkit-transform:rotate(45deg);
   transform:rotate(45deg);
   top:22px;
   right:30px;
   width:10px;
   height:10px;
   margin-top:-0px;
   background:rgba(250, 250, 250,1.0);
}
.subnav > a::after{
   display:block;
   content:"";
   position:absolute;
   -webkit-transform:rotate(45deg);
   transform:rotate(45deg);
   top:22px;
   right:30px;
   width:10px;
   height:10px;
   margin-top:-5px;
   background:rgb(0, 130, 110);
}
.subnav a:hover::after{
   background:rgb(0, 130, 110);
}
  .subnav2 > a::before{
   display:block;
   content:"";
   position:absolute;
   -webkit-transform:rotate(45deg);
   transform:rotate(45deg);
   top:22px;
   right:30px;
   width:10px;
   height:10px;
   margin-top:-0px;
   background:rgba(250, 250, 250,1.0);
}
.subnav2 > a::after{
   display:block;
   content:"";
   position:absolute;
   -webkit-transform:rotate(45deg);
   transform:rotate(45deg);
   top:22px;
   right:30px;
   width:10px;
   height:10px;
   margin-top:-5px;
   background:rgb(20, 160, 140);
}
.subnav2 a:hover::after{
   background:rgb(20, 160, 140);
}  
    
.active > a::before{
   margin-top:0;
}
.active > a::after{
   margin-top:5px;
}
#spMenu{
   display:block;
   position:fixed;
   top:20px;
   right:14px;
   z-index: 30;
}
#navBtn{
   display:inline-block;
   position:relative;
   width:46px;
   height:46px;
   background:rgb(0, 130, 110);
    z-index:30;
}
#navBtnIcon{
   display:block;
   position:absolute;
   top:50%;
   left:50%;
   width:34px;
   height:3px;
   margin:-2px 0px 0px -16px;
   background:#fff;
   transition:0.6s;
}
#navBtnIcon::before,
#navBtnIcon::after{
   display:block;
   content:'';
   position:absolute;
   top:50%;
   left:-4;
   width:34px;
   height:3px;
   background:#fff;
   transition:0.6s;
}
#navBtnIcon::before{
   margin-top:-11px;
}
#navBtnIcon::after{
   margin-top:9px;
}
#navBtn .close{
   background:transparent;
}
#navBtn .close::before,
	#navBtn .close::after{
   margin-top:0;
}
#navBtn .close:before {
   transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
}
#navBtn .close:after {
   transform:rotate(-135deg);
   -webkit-transform:rotate(-135deg);
}
}
    
/*===============
 880
 ================*/
   @media screen and (max-width: 880px) {
    .century_navi{
   font-family: century;
   font-size:160%;
}
    nav li a{
    font-size:10px;
}
   nav .inner > ul{
   top:90px;
   right:0;
}
#spMenu{
   top:15px;
   right:15px;
}
#navBtn{
   width:60px;
   height:60px;
}
}
/*===============
 768
 ================*/
@media screen and (max-width: 780px) {
.century_navi{
   font-family: century;
   font-size:100%;
}
  nav li a{
    font-size:11pt;
}
   nav .inner > ul{
   top:90px;
   right:0;
}
#spMenu{
   top:15px;
   right:10px;
}
#navBtn{
   width:60px;
   height:60px;
     border-radius: 0px;
}
}


/*===============
 680
 ================*/
   @media screen and (max-width: 680px) {
    .century_navi{
   font-family: century;
   font-size:110%;
}
   nav .inner > ul{
   top:90px;
   right:0;
}
#spMenu{
   top:15px;
   right:15px;
}
#navBtn{
   width:60px;
   height:60px;
}
}
/*===============
 480
 ================*/
 @media screen and (max-width: 480px) {
   nav .inner > ul{
   top:70px;
   right:0;
}
#spMenu{
   top:8px;
   right:8px;
}
#navBtn{
   width:54px;
   height:54px;
}
}
/*===============
 420
 ================*/
 @media screen and (max-width: 420px) {
   nav .inner > ul{
   top:70px;
   right:0;
}
#spMenu{
   top:8px;
   right:8px;
}
#navBtn{
   width:54px;
   height:54px;
}
}
/*===============
 400
 ================*/
 @media screen and (max-width: 400px) {
   nav .inner > ul{
   top:70px;
   right:0;
}
#spMenu{
   top:10px;
   right:10px;
}
#navBtn{
   width:50px;
   height:50px;
}
}