@charset "utf-8";

/**
* サイドメニューのCSS
*/

.submenu li a{
  margin:1rem 0;
  text-align:center;
  border: none!important;
  padding:10px 10px!important;
}
.submenu li{
  margin:1rem 0;
  border: 1px solid #8c876c!important;
}

/* 背景が左から出現＋テキスト */
.bgLR{
position:relative;/*テキストの基点となる位置を定義*/
}

.bgLR span.mask{
position:relative;/*背景色の基点となる位置を定義*/
  display: block;
  line-height: 0;/*行の高さを0にする*/
  overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.bgLR span.mask::before{
content:"";
position: absolute;
z-index: 2;
left:0;
top:0;
opacity:0;
/*移り変わる速さを変更したい場合はこの数値を変更*/
transition: .3s ease-in-out;
  transform: translateX(-100%);
background:#8c876c;/*背景色*/
width:100%;
height: 100%;
}

.bgLR:hover span.mask::before{/*hoverした時の変化*/
opacity:1;
transform: translateX(0);
}
.bgLR span {
width:100%;
height:100%;

}
.bgLR span.cap{
margin-top:1rem;
position: absolute;
opacity:0;
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
z-index:3;/*テキストを前面に出す*/
top: 50%;
  left: 50%;
transform: translate(-50%,-50%);
color: #fff;/*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5;/*行の高さを1.5にする*/
}

.bgLR:hover span.cap{
  /*hoverした時の変化*/
opacity:1;
}