﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
/*************navi***************/
.navi {
    height: 65px;
    /*margin: auto;*/
    width: 960px;
    position:absolute;
    top:180px;
    /*top:-60px;*/
    left:50%;
    transform:translateX(-50%);
    z-index:200;
}
.navi div{
    margin-right: 6px;
    margin-left: 6px;
}
.menu1 {
    background-image: url("/rishirifuji/images/menu1.png");
    overflow: hidden;
    display: block;
    height: 65px;
    width: 180px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu1 a{
    text-align: center;
    display: block;
    height: 65px;
    width: 180px; 
}
.menu1:hover{
    background-position: 0 -65px;
}
.menu2 {
    background-image: url("/rishirifuji/images/menu2.png");
    overflow: hidden;
    display: block;
    height: 65px;
    width: 180px; 
    position: relative;
    top: 0px;
    float: left;
}
.menu2:hover{
    background-position: 0 -65px;
}
.menu2 a{
    display: block;
    height: 65px;
    text-align: center;
    width: 180px;
}

.menu3 {
    background-image: url("/rishirifuji/images/menu3.png");
    overflow: hidden;
    display: block;
    height: 65px;
    width: 180px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu3 a{
    text-align: center;
    display: block;
    height: 65px;
    width: 180px; 
}
.menu3:hover{
    background-position: 0 -65px;
}
.menu4 {
    background-image: url("/rishirifuji/images/menu4-2.png");
    overflow: hidden;
    display: block;
    height: 65px;
    width: 180px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu4 a{
    text-align: center;
    display: block;
    height: 65px;
    width: 180px; 
}
.menu4:hover{
    background-position: 0 -65px;
}
.menu5 {
    background-image: url("/rishirifuji/images/menu5.png");
    overflow: hidden;
    display: block;
    height: 65px;
    width: 180px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu5 a{
    text-align: center;
    display: block;
    height: 65px;
    width: 180px; 
}
.menu5:hover{
    background-position: 0 -65px;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
/*************navi***************/
.navi {
    height: 175px;
    /*margin: auto;*/
    width: 200px;
    position:absolute;
    /*top:180px;*/
    top:3px;
    left:330px;
    z-index:200;
}

.navi div{
    margin-top: 3px;
}
.menu1 {
    background-image: url("/rishirifuji/images/menu1_l.png");
    overflow: hidden;
    display: block;
    height: 40px;
    width: 200px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu1 a{
    text-align: center;
    display: block;
    height: 40px;
    width: 200px; 
}
.menu1:hover{
    background-position: 0 -40px;
}
.menu2 {
    background-image: url("/rishirifuji/images/menu2_l.png");
    overflow: hidden;
    display: block;
    height: 40px;
    width: 200px; 
    position: relative;
    top: 0px;
    float: left;
}
.menu2:hover{
    background-position: 0 -40px;
}
.menu2 a{
    display: block;
    height: 40px;
    text-align: center;
    width: 200px;
}

.menu3 {
    background-image: url("/rishirifuji/images/menu3_l.png");
    overflow: hidden;
    display: block;
    height: 40px;
    width: 200px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu3 a{
    text-align: center;
    display: block;
    height: 40px;
    width: 200px; 
}
.menu3:hover{
    background-position: 0 -40px;
}
.menu4 {
    background-image: url("/rishirifuji/images/menu4_l.png");
    overflow: hidden;
    display: block;
    height: 40px;
    width: 200px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu4 a{
    text-align: center;
    display: block;
    height: 40px;
    width: 200px; 
}
.menu4:hover{
    background-position: 0 -40px;
}
.menu5 {
    background-image: url("/rishirifuji/images/menu5_l.png");
    overflow: hidden;
    display: block;
    height: 40px;
    width: 200px;  
    position: relative;
    top: 0px;
    float: left;
}
.menu5 a{
    text-align: center;
    display: block;
    height: 40px;
    width: 200px; 
}
.menu5:hover{
    background-position: 0 -40px;
}
}
