@media screen and (min-width: 768px) { /* PC・タブレット */

 #member {
  background:white;
  min-height:calc(100vh - 50px);
  width:100%;
  padding-bottom:20px;
  min-width:1100px;
 }
 #member .container {
  position:relative;
  width:1060px;
  min-width:1060px;
  padding:0 20px;
  margin:0 auto;
  text-align:left;
  font-size:16px;
 }
 #member .header {
  padding:20px 0 10px 0;
  font-size:60px;
  font-weight:bold;
 }
 #member .text {
  font-size:14px;
  font-weight:bold;
  margin:-20px 0 10px 0;
 }
 #member .tab_container {
  width:1094px;
  margin:0 auto;
  font-size:14px;
  text-align:left;
 }
 #member .tab {
  display:inline-block;
  width:calc(1094px / 5 - 2px);
  padding:5px 0 2px 0;
  margin-right:2px;
  border-radius:0 15px 0 0;
  background:silver;
  font-weight:bold;
  cursor: pointer;
  text-align:center;
 }
 #coin_tab { opacity:0.5; }
 #legend_tab { opacity:0.5; }
 #wonders_tab { opacity:0.5; }
 #seal_tab { opacity:0.2; }
 #member .tab div { display:inline; }

 #display_select {
  font-size:14px;
  font-weight:bold;
  margin-bottom:15px;
 }
 #display_select label {
  cursor:pointer;
  margin-right:10px;
 }
 #display_select input {
  position:relative;
  top:1px;
  transform: scale(1.2);
  margin-right:5px;
  font-size:20px;
 }

 #coin_list { display:none; }
 #legend_list { display:none; }
 #wonders_list { display:none; }

 .memberlist {
  table-layout: fixed;
  display:table;
  margin:0 auto;
  width:1098px;
  font-size:14px;
  font-weight:bold;
  color:#111111;
 }
 .memberlist td {
  border:solid 2px silver;
  border-radius:3px;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .memberlist .table_comment {
  width:calc(100% - 10px);
  padding:3px 5px;
  text-align:left;
  line-height:18px;
 }
 .memberlist .table_comment img {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  top:-2px;
  margin:-1px 0;
  height:20px;
  width:20px;
 }

 .memberlist .name {
  position:relative;
  font-size:10px;
  width:65px;
  min-width:65px;
  cursor:pointer;
  transition:0.3s;
 }
 .memberlist .name.room {
  background-color:rgba(65, 105, 225, 0.5);
  border-color:royalblue;
 }
 .memberlist .name.nyanko {
  background-color:rgba(255, 165, 0, 0.5);
  border-color:orange;
 }
 .memberlist .name.room.nyanko {
  border-image: linear-gradient(to right, royalblue, orange) 1;
  background:linear-gradient(to right,rgba(65, 105, 225, 0.5),rgba(255, 165, 0, 0.5));
 }
 .memberlist .name:hover {
   background:linear-gradient(to right,yellow,yellow)!important;
 }
 .memberlist .name.master:before {
  position:absolute;
  top:-5px;left:-2px;
  color:gold;
  content:"★";
  font-size:12px;
  transform:rotate(45deg);
  text-shadow:-1px -1px 0 rgb(155, 132, 3),1px -1px 0 rgb(155, 132, 3),-1px  1px 0 rgb(155, 132, 3),1px  1px 0 rgb(155, 132, 3);
 }
 .memberlist .name.grand:after {
  position:absolute;
  top:-5px;left:7px;
  color:gold;
  content:"★";
  font-size:12px;
  transform:rotate(45deg);
  text-shadow:-1px -1px 0 rgb(155, 132, 3),1px -1px 0 rgb(155, 132, 3),-1px  1px 0 rgb(155, 132, 3),1px  1px 0 rgb(155, 132, 3);
 }
 #boss_list .item { width:calc((1098px - 65px) / 14); }
 #coin_list .item { width:calc((1098px - 65px) / 18); }
 #legend_list .item { width:calc((1098px - 65px) / 15); }
 #wonders_list .item { width:calc((1098px - 65px) / 7); }
 #seal_list .item { width:calc((1098px - 65px) / 32); }

 .memberlist .itemname { font-size:10px;min-width:65px; }
 .memberlist .bossname { position:relative;font-size:7px; }
 .memberlist .bossname.small div { line-height:7px; }
 .memberlist .clear { background-color:rgb(189, 167, 44);color:white; }

 #boss_list .tokoyami { border:solid 2px purple; }
 #boss_list .seishugo { border:solid 2px royalblue; }
 #boss_list .togabito { border:solid 2px #111111; }
 #boss_list .bossname.rg { background-color:rgb(241, 87, 15);color:white; }
 #boss_list .bossname.dk { background-color:#6e137a;color:white; }
 #boss_list .bossname.mv { background-color:#184f81;color:white; }
 #boss_list .bossname.rr { background-color:#b13cc0;color:white; }
 #boss_list .bossname.sp { background-color:rgba(211, 43, 43, 0.938);color:white; }
 #boss_list .bossname.jz { background-color:rgb(29, 134, 47);color:white; }
 #boss_list .bossname.gd { background-color:rgb(218, 221, 18);color:#111111; }
 #boss_list .bossname.dm { background-color:rgb(27, 141, 248);color:white; }
 #boss_list .bossname.bs { background-color:rgb(2, 19, 36);color:white; }
 #boss_list .bossname.rb { background-color:rgb(255, 17, 17);color:white; }
 #boss_list .bossname.au { background-color:rgb(255, 140, 9);color:white; }
 #boss_list .bossname.fr { background-color:rgb(218, 241, 4);color:#111111; }
 #boss_list .bossname.wi { background-color:rgb(13, 182, 55);color:white; }
 #boss_list .bossname.nz { background-color:rgb(70, 129, 206);color:white; }
 #boss_list .level {
  position:absolute;
  top:0px;left:0px;
  width:12px;height:12px;
  font-size:6px;
  line-height:14px;
  color:black;
  border-radius:50px;
 }
 #boss_list .level.lv1 {
  background:silver;
  border:solid 1px gray;
 }
 #boss_list .level.lv2 {
  background:gold;
  border:solid 1px rgb(255, 136, 0);
 }
 #coin_list .face { vertical-align:bottom;border:none; }
 #coin_list .face img { width:60%;display:inline-block;margin:-1px -2px -7px -2px; }
 #coin_list .face img[src*="3.png"],
 #coin_list .face img[src*="4.png"] { opacity:0.3; }
 #coin_list .roster {
  font-weight:bold;
  border:solid 2px darkorange;
  border-radius:3px;background:gold
 }
 #coin_list span.roster {
  display:inline-block;
  padding:0px 2px;
  margin-right:2px;
 }
 #legend_list .mission { cursor:pointer; }
 #legend_list .ryuoh { border:solid 2px orangered; }
 #legend_list .mild { border:solid 2px purple; }
 #wonders_list .wonder { vertical-align:middle; }
 #wonders_list .wonder img {
  display:inline;
  width:20px;
  margin:0 5px;
  vertical-align:middle;
 }
 #seal_list .tate {
  margin:0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size:10px;
 }
 #seal_list .seal_icon { border:none;}
 #seal_list .seal_icon img {
  display:block;
  width:100%;
 }
 #seal_list .data img {
  display:block;
  margin:0 auto;
  width:100%;
 }

 #member_status {
  position:fixed;
  display:none;
  top:210px;left:calc(50% - 250px);
  width:500px;min-height:460px;
  margin:10px;
  border-radius:10px;
  background:#8bc5ff;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  font-weight:bold;
  overflow:hidden;
  z-index:51;
  opacity:0;
  transition:0.3s;
 }
 #member_status .back_circle {
  position: relative;
  background-color:#1e90ff;
  height: 80px;
  border-bottom-left-radius: 100% 120px;
  border-bottom-right-radius: 100% 120px;
  padding:20px;
  z-index:80;
 }
 #member_status .icon {
  width:100px;
  margin-top:40px;
  border-radius:50%;
  border:solid white 4px;
  z-index:81;
 }
 #member_status #badge_wrapper1,
 #member_status #badge_wrapper2,
 #member_status #badge_wrapper3,
 #member_status #badge_wrapper4 {
  position:absolute;
  top:67px;
  width:90px;height:90px;
 }
 #member_status #ms_badge1,
 #member_status #ms_badge2,
 #member_status #ms_badge3,
 #member_status #ms_badge4 {
  height:95%;
 }
 #member_status #badge_wrapper1 { left:15px;z-index:78; }
 #member_status #badge_wrapper2 { left:105px;z-index:79; }
 #member_status #badge_wrapper3 { right:105px;z-index:79; }
 #member_status #badge_wrapper4 { right:15px;z-index:78; }
 #member_status table {
  width:100%;
  margin:0 auto;
  padding:20px;
  background:white;
  border-radius:15px;
  font-size:16px;
  text-align:left;
 }
 #member_status table td {
  line-height:24px;
 }
 #member_status table .left {
  width:110px;
  color:gray;
  font-size:12px;
  text-align:center;
 }
 #member_status table .left div {
  display:inline;
 }
 #member_status .erase {
  position:absolute;
  top:20px;right:20px;
  width:20px;height:20px;
  padding:5px;
  background:white;
  border-radius:50%;
  border:solid 2px #111111;
  font-weight:bold;
  line-height:20px;
  z-index:90;
  overflow:hidden;
  cursor:pointer;
 }

} @media screen and (max-width: 767px) {  /* スマホ */

 #member {
  background:white;
  min-width:100%;
  min-height:calc(100vh - 100px);
  padding:15px 0;
 }
 #member .container {
  width:calc(100% - 20px);
  padding:0;
  margin:0 auto;
  text-align:left;
  font-size:16px;
 }
 #member .header {
  padding:0 0 15px 0;
  font-size:30px;
  font-weight:bold;
 }
 #member .text {
  margin:-10px 0 10px 0;
  padding-left:10px;
  font-size:14px;
  font-weight:bold;
 }
 #member .tab_container {
  width:calc(95% - 2px);
  margin:0 auto;
  font-size:7px;
  text-align:left;
 }
 #member .tab {
  display:inline-block;
  width:calc(100% / 5 - 2px);
  padding:5px 0;
  margin-right:2px;
  border-radius:1px 15px 1px 1px;
  background:silver;
  font-weight:bold;
  text-align:center;
  line-height:8px;
 }
 #coin_tab { opacity:0.5; }
 #legend_tab { opacity:0.5; }
 #wonders_tab { opacity:0.5; }
 #seal_tab { opacity:0.2; }

 #display_select {
  padding-left:10px;
  font-size:11px;
  font-weight:bold;
  margin-bottom:15px;
 }
 #display_select label {
  cursor:pointer;
  margin-right:10px;
 }
 #display_select input {
  height:12px;
  margin:0;
 }


 #coin_list { display:none; }
 #legend_list { display:none; }
 #wonders_list { display:none; }

 .memberlist {
  table-layout: fixed;
  width:95vw;
  margin:0 auto;
  border-spacing:1px;
  font-weight:bold;
  color:#111111;
  text-align:center;
 }
 .memberlist td {
  border:solid 1px silver;
  border-radius:1px;
  font-size:7px;
  text-overflow: ellipsis;
 }
 .memberlist .table_comment {
  width:calc(100% - 10px);
  padding:2px 5px;
  text-align:left;
  line-height:10px;
 }
.memberlist .table_comment img {
  position:relative;
  display:inline-block;
  top:-2px;
  height:10px;
  width:10px!important;
 }
 .memberlist .name,
 .memberlist .name div {
  position:relative;
  width:50px;
  line-height:6px;
  font-size:7px;
 }
 .memberlist .name.room {
  background-color:rgba(65, 105, 225, 0.5);
  border-color:royalblue;
 }
 .memberlist .name.nyanko {
  background-color:rgba(255, 165, 0, 0.5);
  border-color:orange;
 }
 .memberlist .name.room.nyanko {
  border-image: linear-gradient(to right, royalblue, orange) 1;
  background:linear-gradient(to right,rgba(65, 105, 225, 0.5),rgba(255, 165, 0, 0.5));
 }
 .memberlist .name.master:before {
  position:absolute;
  top:-1px;left:-1px;
  color:gold;
  content:"★";
  font-size:7px;
  transform:rotate(45deg);
  text-shadow:-1px -1px 0 rgb(155, 132, 3),1px -1px 0 rgb(155, 132, 3),-1px  1px 0 rgb(155, 132, 3),1px  1px 0 rgb(155, 132, 3);
 }
 .memberlist .name.grand:after {
  position:absolute;
  top:-1px;left:6px;
  color:gold;
  content:"★";
  font-size:7px;
  transform:rotate(45deg);
  text-shadow:-1px -1px 0 rgb(155, 132, 3),1px -1px 0 rgb(155, 132, 3),-1px  1px 0 rgb(155, 132, 3),1px  1px 0 rgb(155, 132, 3);
 }
 #boss_list .item { width:calc((95vw - 50px) / 14 - 1px); }
 #coin_list .item { width:calc((95vw - 50px) / 18 - 1px); }
 #legend_list .item { width:calc((95vw - 50px) / 15 - 1px); }
 #wonders_list .item { width:calc((95vw - 50px) / 7 - 1px); }
 #seal_list .item { width:calc((95vw - 50px) / 32); }
 .memberlist .itemname {
  font-size:6px;
  width:50px;
  min-height:50px;
 }
 .memberlist .bossname {
  position:relative;
  min-height:50px;
 }
 .memberlist .bossname.small div { font-size:4px;line-height:5px; }
 .memberlist .tate {
  display:block;
  margin:0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
 }
 .memberlist .tate div {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size:5px;
 }
 .memberlist .clear { background-color:rgb(189, 167, 44);color:white;font-size:6px; }
 #boss_list .tokoyami { border-color:purple; }
 #boss_list .seishugo { border-color:royalblue; }
 #boss_list .togabito { border-color:#111111; }
 #boss_list .bossname.rg { background-color:rgb(241, 87, 15);color:white; }
 #boss_list .bossname.dk { background-color:#6e137a;color:white; }
 #boss_list .bossname.mv { background-color:#184f81;color:white; }
 #boss_list .bossname.rr { background-color:#b13cc0;color:white; }
 #boss_list .bossname.sp { background-color:rgba(211, 43, 43, 0.938);color:white; }
 #boss_list .bossname.jz { background-color:rgb(29, 134, 47);color:white; }
 #boss_list .bossname.gd { background-color:rgb(218, 221, 18);color:#111111; }
 #boss_list .bossname.dm { background-color:rgb(27, 141, 248);color:white; }
 #boss_list .bossname.bs { background-color:rgb(2, 19, 36);color:white; }
 #boss_list .bossname.rb { background-color:rgb(255, 17, 17);color:white; }
 #boss_list .bossname.au { background-color:rgb(255, 140, 9);color:white; }
 #boss_list .bossname.fr { background-color:rgb(218, 241, 4);color:#111111; }
 #boss_list .bossname.wi { background-color:rgb(13, 182, 55);color:white; }
 #boss_list .bossname.nz { background-color:rgb(70, 129, 206);color:white; }
 #boss_list .level {
  position:absolute;
  top:0px;right:0px;
  width:8px;height:8px;
  font-size:6px;
  line-height:10px;
  color:black;
  border-radius:50px;
  align-items:center;
 }
 #boss_list .level b {
  position:relative;
  left:0.5px;
 }
 #boss_list .level.lv1 {
  background:silver;
  border:solid 1px gray;
 }
 #boss_list .level.lv2 {
  background:gold;
  border:solid 1px rgb(255, 136, 0);
 }
 #coin_list .tate { line-height:6px; }
 #coin_list .face { vertical-align:bottom;text-align:center;border:none; }
 #coin_list .face img[src*="3.png"],
 #coin_list .face img[src*="4.png"] { opacity:0.3; }
 #coin_list img { width:100%;margin:0 -2px -4px -2px; }
 #coin_list .roster {
  font-weight:bold;
  border:solid 2px darkorange;
  border-radius:3px;background:gold
 }
 #coin_list span.roster {
  display:inline-block;
  padding:0px 2px;
  margin-right:2px;
 }
 #wonders_list .wonder { vertical-align:middle;font-size:5px; }
 #wonders_list .wonder div { display:inline-block; }
 #wonders_list .wonder img {
  display:inline;
  width:30%;
  margin-right:5px;
  text-align:center;
  vertical-align:middle;
 }
 #seal_list .tate {
  height:9vw;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height:1vw;
  font-size:1vw;
 }
 #seal_list .seal_icon { border:none;padding:0; }
 #seal_list .seal_icon img {
  display:block;
  margin:0 auto;
  width:100%;
 }
 #seal_list .data img {
  display:block;
  margin:0 auto;
  padding:3px 0;
  width:100%;
 }

 #member_status {
  position:fixed;
  display:none;
  top:100px;left:19%;
  width:calc(80% - 20px);min-height:440px;
  border-radius:10px;
  background:#8bc5ff;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  font-weight:bold;
  overflow:hidden;
  z-index:51;
  opacity:0;
  transition:0.3s;
 }
 #member_status .back_circle {
  position: relative;
  background-color:#1e90ff;
  height: 80px;
  border-bottom-left-radius: 100% 120px;
  border-bottom-right-radius: 100% 120px;
  padding:20px 10px;
 }
 #member_status .icon {
  width:100px;
  margin:40px 0 20px 0;
  border-radius:50%;
  border:solid white 4px;
 }
 #member_status #badge_wrapper1,
 #member_status #badge_wrapper2,
 #member_status #badge_wrapper3,
 #member_status #badge_wrapper4 {
  position:absolute;
  top:79px;
  width:70px;height:70px;
 }
 #member_status #ms_badge1,
 #member_status #ms_badge2,
 #member_status #ms_badge3,
 #member_status #ms_badge4 {
  height:100%;
 }
 #member_status #badge_wrapper1 { top:calc(45px);left:calc(50% - 130px); }
 #member_status #badge_wrapper2 { top:calc(120px);left:calc(50% - 130px); }
 #member_status #badge_wrapper3 { top:calc(45px);right:calc(50% - 130px); }
 #member_status #badge_wrapper4 { top:calc(120px);right:calc(50% - 130px); }
 #member_status table {
  width:100%;
  margin:10px auto;
  padding:10px;
  background:white;
  border-radius:15px;
  font-size:12px;
  text-align:left;
 }
 #member_status table td {
  line-height:20px;
 }
 #member_status table .left {
  width:60px;
  color:gray;
  font-size:10px;
  text-align:center;
 }
 #member_status table .left div {
  display:block;
  line-height:15px;
 }
 #member_status .erase {
  position:absolute;
  top:10px;right:10px;
  width:20px;height:20px;
  padding:5px;
  background:white;
  border-radius:50%;
  border:solid 2px #111111;
  line-height:16px;
  font-weight:bold;
  font-size:30px;
  color:black;
  z-index:50;
  overflow:hidden;
  cursor:pointer;
 }

}