/* ----ここから変更しました ----- */

#GWglobalNavi{
	width: 100%;
	background:#333;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	border-top: 4px solid #333;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;
line-height: 1.5;
}

#GWglobalNavi ul {
  width: 80%;
  height: 60px;
  margin: 0 auto 10px auto;
  padding: 0;
  list-style: none;
font-size: 11px !important;
}

#GWglobalNavi ul li {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

@media all and (min-width: 800px) {
#GWglobalNavi ul {
  margin-bottom: 0;
}

#GWglobalNavi ul li {
	width: 12.5%;
	height: 80%;
	float: left;
}
}

@media all and (min-width: 800px) {
#GWglobalNavi ul li:last-child:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  clear: left;
}
}

#GWglobalNavi ul li a{
  border-bottom: 1px solid #333;
  box-sizing: border-box;
  padding: 4px 0 0 0;
	background:#333;
	display: block;
	width: 100%;
  height: auto;
	text-align: center;
	color: #fff;
	text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

@media all and (min-width: 800px) {
#GWglobalNavi ul li a{
  border-bottom: 0;
  border-right: 1px solid #333;
	padding:20px 0;
	height: 100%;

}
}

#GWglobalNavi ul li:last-child a {
  border: 0;
}

#GWglobalNavi ul li a:hover{
	background:#777;
}

.fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10000;
}

body {
padding-bottom: 90px;
}
@media all and (min-width: 800px) {
body {
padding-bottom: 68px;
}
}

/*--- 画像置換 ---- */

@media all and (min-width: 800px) {
#GWglobalNavi ul li a,
#GWglobalNavi ul li a:hover {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    font-size: 0;
}

#GWglobalNavi ul li.gateway a {
    background-image: url(./gw-navi/gateway.png);
}

#GWglobalNavi ul li.deseo a {
    background-image: url(./gw-navi/deseo.png);
}

#GWglobalNavi ul li.phase a {
    background-image: url(./gw-navi/phase.png);
}

#GWglobalNavi ul li.kinoto a {
    background-image: url(./gw-navi/kinoto.png);
}

#GWglobalNavi ul li.shuffle a {
    background-image: url(./gw-navi/shuffle.png);
}

#GWglobalNavi ul li.mini a {
    background-image: url(./gw-navi/mini.png);
}

#GWglobalNavi ul li.photostudio a {
    background-image: url(./gw-navi/photostudio.png);
}

#GWglobalNavi ul li.harvest a {
    background-image: url(./gw-navi/harvest.png);
}

}

/*---- 追加 -----*/

#GWglobalNavi {
  height: 90px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.trigger {
  cursor: pointer !important;
}

#GWglobalNavi.clicked {
  height: 260px
}

#GWglobalNavi ul li {
  display: none;
}

#GWglobalNavi ul li:first-of-type,
#GWglobalNavi ul li.sp-showlinks {
  display: block;
}

#GWglobalNavi.clicked ul li.sp-showlinks {
  display: none !important;
}

#GWglobalNavi.clicked ul li {
  display: block !important;
}

#GWglobalNavi ul li.sp-closelinks {
  display: none !important;
}

#GWglobalNavi.clicked ul li.sp-closelinks {
  display: block !important;
}
  
@media all and (min-width: 800px) {
#GWglobalNavi, 
#GWglobalNavi.clicked {
	height: 68px;
}

#GWglobalNavi ul li {
  display: block
}

#GWglobalNavi ul li.sp-showlinks,
#GWglobalNavi.clicked ul li.sp-closelinks,
a.trigger {
  display: none !important;
}
}