body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.warapp{
 text-align:center;
 margin:0 auto;
}

/* グループ見出しはSP専用。PCでは非表示（SP側で表示上書き） */
.grp_label{ display:none; }



1.main {
  background: #fcc;
  margin-bottom: 10px;
}
.side {
  background: #fea;
}
.main,
.side {
  padding: 2%;
  border-radius: 10px
}

/* Responsive */
@media ( min-width : 600px ){
    .flexbox {
      display: -webkit-flex;
      display: flex;
    }
  .main {
    margin: 0 10px 0 0;
  }
}

.btn_time{
    width:300px;
    height:45px;
    line-height:45px;
    margin: 0px 0px 20px 0px;
}
.btn_time a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#4A88C5;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:24px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #4A88C5 ;
}

.btn_staff{
    width:300px;
    height:45px;
    line-height:45px;
    margin: 0px 0px 20px 0px;
}
.btn_staff a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#22AC38;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:24px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #22AC38 ;
}

.btn_date{
    width:300px;
    height:45px;
    line-height:45px;
    margin: 0px 0px 20px 0px;
}
.btn_date a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#DE5858;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:24px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #DE5858 ;
}

.btn_rireki{
    width:300px;
    height:45px;
    line-height:45px;
    margin: 0px 0px 20px 0px;
}
.btn_rireki a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#CC8F52;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:24px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #CC8F52 ;
}

.btn_rank{
	width: 300px;
	height: 45px;
	line-height: 45px;
    margin: 0px 0px 20px 0px;
}
.btn_rank a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#898989;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:24px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #898989 ;
}


.btn_link{
    width:800px;
    height:100px;
    line-height:100px;
    margin: 0px 0px 20px 0px;
}
.btn_link a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#4A88C5;
    text-align:center;
    border:1px solid #FFFFFF;
    color:#FFFFFF;
    font-size:64px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    box-shadow:0px 0px 0px 4px #4A88C5 ;
}



.btn_etc{
    width:150px;
    height:45px;
    line-height:45px;
    margin: 0px 0px 20px 0px;
}
.btn_etc a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#7C7C7C;
    text-align:center;
    border:0px solid #FFFFFF;
    color:#FFFFFF;
    font-size:18px;
	    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

/* ======================================================================
   SP版（max-width:599px）店舗業務向けデザイン
   PC版(min-width:600px)には一切干渉しない。Fire7(≈600px)/iPhone XS(375px)対応。
   ====================================================================== */
@media ( max-width : 599px ){

  body{
    margin:0;
    padding:0;
    background-color:#f4f9ff;
  }

  /* 縦積み（flex無効・既存min-width:600pxのflexとは別範囲） */
  .flexbox{
    display:block;
    padding:8px 10px 24px;
  }

  /* セクションの装飾を解除し、ボタン列だけ見せる */
  .main,
  .side{
    background:transparent !important;
    padding:0;
    margin:0;
    border-radius:0;
  }

  #warapp{
    padding:0;
  }

  /* --- 共通ボタン：1列フル幅・業務向けに高さと余白を最適化 --- */
  .btn_time,
  .btn_staff,
  .btn_date,
  .btn_rireki,
  .btn_rank,
  .btn_etc{
    width:100%;
    max-width:100%;
    height:auto;
    line-height:normal;
    margin:0 0 8px 0;
    box-sizing:border-box;
  }

  .btn_time a,
  .btn_staff a,
  .btn_date a,
  .btn_rireki a,
  .btn_rank a,
  .btn_etc a{
    box-sizing:border-box;
    display:block;
    width:100%;
    height:52px;
    line-height:52px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    color:#fff;
    text-decoration:none;
    /* 角丸はカード風に控えめ・box-shadowの輪郭は廃止して密度UP */
    border:none;
    border-radius:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.18);
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
  }

  /* --- グループ見出し（業務時の識別性UP・密度は保つ） --- */
  .grp_label{
    display:block;
    margin:14px 0 6px;
    padding-left:4px;
    font-size:12px;
    font-weight:bold;
    color:#666;
    letter-spacing:.04em;
    border-left:4px solid #bbb;
  }

  /* --- 色は既存の機能色を踏襲（一目でグループ識別） --- */
  .btn_time a   { background:#4A88C5; }  /* タイマー＝青 */
  .btn_staff a  { background:#22AC38; }  /* スタッフ/登録＝緑 */
  .btn_date a   { background:#DE5858; }  /* 成績入力＝赤 */
  .btn_rireki a { background:#CC8F52; }  /* 履歴＝茶 */
  .btn_rank a   { background:#898989; }  /* 一覧＝グレー */

  /* --- その他リンクは小さめ高さで密度を上げる --- */
  .btn_etc a{
    height:44px;
    line-height:44px;
    font-size:17px;
    background:#7C7C7C;
    border-radius:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
  }

  /* タップ時のフィードバック */
  .btn_time a:active,
  .btn_staff a:active,
  .btn_date a:active,
  .btn_rireki a:active,
  .btn_rank a:active,
  .btn_etc a:active{
    filter:brightness(.9);
  }
}

/* 狭幅スマホ(iPhone XS=375px 等)：文字を僅かに詰める */
@media ( max-width : 400px ){
  .btn_time a,
  .btn_staff a,
  .btn_date a,
  .btn_rireki a,
  .btn_rank a{
    font-size:18px;
  }
  .btn_etc a{
    font-size:15px;
  }
}