body, html {
 -webkit-user-select: none; /* iOS Safari */
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none; /* 長押しでメニュー表示防止 */
 touch-action: manipulation;   /* ダブルタップズーム抑制 */
 margin:0;
}
body {
 font-family:sans-serif;
 background:rgb(255, 44, 79);
}
a {
 text-decoration:none;
 color:rgb(255, 44, 79);}
#body {
 padding:30px 0 44px 0;
 margin:0 auto -200px auto;
 background:white;
 min-height:calc(100vh - 163px);
 max-width:500px;
}

#admin_mode {
 display:inline-block;
 width:300px;
 text-decoration:none;
 background:white;
 border-radius:50px;
 padding:5px 20px;
 margin:20px;
 font-size:30px;
 color:rgb(255, 44, 79);
 border:solid 4px rgb(255, 44, 79);
 text-align:center;
}
.title {
 position:fixed;
 top:0px;
 width:calc(100% - 10px);
 height:30px;
 display:flex;
 background:rgb(255, 44, 79);
 padding:5px;
 text-align:center;
 z-index:100;
}
.title .main {
 padding:2px 0 2px 5px;
 font-size:16px;
 font-weight:bold;
 color:white;
}
.pill_container {
 flex:1;
 text-align:left;
}
.pill {
 position:relative;
 display:inline-block;
 margin-left:10px;
 font-size: 12px;
 background: #fff;
 border: 2px solid #ddd;
 padding: 2px 10px;
 border-radius: 999px;
 font-weight:bold;
}

#footer {
 position:fixed;
 left: 50%;
 transform: translate(-50%, 0);
 bottom:-1px;
 width:calc(100% - 6px);
 max-width:calc(500px - 6px);
 height:44px;
 margin:0 auto;
 display:flex;
 gap:3px;
 padding:3px;
 background:rgb(255, 44, 79);
 z-index:999;
 overflow:hidden;
 transition: transform 0.3s ease;
}
#footer.hide {
 transform: translate(-50%, 100%);
}
#footer .menu {
 flex:1;
 margin:0;
 padding:5px;
 text-align:center;
 text-decoration:none;
 color:rgb(255, 44, 79);
 background:white;
 font-weight:bold;
 overflow:hidden;
 font-size:6px;
 line-height:16px;
}
#footer .menu img {
 height:24px;
 display:block;
 margin:0 auto;
}
#safe_bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;                /* 通常時は0 */
  background: rgb(255, 44, 79);
  z-index: 999;             /* footerの下に敷く */
  text-align:center;
  color:white;
  font-weight:bold;
  line-height:48px;
  z-index:1000;
}

/* ホーム画面（standalone）のときだけ */
html.standalone #footer{
  bottom: calc(env(safe-area-inset-bottom) + 20px);  /* ← 8pxはお好みで */
}
html.standalone #safe_bottom{
  height: calc(env(safe-area-inset-bottom) + 20px);
}
html.standalone #footer.hide{
  transform: translate(-50%, calc(100% + env(safe-area-inset-bottom) + 20px));
}
html.standalone #body{
  padding-bottom: calc(44px + env(safe-area-inset-bottom) + 20px); /* 8pxは好み */
 min-height:calc(100vh - 291px);
}