@charset "utf-8";
/* 取扱商品一番上のメニュー */
.grid {display: grid;
  margin-left: auto;
  margin-right: auto;
}
.pronav{
    /*ボタンの形状*/
    display: inline-block;
    text-decoration: none;
	text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
	font-family: "M PLUS 1p";
	position: relative;
	line-height: 1;
}
.pronav{
font-weight: 500;
}
.nav01{
color: #fff; 
background:#4C4948;
}
.nav02{
color: #eee; 
background:#898583;
}
.nav03{
color: #fff; 
background:#4C4948;

}
/* 下↓ */
.pronav::before {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
transition: all .3s;
}

/*hoverした際の、ボタンの背景とテキスト色の変更*/
.pronav:hover{
  background:crimson;
  color: #fff;
}

/* ########### 666px以下 (375まで)########### */
@media screen and (max-width: 666px) {
.grid {
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 50px;
  max-width: 100%;
}
.pronav{
	padding-bottom:15px;
	padding-top: 15px;
}
.pronav{
font-size: 15px;
letter-spacing: 0.0em;
}
.nav03{
font-size: 15px;
letter-spacing: 0.0em;

}
/* 下↓ */
.pronav::before {
padding-right: 0px;
left:10px;
}
}

/* ########### 667pxから833pxまで ########### */
@media screen and (min-width: 667px) and (max-width: 833px) {
.grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 60px;
  max-width: 100%;
}
.pronav{
	padding-bottom:15px;
	padding-top: 15px;
}
.pronav{
font-size: 17px;
letter-spacing: 0.03em;
}
.nav03{
font-size: 14px;
letter-spacing: 0.0em;
padding-left: 13px
}
/* 下↓ */
.pronav::before {
padding-right: 0px;
left:15px;
}
}

/* ########### 834px 以上 ########### */
@media (min-width:834px) {
.grid {display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 60px;
  max-width: 1100px;
}
.pronav{
	padding-bottom:15px;
	padding-top: 15px;
}
.pronav{
font-size: 17px;
letter-spacing: 0.1em;
}
.nav03{
font-size: 16px;
letter-spacing: 0.05em;
padding-left: 17px
}
/* 下↓ */
.pronav::before {
padding-right: 0px;
left:18px;
}
}