@charset "utf-8";

/*
============================ Nav CSS ============================

			ナビゲーション
				1.グローバルナビ

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

/* 1.グローバルナビ
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽ */

ul#nav {
  float: left;
	display: block;
	width: 575px;
	height: auto;
  margin: 18px 0 8px;
}
ul#nav:after { /* clearfix */ clear: both; content: " "; display: block; height: 0; visibility: hidden; }

ul#nav li {
  display: block;
  float: left;
  margin: 0;
}
ul#nav li a {
  display: block;
	height: 76px;
  text-decoration: none;
  margin: 0;
  font-size: 1.4rem;
}
ul#nav li a:hover {
	filter: alpha( opacity=80 );
	opacity: 0.80;
	-moz-opacity: 0.80;
}
ul#nav li:nth-child(1) a { width: 119px; }
ul#nav li:nth-child(2) a { width: 118px; }
ul#nav li:nth-child(3) a { width: 90px; }
ul#nav li:nth-child(4) a { width: 148px; }
ul#nav li:nth-child(5) a,
ul#nav li:nth-child(6) a,
ul#nav li:nth-child(7) a,
ul#nav li:nth-child(8) a {
  clear: both;
  background: url(../img/common/icon01.png) right center no-repeat;
  width: 70px;
  height: auto;
  margin: 8px 0 0 20px;
  line-height: 1;
}
#spNav,
#navBtn {
  display: none;
}
@media (max-width: 768px) {
  ul#nav {
    clear: both;
    float: none;
    width: 100%;
  }
  ul#nav li {
    height: auto;
  }
  ul#nav li:nth-child(1) { width: 27.4%; }
  ul#nav li:nth-child(2) { width: 24.2%; }
  ul#nav li:nth-child(3) { width: 17.9%; }
  ul#nav li:nth-child(4) { width: 30.4%; }
  ul#nav li:nth-child(5),
  ul#nav li:nth-child(6),
  ul#nav li:nth-child(7),
  ul#nav li:nth-child(8) {
    width: 0;
  }
  ul#nav li a {
    width: 100% !important;
    height: inherit;
  }
  ul#nav li img {
    width: 100%;
  }
  
  /* SPサブナビ */
  #spNav {
    width: 100%;
    background: #FBF6EC;
    padding: 10px;
    z-index: 10;
    border-top: 1px solid #808284;
  }
  #spNav:after { /* clearfix */ clear: both; content: " "; display: block; height: 0; visibility: hidden; }
  #spNav li {
    display: block;
    width: 49%;
    float: left;
    margin: 0 2% 6px 0;
    border: 1px solid #808284;
  }
  #sNav li:nth-child(2),
  #sNav li:nth-child(4) {
    margin: 0 0 6px;
    border: 1px solid #808284;
  }
  #spNav li a {
    display: block;
    background: #fff url(../img/common/icon08.png) right center no-repeat;
    background-size: 14px 12px;
    padding: 13px 26px 13px 13px;
    line-height: 1;
    font-size: 1.6rem;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
  }
  
  #sNav {
   margin: 0 0 5px; 
  }
  #sNav:after { /* clearfix */ clear: both; content: " "; display: block; height: 0; visibility: hidden; }
    
  #navBtn {
    display: block;
    float: right;
    width: 60px;
    line-height: 1;
    height: 0;
    padding: 60px 0 0;
    overflow: hidden;
    background: url(/img/common/navbtn.gif) no-repeat;
    background-size: 60px 60px;
  }
  #navBtn.active {
    background: url(/img/common/close.gif) no-repeat;
    background-size: 60px 60px;
  }
}

@media (max-width: 580px) {
  #navBtn {
    width: 40px;
    padding: 40px 0 0;
    background: url(/img/common/navbtn.gif) no-repeat;
    background-size: 40px 40px;
  }
  #navBtn.active {
    background: url(/img/common/close.gif) no-repeat;
    background-size: 40px 40px;
  }
}
@media (max-width: 480px) {
  #spNav li a {
    font-size: 1.2rem;
    padding: 10px 26px 10px 13px;
  }
}


/* フッタナビ */

ul.fNav {
  display: block;
  float: right;
  padding: 0 0 0 15px;
  margin: 0 0 0 20px;
  border-left: solid 1px #897F75;
}
ul.fNav.noBorder {
  border: none;
}
ul.fNav li {
  line-height: 1;
}
ul.fNav li a {
  background: url(../img/common/icon02.png) 0 center no-repeat;
  padding: 4px 0 4px 15px;
  margin: 0;
  line-height: 1.2;
  font-size: 1.4rem;
  text-decoration: none;
}
@media (max-width: 1024px) {
  ul.fNav {
    margin: 0 10px 0 0;
  }
}
@media (max-width: 1022px) {
  ul.fNav li a {
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  ul.fNav {
    float: none;
    padding: 0;
    margin: 0;
    border-top: solid 1px #C7C8C9;
    border-left: none;
  }
  ul.fNav li a {
    background: #fff url(../img/common/icon03.png) right center no-repeat;
    background-size: 27px 15px;
    width: 100%;
    font-size: 1.6rem;
    padding: 16px 30px 16px 15px;
    border-right: solid 1px #C7C8C9;
    border-bottom: solid 1px #C7C8C9;
    border-left: solid 1px #C7C8C9;
  }
  #switchBox1 ul.fNav,
  #switchBox2 ul.fNav,
  #switchBox3 ul.fNav {
    border-top: none;
  }
}


/* END */