/*======= background ======= */

/* トレーニング画面など */
.bg_paper{
  max-height: 100%;
  background-attachment: fixed;
  background-repeat: repeat; 
  background-image: url(../img/bg_img.png);
}
.bg_wrapper{
  width:100%;
  max-width: 640px;
  margin: 0 auto;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* メニュー画面 */
.bg_paper_mn{
  max-height: 100%;
  background-attachment: fixed;
  background-repeat: repeat; 
  background-image: url(../img/bg_img.png);

  display: flex; 
  flex-direction: column;
  width: 100vw;
  width: calc(var(--vw, 1vw) * 100);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.bg_wrapper_mn{ 
  width:100%;
  max-width: 640px;
  /* margin: 0 auto; */
  margin: 5vh auto 0 auto;
  /* margin: calc(var(--vh, 1vh) * 5) auto 0 auto; aaa*/
  overflow: auto;
  -ms-overflow-style: none;   /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none;      /*Firefoxへの対応*/
}
.bg_wrapper_mn::-webkit-scrollbar{
  display: none;              /*Google Chrome、Safariへの対応*/
}

/* 管理画面 */
.bg_paper_adm{
  max-height: 100%;
  background-attachment: fixed;
  background-repeat: repeat; 
  background-image: url(../img/bg_img.png);

  display: flex; 
  flex-direction: column;
  width: 100vw;
  width: calc(var(--vw, 1vw) * 100);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.bg_wrapper_adm{ 
  width:100%;
  /* max-width: 640px; */
  /* margin: 0 auto; */
  /* margin: 5vh auto 0 auto; */
  /* margin: calc(var(--vh, 1vh) * 5) auto 0 auto; aaa*/
  overflow: auto;
  -ms-overflow-style: none;   /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none;      /*Firefoxへの対応*/
}
.bg_wrapper_mn::-webkit-scrollbar{
  display: none;              /*Google Chrome、Safariへの対応*/
}

/* ヘッダー固定時のメイン要素表示方法 */
/* https://zenn.dev/knknk98/articles/10b2f071ad2bc1 */


/*======= Menu Box =======*/
.mnbox{
  border: 1px solid #cccccc;
  font-size: 100%;
  padding: 1vh 2vw 1vh 2vw;
  margin: 1vh 1vw 1vh 1vw;
  min-width:200px;
}
.mnbox .ttl{
  font-size: 120%;
  font-weight: bold;
  color: darkblue;
}
.mnbox p {
  margin: 0.2em;
  font-size: 90%;
  min-height: 1em;
}

.mnbtn {
  border-color: #a88734 #9c7e31 #846a29;
  background: #f3d078;
  background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
  background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
  border-radius: 8px;
  border: 2px outset #cccccc;
  font-size: inherit;
  text-align: center;
  padding: 0.3em;
  margin: 0.2em;
  font-size: 110%;
  white-space: nowrap;
  cursor: pointer ;
}

.mnipt {
  background-color: #fff;
  border-radius: 4px;
  font-size: 100%;
  font-weight: bold;
  border: 2px solid #cccccc;
  padding: 0.3em;
  margin: 0.4em;
  width:100%;
  min-width:200px;
}

.mntxt {
  background-color: #fff;
  font-weight: bold;
  padding: 0.3em;
  color: darkslateblue;
}

/*======= Status Message =======*/
.sts_scs{
  text-align: center;
  font-size: 100%;
  padding: 0.3em;
  min-height: 1em;
}
.sts_err{
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  color: red;
  padding: 0.3em;
  min-height: 1em;
}

/*======= Main Header =======*/
.main_hdr {
  height: 5vh;
  height: calc(var(--vh, 1vh) * 5);
  display: flex;
  width: 100%;
  max-width: 640px;
  position: fixed;
  justify-content: space-between;
  background-color: white;
  z-index: 10;
}
.main_hdr .btn_hm{
  cursor: pointer ;
}
.main_hdr .btn_so{
  background: linear-gradient(to bottom,#f7c9c9,#f18383);
  border-radius: 50%;
  border: 2px outset #cccccc;
  font-size: inherit;
  text-align: center;
  padding: 0.4em;
  /* margin: 0.1em; */
  height: 100%;
  width: 100%;
  cursor: pointer ;
}


/*======= User Picture =======*/
.uimgs {
  position: relative;
}
.uimgs img {
  border:dotted 1px #FFA8B8;
  height: 5vh;
  height: calc(var(--vh, 1vh) * 5);
}
.uimgm {
  position: relative;
}
.uimgm img {
  border:dotted 2px #FFA8B8;
  height: 10vh;
  height: calc(var(--vh, 1vh) * 10);
}

.uimgl {
  position: relative;
}
.uimgl img {
  border:dotted 3px #FFA8B8;
  height: 20vh;
  height: calc(var(--vh, 1vh) * 20);
}


/*======= Result Area =======*/
table.rslt{
  width: 96%;
  table-layout: fixed;
/*  text-align: left; */
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
  font-size: 90%;
  margin: auto;
}
table.rslt, thead{
  background-color: #edf7ff;
}
table.rslt, thead td{
  position: -webkit-sticky;   /* 縦スクロール時に固定する */
  position: sticky;
  top: 0;
  z-index: 1;   /* tbody内のセルより手前に表示する */
  background-color: #edf7ff;
  /* background-clip: padding-box; */
}
table.rslt, thead td:last-child{
  background-color: #edf7ff;
}
table.rslt, tbody{
  overflow-y: scroll;
  background-color: #fff;
}
table.rslt, td{
  border-collapse: collapse;
  border: 1px solid #ccc;
  vertical-align: middle;
  height: 4vh;
  height: calc(var(--vh, 1vh) * 4);
  padding: 0 0.5vw 0 0.5vw;
}
table.rslt, td:last-child{
  border: 1px solid #ccc;
  vertical-align: middle;
  height: 4vh;
  height: calc(var(--vh, 1vh) * 4);
  padding: 0 0.5vw 0 0.5vw;
}

.cur_ptr{
  cursor: pointer;
}