/* ========================= */
/* Tabbar Wrap */
/* ========================= */

.tabbar-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom: 0;
  z-index:30;
	height:45px;
}



/* ========================= */
/* Top（アイコン） */
/* ========================= */

.tabbar{
  position: fixed;
	touch-action:none;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(45px + env(safe-area-inset-bottom));
  padding: env(safe-area-inset-bottom) 0px 0px;

  display: flex;
  align-items: center;
  justify-content: center;

	background:#292C33;
	z-index: 10;
}



/* ========================= */
/* Icon Group */
/* ========================= */

.tabbar-group{
  display: flex;
  align-items: center;
	justify-content: center;
  gap: 16px 12px;

  padding: 2px 10px;

  border-radius: 24px;
  background: #f9f9f9;
	
  box-shadow:
    inset 0 0 0 1.5px #ffffff;
	z-index: 30;
}



/* ========================= */
/* Icon Button（これが本質） */
/* ========================= */

.tab-btn{
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;
	color: #000;
  border-radius: 50%;
}




/* ========================= */
/* SVG */
/* ========================= */

.tab-btn svg{
  width:26px;
  height:26px;
}

.search svg{
  width:24px;
  height:24px;
}

.clock svg{
  width:23px;
  height:23px;
}

.star svg{
  width:24px;
  height:24px;
}