@charset "utf-8";
/* CSS Document */

/*
SP
==================================================== */
@media screen and (max-width: 759.9px) {
/*navigation*/
.topNavi {
    width: 100%!important;
	text-align: center;
    background: #DDDDDD;
}

.topNavi ul {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* アイテムを折り返す */
}

.topNavi ul li {
    /*flex: 0 0 33.333%;  3列の場合 */
    flex: 0 0 50%;  /*2列の場合 */
    box-sizing: border-box;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    font-size: 15px;
    padding: .5rem .2rem;
    text-align: center;
    color: #000;
	display: flex;
    align-items: center;      /* 垂直方向（上下）の中央揃え */
    justify-content: center;   /* 水平方向（左右）の中央揃え */
}

/* 1行目のアイテムに対して 
.topNavi ul li:first-child {
    flex: none;
    width: 100%; 
}*/

/* 2行目以降のアイテムに対して */
.topNavi ul li:nth-child(n+2) {
    /*flex: 0 0 33.333%;  3行目以降も同じ幅を指定 */
    flex: 0 0 50%;  /*2行目以降も同じ幅を指定 */
}

/* 5番目から6番目のアイテムに対して */
.topNavi ul li:nth-child(n+5):nth-child(-n+6) {
    border-bottom: none;
}

/*.topNavi ul li.select {
    background: #1d2ea8;
    color: #FFF;
}*/

#depNavi .topNavi ul li:first-child,
#imaNavi .topNavi ul li:nth-child(2),
#styleNavi .topNavi ul li:nth-child(3),
#seaNavi .topNavi ul li:nth-child(4),
#uscNavi .topNavi ul li:nth-child(5),
/*#gwNavi .topNavi ul li:nth-child(2),
#stuNavi .topNavi ul li:nth-child(4),
#koyoNavi .topNavi ul li:nth-child(4),
#mikNavi .topNavi ul li:nth-child(5),*/
#kokyuNavi .topNavi ul li:last-child {
	background: #1d2ea8;
    color: #FFF;
}

#depNavi .topNavi ul li:first-child a,
#imaNavi .topNavi ul li:nth-child(2) a,
#styleNavi .topNavi ul li:nth-child(3) a,
#seaNavi .topNavi ul li:nth-child(4) a,
#uscNavi .topNavi ul li:nth-child(5) a,
/*#gwNavi .topNavi ul li:nth-child(2) a,
#stuNavi .topNavi ul li:nth-child(4) a,
#koyoNavi .topNavi ul li:nth-child(4) a,
#mikNavi .topNavi ul li:nth-child(5) a,*/
#kokyuNavi .topNavi ul li:last-child a {
    color: #FFF;
}

.topNavi ul li:first-child, 
.topNavi ul li:nth-child(3),
.topNavi ul li:nth-child(5) {
    border-left: none;
}

.topNavi ul li a {
    color: #000;
}

.topNavi ul li i {
    margin-right: .25rem;
}


}




/*
PC
==================================================== */
@media screen and (min-width: 760px),print {
/*navigation*/
.topNavi {
    width: 100%!important;
	text-align: center;
    background: #DDDDDD;
    padding: 0; /* 余白がなければ ul の margin:auto が効きやすい */
}

.topNavi ul {
	width: 1080px;
    /*width: 1140px;*/
    max-width: 100%;
	margin: 0 auto;
    padding: 0;          /* ← ここを忘れずに */
	display: flex;
	flex-wrap: wrap;
}

.topNavi ul li {
    /*flex: 0 0 33.333%;  3列の場合 */
    /*flex: 0 0 25%;  4列の場合 */
    /*flex: 0 0 20%;  5列の場合 */
    flex: 0 0 16.666%; /*6列の場合*/
    box-sizing: border-box;
	border-left: 2px solid #FFF;
    font-size: 16px;
    padding: .5rem;
    text-align: center;
}

/*.topNavi ul li.select {
    background: #1d2ea8;
    color: #FFF;
}*/

#depNavi .topNavi ul li:first-child,
#imaNavi .topNavi ul li:nth-child(2),
#styleNavi .topNavi ul li:nth-child(3),
#seaNavi .topNavi ul li:nth-child(4),
#uscNavi .topNavi ul li:nth-child(5),
/*#gwNavi .topNavi ul li:nth-child(2),
#stuNavi .topNavi ul li:nth-child(4),
#koyoNavi .topNavi ul li:nth-child(4),
#mikNavi .topNavi ul li:nth-child(5),*/
#kokyuNavi .topNavi ul li:last-child {
	background: #1d2ea8;
    color: #FFF;
}

#depNavi .topNavi ul li:first-child a,
#imaNavi .topNavi ul li:nth-child(2) a,
#styleNavi .topNavi ul li:nth-child(3) a,
#seaNavi .topNavi ul li:nth-child(4) a,
#uscNavi .topNavi ul li:nth-child(5) a,
/*#gwNavi .topNavi ul li:nth-child(2) a,
#stuNavi .topNavi ul li:nth-child(4) a,
#koyoNavi .topNavi ul li:nth-child(4) a,
#mikNavi .topNavi ul li:nth-child(5) a,*/
#kokyuNavi .topNavi ul li:last-child a {
    color: #FFF;
}

.topNavi ul li:last-child {
    border-right: 2px solid #FFF;
}

.topNavi ul li a {
    color: #000;
}

.topNavi ul li i {
    margin-right: .25rem;
}


}