* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.subnavi {
width: 100%; overflow: hidden;	
}
.subnavi ul {
list-style: none;
overflow: hidden;
}
.subnavi li a {
background: #86c622;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 20%; -webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
} .subnavi li a:hover {
background: #fc5f12;
} .subnavi small {
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
color: #aaa;
} .subnavi li:last-child a {
border: none;
} .subnavi .blue {
margin-top: 50px;
}
.blue li a {
background: #75b1de;
}
.blue small {
color: white;
}
.blue li a:hover {
background: #444;
} .subnavi .red {
margin-top: 50px;
}
.red li a {
background: #5C0002;
}
.red small {
color: white;
}
.red li a:hover {
background: #a60306;
}
li.m_area {
text-decoration: none;
background: none!important;
color: #FFF;
padding: 3px;
}
li.m_osaka {
background-color: #64b3d2!important;
}
li.m_hyogo {
background-color: #df9651!important;
}
li.m_kyoto {
background-color: #f6b632!important;
}
li.m_shiga {
background-color: #0276d2cc!important;
} @media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
.subnavi li a {
font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
.subnavi small {
font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
}
}
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
.subnavi li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
.subnavi li:last-child a, .subnavi li:nth-child(4) a {
border-right: none;
}
.subnavi li:nth-child(5) a, .subnavi li:nth-child(6) a, .subnavi li:nth-child(7) a, .subnavi li:nth-child(8) a {
border-bottom: none;
}
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
.subnavi li a {
width: 48%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
margin:0px;
vertical-align: bottom;
}
.subnavi li:nth-child(even) a { }
.subnavi li:nth-child(5) a, .subnavi li:nth-child(6) a { }
.subnavi li {
vertical-align: bottom;
}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.subnavi li a {
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
}