/*========================
　smartphone　bottom menu
　========================*/


.mini-text{font-size:10px;}/*10文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    height:105px;
    margin:0;
    padding:0;
    background-color:#f5f5f5;
    border-top:2px solid #808080;
    border-bottom:5px solid #808080;
    z-index:30;

    display:flex;
}

ul.bottom-menu li {
    flex:1;
    background-color:#f5f5f5;
    list-style-type:none;
    text-align:center;
    font-size:25px;
}





.bottom-menu li a {
    display: block;
    color:#808080;/*アイコン＆文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}






/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}


#bottom-menu{
      padding-bottom: env(safe-area-inset-bottom);
}



/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*15展開メニューの文字サイズ*/
        line-height:150px;/*30　文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*47高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;/*メニューの幅100*/
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 90px;/*47　底の高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {

    border: none;}

    .bottom-menu img{
  display:block;
  margin:0 auto 3px;
}






.bottom-menu li a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  height:100%;

  color:#808080;
  text-decoration:none;

  padding-top:6px;
  padding-bottom:5px;

  line-height:1.1;

  box-sizing:border-box;
}

.bottom-menu img{
  display:block;
  margin:0 auto 1px;
  max-width:50px;
  height:auto;
}

.mini-text{
  font-size:10px;
  line-height:1.1;
  display:block;
  margin-top:-2px;
}















/*========================
  smartphone bottom menu
========================*/

/* 小文字 */
.mini-text{
  font-size:10px;
  line-height:1.3;
  display:block;
}

/* ========================
   メインボトムメニュー
======================== */

ul.bottom-menu{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  height:105px;

  margin:0;
  padding:0 0 env(safe-area-inset-bottom);

  background:#f5f5f5;

  border-top:2px solid #808080;
  border-bottom:5px solid #808080;

  z-index:999;

  display:flex;
}

ul.bottom-menu li{
  flex:1;
  list-style:none;
  text-align:center;
  background:#f5f5f5;
  position:relative;
}

/* リンク全体 */
.bottom-menu li a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  height:100%;

  color:#808080;
  text-decoration:none;

  padding-top:8px;
  padding-bottom:5px;

  line-height:1.2;

  box-sizing:border-box;
}

/* hover */
.bottom-menu li a:hover{
  color:#a9a9a9;
  background:#fafafa;
}

/* アイコン */
.bottom-menu img{
  display:block;
  margin:0 auto 4px;
  max-width:50px;
  height:auto;
}

/* ========================
   footer底上げ
======================== */

#footer{
  margin-bottom:120px;
}

/* ========================
   展開メニュー
======================== */

ul.menu-second-level{
  position:absolute;

  left:0;
  bottom:90px;

  width:100%;

  margin:0;
  padding:0;

  visibility:hidden;
  opacity:0;

  transition:0.25s;

  z-index:1000;
}

/* 展開時 */
li.menu-width-max:hover ul.menu-second-level{
  visibility:visible;
  opacity:1;
}

/* 展開リスト */
ul.menu-second-level li{
  list-style:none;
  border:none;
}

/* 展開リンク */
ul.menu-second-level li a{
  display:block;

  background:#f5f5f5;

  border-top:1px dashed #a9a9a9;

  padding:14px 5px;

  font-size:15px;

  line-height:1.5;

  color:#666;
}

/* 展開hover */
ul.menu-second-level li a:hover{
  background:lightgrey;
  color:#333;
}