/* 共通 */
html {
  font-family: sans-serif;
  line-height: 1.15;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
}

body{
  position: relative;
  text-align:center;
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
  
div.container{
  border:0px solid #a60;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  text-align:center;
}

div.contains0{
  position: absolute;
  border-radius: 10px;
  margin-top: 37.5px;
  width: 99.5%;
  min-height:450px;
  padding-top: 10px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border:0px solid #a60;
}

div.contains{
  position: absolute;
  border-radius: 10px;
  margin-top: 37px;
  width: 99.5%;
  min-height:450px;
  padding-top: 10px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.contains2{
  position: absolute;
  border-radius: 10px;
  margin-top: 9px;
  width: 99.5%;
  height: 450px;
  padding-top: 10px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.contains3{
  position: absolute;
  border-radius: 10px;
  margin-top: 9px;
  padding-top: 0px;
  width: 99.5%;
  height: 460.5px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.contains4{
  position: absolute;
  border-radius: 10px;
  margin-top: 60px;
  width: 99.5%;
  height: 480px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.contains5{
  position: absolute;
  border-radius: 10px;
  margin-top: 60px;
  width: 99.5%;
  height: 500px;
  box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.56);
  padding-top: 10px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

summary{
  cursor: pointer;
  width: 15%;
  font-size: 20px; 
  color: rgb(0, 50, 200);
  text-align:center;
  font-weight:bold;
  font-family: 'Anton', sans-serif;
}

summary:hover{
  text-shadow: 1px 2px 3px #808080;
}

summary.nondisplay{
  color: rgb(255, 255, 255);
}

.details {
  line-height: 2;
  border: 1px solid #DDD;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.details__summary {
  cursor: pointer;
  background: #F4F4F4;
  margin-left: auto;
  margin-right: auto;
}
.details__content {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.details__content * {
  transition: line-height 0.4s ease-out 0s, opacity 0.6s 0.3s;
  line-height: 0;
  opacity: 0;
  margin-left: auto;
  margin-right: auto;
}
.details[open] .details__content * {
  line-height: 2;
  opacity: 1;
  transition: .5s;
}

div.menu{
  display: flex;
  margin-left: -30px;
}

a.menu{
  display: block;
  height: 110%;
  width: 102%;
  color: rgb(0, 50, 200);
  text-decoration: none;
  padding-top: 5px;
  margin-top: -1px;
  margin-left: -1px;
}

a.menu:visited{
  color: rgb(0, 50, 200);
}

a.menu:hover{
  color: rgb(255, 255, 255);
}

a.menu:visited:hover{
  color: rgb(255, 255, 255);
}

ul li.menu {
  position: relative;
  font-weight:bold;
  font-size: 12px; 
  border-radius:10px;
  width: 100px;
  height: 25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  list-style-type: none!important;
  min-width: 100px;
  margin-left: 20px;
  margin-top: -1.5px;
  border:1px solid rgb(0, 50, 200); 
  list-style-type: none!important;
  text-align: center;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

ul li.menu:hover {
  position: relative;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

ul li.menu:active {
  position: relative;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

h1.control {
  position: absolute;
  width: 99.5%;
  font-size: 22px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  margin-left: auto;
  margin-right: auto;
  margin-top: -4px;
  margin-bottom: 20px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:10px;
}

h1.control2 {
  position: absolute;
  width: 100%;
  font-size: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:10px;
}


/* TOP画面 */

input.topwithimage {
  position: absolute;
  border-radius:10px; 
  cursor: pointer;
  border:1px solid  rgb(0, 50, 200);
  color: rgb(0, 50, 200);
  height: 50px; 
  width:700px;  
  left: 0%;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 24px; 
  font-weight:bold;
  margin-top: 10px;
  margin-left: 15%;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topwithimage:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  margin: 100 auto;
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
}

input.topwithimage:active {
  transform: translateY(1px);
}

input.topwithoutimage {
  position: relative;
  border-radius:10px; 
  cursor: pointer;
  border:2px solid rgb(0, 50, 200);
  color: rgb(0, 50, 200); 
  height: 70px; 
  width:700px;  
  left: 0%;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 24px; 
  font-weight:bold;
  margin-top: 170px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topwithoutimage:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255);  
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
}

input.topwithoutimage:active {
  transform: translateY(1px);
}

img.topimage {
  margin-top: 30px;
  width: 700px;
  height: 500px;
}

input.startinput {
  border-radius:10px; 
  border:2px solid rgb(0, 50, 200);
  color: rgb(0, 50, 200);
  height: 70px; 
  width:500px;  
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 24px; 
  font-weight:bold;
  margin-top: 180px;
  margin-left:auto;
  margin-right:auto;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.startinput:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255);  
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.startinput:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255);  
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

div.base-frame {
  display: flex;
  border-radius:5px; 
  flex-direction: row;
  width: 98%;
  height: 400px;
  background: white;
  font-size: 14px; 
  margin-top: 10px;
  margin-left: 10px;
}


div.left-frame {
  width: 50%;
  margin-top: 10px;
}
div.right-frame {
  width: 50%;
  margin-top: 10px;
}


h1.controlsetting {
  position: relative;
  width: 91%;
  font-size: 18px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:10px;
}


input.returnsetting {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 24px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-left: 5px;
}

input.returnsetting:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.returnsetting:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}

h1.selectmessagesetting {
  width: 200px;
  height:30px;
  border-radius :8px;
  color:rgb(255, 255, 255);
  font-size: 12px;
  font-weight:bold;
  text-align: left;
  padding-top: 5px;
  padding-left: 20px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 0px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
}


select.selectitemsetting {
  cursor:pointer; 
  width: 233px;
  height:30px; 
  border: none;
  margin:0em 10px; 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0 0 2px rgb(0, 0, 0);
}

select.selectitemsetting:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

select.selectitemsettingdisable {
  cursor:pointer; 
  width: 233px;
  height:30px; 
  border: none;
  margin:0em 10px; 
  font-size: 14px;
  font-weight:bold;
  background: rgb(141, 141, 141);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

option.selectitemsetting {
  font-size: 18px; 
}

input.Displaycolor {
  width: 30px;
  height: 30px;
  margin-top: 45px;
  margin-left: 450px;
  border:1px solid rgb(0, 0, 0); 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff); 
  box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
}

input.Displaycolor:hover {
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
}

input.Displaycolor:active {
  transform: translateY(1px);
}


span#minutes {
  font-size: 16px; 
  color:rgb(255, 255, 255); 
}

div.time{
  width:100%;
  height:30px;  
  margin-top:0px;
}

input.limittime {
  text-align:center; 
  width:60px; 
  height:20px;  
  color:rgb(0, 0, 0); 
  border:1.5px  solid rgba(255, 255, 255, 0.52); 
  font-weight:bold;
  cursor:pointer; 
  margin-left: 10px;
  margin-top:0px;
  font-size: 18px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

input.limittime:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


input.limittimeupdate{
  cursor: pointer;
  border:1px solid rgb(0, 50, 200);  
  border-radius:10px;    
  width:130px; 
  height:30px;  
  color:rgb(0, 50, 200); 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px; 
  font-weight:bold;
  margin-left:3%;
  margin-top:0px;
  padding-top: 2px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.limittimeupdate:hover  {
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
  border:1px solid rgb(255, 255, 255); 
}

input.limittimeupdate:active  {
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  border:1px solid rgb(255, 255, 255); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.initialize{
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 24px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 780px;
}

input.initialize:hover  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.initialize:active  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}


h1.controlsettingpersonal {
  position: relative;
  width: 91%;
  font-size: 24px;
  height:25px;
  font-size: 18px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-radius:10px;
  margin-top: 8px;
}


div.base-frame-personal {
  display: flex;
  flex-direction: row;
  width: 99.5%;
  height: 420px;
  font-size: 14px; 
  margin-top:10px;
  margin-left: 10px;
}

div.settingset{
  display: flex;
  width:99%;
  height: 20px;
  margin-top: 5px;
  margin-left: 5px;
}


h1.selectmessagepersonal {
  width: 25%;
  height:26px;
  border-radius :8px;
  color: white;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  padding-top:2px;
  padding-bottom: 2px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-top: 0px;
}

h2.settingblank {
  padding-left: 5px;
  width: 0.5%;
  margin-top: 0px;
}


select.selectnamepersonal {
  cursor:pointer; 
  width: 30%;
  height:30px;
  margin:0em 10px; 
  font-size: 16px;
  font-weight:bold;
  color: rgba(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border: 1.5px solid rgb(255, 255, 255);
}


select.selectnamepersonal:hover {
  box-shadow: 0 0 5px rgb(0, 50, 200);
  border: 1.5px solid rgb(0, 50, 200);
}

select.selectnamepersonal:focus {
  box-shadow: 0 0 5px rgb(0, 50, 200);
  border: 1.5px solid rgb(0, 50, 200);
}

option.selectedsettingpersonal {
  font-size: 18px; 
  color: rgba(0, 0, 0);
}


div.Inputlimit{
  margin-top: -70px;
}

div.limitinput{
  margin-top: 0px;
}

input.commonsetting{
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 24px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 680px;
}

input.commonsetting:hover  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.commonsetting:active  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}

div.lowest{
  display: flex;
}

input.Displaycolorpersonal {
  width: 30px;
  height: 30px;
  margin-top: 0px;
  margin-left: 430px;
  border:1px solid rgb(0, 0, 0); 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff); 
  box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
}

input.Displaycolorpersonal:hover {
  border: 1px solid rgb(0, 0, 0); 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
}

input.Displaycolorpersonal:active {
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 0, 0); 
  transform: translateY(1px);
}


input.limitinput {
  text-align:center; 
  width:60px;  
  height:20px; 
  color:rgb(0, 0, 0); 
  border:1.5px  solid rgba(255, 255, 255, 0.52); 
  font-weight:bold;
  cursor:pointer; 
  margin-left: 10px;
  margin-top:0px;
  font-size: 18px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

input.limitinput:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


input.limitinputupdate{
  cursor: pointer;
  border:1px solid rgb(0, 50, 200);  
  border-radius:10px;    
  width:130px; 
  height:30px;  
  color:rgb(0, 50, 200); 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px; 
  font-weight:bold;
  margin-left:3%;
  margin-top:0px;
  padding-top: 2px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.limitinputupdate:hover  {
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
  border:1px solid rgb(255, 255, 255); 
}

input.limitinputupdate:active  {
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  border:1px solid rgb(255, 255, 255); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

span#times {
  font-size: 16px; 
  color:rgb(255, 255, 255); 
}

input.settingguest{
  width: 47%;
  height:25px; 
  margin-top: 1px;
  margin-left: 10px;
  border: none;
  font-size: 16px;
  font-weight:bold;
  color: rgba(0, 0, 0);
  background: silver;
  border:1px  solid silver;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

/* 結果出力画面*/


div.resultoutput{
  position: absolute;
  width: 600px;
  height: 100px;
  padding-left: 10px;
}


input.resetblank {
  position:  relative;    
  border-radius:10px; 
  border:2px solid transparent; 
  margin:0em 0px; 
  width: 100px;
  height: 26px;
  pointer-events: none;
  background: transparent;
  font-weight:bold;
  box-shadow:0 0 5px transparent; 
  margin-top: 2.5px;
  margin-left: 0px;
}


input.reset {
  position:  relative;    
  border-radius:10px; 
  border:2px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 5px rgb(0, 50, 200); 
  margin-top: 2.5px;
  margin-left: 0px;
}

input.reset:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow:0 0 5px rgb(0, 50, 200);
}

input.displayreset {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 24px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-left: 5px;
}

input.displayreset:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.displayreset:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}


input.return {
  position:  relative;    
  border-radius:10px; 
  border:2px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 5px rgb(0, 50, 200); 
  margin-top: 2.5px;
  margin-left: 5px;
}

input.return:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
}

input.return:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
}


input.endinput{
  border-radius:10px;  
  border:1px solid rgb(0, 0, 0);
  color:rgb(0, 0, 0); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  box-shadow: 0 0 5px rgb(0, 0, 0);
  font-size: 14px;
  font-weight:bold;
  margin-left: 850px;
  margin-top: 0px;
}


input.endinput:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 0, 0) , rgb(0, 0, 0) ,rgb(0, 0, 0), rgb(0, 0, 0));
  box-shadow: 0 0 5px rgb(0, 0, 0); 
}


input.endinput:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 0, 0) , rgb(0, 0, 0) ,rgb(0, 0, 0), rgb(0, 0, 0));
  box-shadow: 0 0 5px rgb(0, 0, 0); 
  transform: translateY(1px);
}


ul li.index{
  width: 30%;
  height: 40px;
  border-radius :8px;
  border:1px solid rgb(0, 50, 200); 
  font-size: 24px; 
  text-align: center;
  font-weight:bold;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  margin-bottom: 10px;
  list-style-type: none!important;
  margin-top: -1px;
  padding-top: 2px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

ul li.index:hover{
  color:rgb(255, 255, 255);  
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

ul li.index:active{
  color:rgb(255, 255, 255);  
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

a.index{
  height: 105%;
  width: 101%;
  color: rgb(0, 50, 200);
  text-decoration: none;
  display: block;
  margin-top: -3px;
  padding-top: 2px;
  margin-bottom: -1px;
  margin-left: -1px;
}

a.index:visited{
  color: rgb(0, 50, 200);
}

a.index:hover{
  color: rgb(255, 255, 255);
}

a.index:visited:hover{
  color: rgb(255, 255, 255);
}


div.resultupper{
  width: 100%;
  height: 130px;
  margin-left: 0px;
  text-align: left;
}


div.resultoutputdisplay{
  margin-top: 0px;
  margin-left: 600px;
  width: 40%;
  height: 50px;
  text-align: center;
}

h1.selectmessage {
  width: 270px;
  height:30px;
  border-radius :8px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  padding-top: 2px;
  padding-left: 20px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 0px;
}


select.selectitem {
  cursor:pointer; 
  width:230px; 
  height:30px;
  font-size: 16px;
  border: 1.5px solid rgb(255, 255, 255);
  margin-left: 10px;
  font-weight:bold;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

select.selectitem:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

option.selectitem {
  font-size: 18px;
}

option.selectitemreset {
  font-size: 18px;
  color:red;
}


input.displayresult{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width:110px; 
  height:30px;
  padding: 0px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.displayresult:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.displayresult:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.pdfresult{
  border-radius:10px; 
  border:1px solid rgb(236, 71, 71); 
  color:rgb(236, 71, 71); 
  width:110px;
  height:30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px;
  font-weight:bold;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(236, 71, 71);
}

input.pdfresult:hover {
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(236, 71, 71);
}


input.pdfresult:active{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(183, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(236, 71, 71);
  transform: translateY(1px);
}


input.excelresult{
  border-radius:10px; 
  border:1px solid rgb(91, 167, 15); 
  width:110px;
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  color:rgb(91, 167, 15);
  font-size: 14px;
  font-weight:bold;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.excelresult:hover  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.excelresult:active {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(91, 167, 15);
  transform: translateY(1px);
}

div.resultdatas{
  display: flex;
  text-align: center;
}

h1.resultdatas {
  width: 280px;
  height:30px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  padding-top: 4px;
  padding-left: 0px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 0px;
  margin-left: 40px;
  text-align: center;
}

div.resultimgoutput{
  display: flex;
  width: 100%;
  height: 280px;
  margin-top: 0px;
  text-align: left;
}

img.resultimgoutput {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 1px 1px 1px;
  width: 380px;
  height: 270px;
  border-radius: 5px;
  margin-top: 0px;
  margin-left: 20px;
}

img.resultimgoutput2 {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 1px 1px 1px;
  width: 540px;
  height: 270px;
  border-radius: 5px;
  margin-top: 0px;
  margin-left: 10px;
}


div.upperfield{
  height:200px;
}

div.lowerfield{
  height:260px;
}

div.deletebutton{
  display: flex;
  margin-top:-5px;
  height:40px;
  width: 800px;
}

input.detaildisplay{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height:29px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 9px;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.detaildisplay:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.detaildisplay:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.deleteresultbutton{
  border-radius:10px; 
  border:1px solid rgb(255, 70, 70); 
  color:rgb(255, 70, 70); 
  margin-left: 10px;
  margin-top: 8px;
  width:200px; 
  height:30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteresultbutton:hover  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteresultbutton:active  {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 70, 70);
  transform: translateY(1px);
}

label.deleteresult{
  border:0px solid rgb(255, 0, 0); 
  font-size: 14px; 
}

p.deletecomment {
  border-radius:10px; 
  color:rgb(255, 255, 255); 
  margin-left: 10px;
  margin-top: 8px;
  padding-top: 5px;
  width:200px; 
  height:25px;
  font-size: 14px; 
  text-align:center; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71));
  font-weight:bold;
}

h2.selectmessage {
  width: 200px;
  height:20px;
  border-radius :4px;
  font-size: 12px;
  font-weight:bold;
  text-align: center;
  margin-left: 15px;
  padding-top: 15px;
}

div.lowerfield{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-radius :5px;
  overflow: auto;
  width: 99.5%;
  height: 285px;
  overflow: scroll;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  margin-left: 3px;
  margin-top: -36px;
}

div.lowerfield table{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  width: 100%;
  margin: 0;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse:collapse;
}

div.lowerfield tr {
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-right: 0.1px solid #999;
  border-left:  0.1px solid #999;
  border-bottom:  0.1px solid #999;
}

div.lowerfield th{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 12px; 
  background: #eae4a5;
  color:rgb(0, 0, 0); 
  position: sticky;
  height: 30px;
  top: 0;
  left: 0;
}


div.lowerfield td{
  font-size: 12px; 
  font-weight:bold;
  word-wrap: break-word;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-right: 0.1px solid #999;
  border:1px solid rgb(255, 255, 255); 
  border-bottom:  0.1px solid #999;
  background: #FFF;
  padding: 5px;
}

div.modal-content{
  position: absolute;
  z-index:10000;
  width: 99%;
  height: 445px;
  border:1px solid rgb(255, 255, 255); 
  background-color:rgba(253, 253, 253, 0.8);
  font-weight:bold;
  margin-top: -10px;
  margin-left: 1px;
}


h4.modal-header{
  width: 99.5%;
  height: 25px;
  border:1px solid rgb(255, 255, 255); 
  background-color:rgb(0, 50, 200); 
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  font-size: 15px; 
  font-weight:bold;
  text-align: center;
  margin-top: 50px;
  margin-left: 2px;
  padding-top: 5px;
}

div.modal-message{
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff);
  border-width: 1px 0px; 
  border-color: #a60;
  box-shadow:0px 1px 0px  silver,0px 0px 4px 4px rgb(255, 70, 70) inset;
  border-style: solid;  
  font-weight:bold;
  text-align: left;
  padding-left: 50px;
  height: 75px;
  width: 95%;
  margin-top: -14px;
  margin-left: 1px;
  text-align: center;
}

div.modal-footer{
  margin-left: 10px;
  margin-top: 5px;
  height: 50px;
  width: 93.5%;
}

input.deleteanswered{
  border-radius:10px; 
  border:1px solid rgb(255, 70, 70); 
  color:rgb(255, 70, 70); 
  margin-top: 2px;
  margin-left: 400px;
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 15px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteanswered:hover{
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteanswered:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px  rgb(255, 70, 70);
  transform: translateY(1px);
}

input.deleteansweredcancel{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin-top: 2px;
  margin-left: 10px;
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 15px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.deleteansweredcancel:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.deleteansweredcancel:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px   rgb(0, 50, 200);
  transform: translateY(1px);
}

/* 出題リスト編集画面*/

h1.controledit {
  position: absolute;
  width: 100%;
  font-size: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.56);
  border-radius:10px;
}

input.resetlistblank {
  position:relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 5px;
}

input.resetlist {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 5px;
}

input.resetlist:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.resetlist:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}

div.edithead{
  display: flex;
  width: 99%;
  padding-left: 10px;
  height: 37px;
  margin-top: -2px;
}

div.editreset{
  width: 95%;
  height:25.5px;
}

div.right-frame_editlist {
  width: 50%;
  padding-left: 1%;
  padding-top: 21px;
  overflow: auto;
}

div.addtolistimage{
  margin-left:45px;
}

div.selectlistaddtoimage{
  margin-left: 0px;
}

div.addtolistimagelabel{
  width: 50%;
  box-shadow :0px 0px 15px silver;
  margin-top: -150px;
}

input.addtolistimage{
  width: 400px; 
  height: 40px; 
  border:1px solid rgb(0, 50, 200);
  font-size:16px; 
  display: none;
}

label.addtolistimage{
  cursor:pointer; 
  text-align: center; 
  border-radius:10px; 
  border:1.5px solid rgb(0, 50, 200);
  width: 100px;
  height: 30px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  box-shadow:0 0 5px rgb(0, 50, 200); 
  font-size: 14px; 
  font-weight:bold;
  color:rgb(0, 50, 200);
  margin-top: -10px;
  margin-left: -30px;
  padding-top: 4px;
}

label.addtolistimage:hover{
  border:1px solid rgb(255, 255, 255); 
  background-color:rgb(0, 50, 200); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
}

fieldset.addtolistimage{
  padding:10px; 
  border:2px solid rgb(255, 255, 255); 
  width:200px;
  height: 60px; 
  background-color: #fff;
  margin-top: 0px;
  margin-left: 95px;
}

img.addtolistimage{
  border-radius:5px; 
  width: 180px;
  height: 150px;
  border:1px solid #686868;
  margin-left: -155px;
  margin-top: -20px;
}

h1.selectmessageeditlist {
  width: 30%;
  height:20px;
  border-radius :8px;
  background: #f0f0f0;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  padding: 0.5em 0.5em 0.5em 1em;
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-top: 2px;
  padding-top: 3px;
}

select.selectitemeditlist {
  cursor:pointer; 
  width: 400px;
  height:30px; 
  font-size: 16px;
  font-weight:bold;
  border: 1.5px solid rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-top: 2px;
  margin-left: 10px;
}

select.selectitemeditlist:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 2px rgb(0, 50, 200);
}

select.selectitemeditlist:focus {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 2px rgb(0, 50, 200);
}

input.changelistname {
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin-top: 2px;
  margin-left: 10px;
  width:100px; 
  height:30px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.changelistname:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.changelistname:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.changelistnameblank {
  border-radius:10px; 
  border:1px solid transparent; 
  color: transparent; 
  margin-top: 2px;
  margin-left: 10px;
  width:100px; 
  height:30px; 
  cursor:pointer; 
  background: transparent; 
  font-size: 14px; 
  font-weight:bold;
}


input.createlist {
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin-top: 2px;
  margin-left: 10px;
  width:100%; 
  height:30px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.createlist:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.createlist:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


div.editnavi{
  display: flex;
  padding-top: 3px;
  padding-left: 10px;
  margin-top: 1px;
  width: 99%;
  height:35px;
}

h1.keywordsearch {
  width: 120px;
  height:27px;
  border-radius :8px;
  background: #f0f0f0;
  color: #000000;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  padding-top: 5px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  text-align: center;
  margin-top: 0px;
}

input.keywordsearch {
  display: block;
  width: 200px;
  height:28px; 
  border: none;
  font-size: 16px;
  font-weight:bold;
  color: rgb(0, 0, 0);
  outline: none;
  border: 1.5px solid rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  min-width: 150px;
}

input.keywordsearch:hover {
  border: 1.5px solid rgb(0, 50, 200);
  color: rgb(0, 0, 0);
  box-shadow:0 0 5px rgb(0, 50, 200); 
}


input.keywordclear {
  border-radius:5px; 
  border:1px solid  rgb(0, 0, 0, 0.56);
  width:50px; 
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 10px;
  font-weight:bold; 
  margin-top: 2px;
  margin-left: 5px;
  color:rgb(0, 0, 0, 0.56);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 0, 0, 0.56);
}

input.keywordclear:hover {
  background: linear-gradient(to bottom , #f0f0f0, #f0f0f0 ,#f0f0f0, #cdcdcd); 
}

input.keywordclear:active {
  background: linear-gradient(to bottom , #f0f0f0, #f0f0f0 ,#f0f0f0, #cdcdcd); 
  transform: translateY(1px);
}


input.addtolist{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  width:100px; 
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px; 
  font-weight:bold; 
  margin-top: 0px;
  margin-left: 40px;
  color:rgb(0, 50, 200);
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolist:hover  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolist:active  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.exceloutputlist {
  border-radius:10px; 
  border:1px solid rgb(91, 167, 15); 
  width:100px; 
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px; 
  font-weight:bold; 
  margin-top: 0px;
  color:rgb(91, 167, 15);
  margin-left: 30px;
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}


input.exceloutputlist:hover {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.exceloutputlist:active {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(91, 167, 15);
  transform: translateY(1px);
}

input.importexcelsetting{
  border-radius:10px; 
  border:1px solid rgb(91, 167, 15); 
  width:100px; 
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px; 
  font-weight:bold; 
  margin-top: 0px;
  color:rgb(91, 167, 15);
  margin-left: 30px;
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.importexcelsetting:hover  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.importexcelsetting:active  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(91, 167, 15);
  transform: translateY(1px);
}


input.deletelist {
  border-radius:10px; 
  border:1px solid rgb(255, 0, 0); 
  width:100px; 
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold; 
  margin-top: 0px;
  color:rgb(255, 0, 0);
  margin-left: 30px;
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0);
}

input.deletelist:hover {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0);
}

input.deletelist:active {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 0, 0);
  transform: translateY(1px);
}



div.editlist{
  border-radius:3px; 
  box-shadow: 0 0 1px rgb(0, 0, 0, 0.56);
  width: 99.8%;
  overflow: auto;
  height:370px;
  margin-left: 2px;
  margin-top: 5px;
}

div.editlist table{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin: 0;
  width:100%;
  table-layout: fixed;
  border-collapse:collapse;
}

div.editlist th{
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  font-size: 12px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

div.editlist tr{
  counter-increment: rowCount;
}

div.editlist td:first-child::before{
  content: counter(rowCount);
}

div.editlist td{
  font-size: 12px; 
  height: 10px;
  font-weight:bold;
  text-align: left;
  word-wrap: break-word;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-right: 0.1px solid #999;
  border-bottom:  0.1px solid #999;
  background: #FFF;
  padding: 5px;
}

th.th30 {
  width:30px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 8px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

th.th40 {
  width:40px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 11px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

th.th50 {
  width:50px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 10px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 10;
  left: 0;
}

th.th70 {
  width:70px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 11px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

th.th100 {
  width:100px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 11px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

th.th150 {
  width:160px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 11px; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}


img.imageeditlist {
  border-radius:5px; 
  margin-top: 2px;
  margin-left: 10px;
  max-width: 180px;
  max-height: 140px;
}


input.editbtn {
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width:50px; 
  height:30px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.editbtn:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.editbtn:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


/* リスト名変更 */
h1.changinglistnameorigin {
  position: relative;
  width: 20%;
  height:30px;
  color: rgb(255, 255, 255);
  border:1px solid rgb(255, 255, 255); 
  border-radius :8px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  padding-top: 2px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  font-size: 16px;
  font-weight:bold;
  text-align: center;
  margin-top: 0px;
  margin-left: 10px;
}

h1.changinglistname {
  position: relative;
  width: 20%;
  height:30px;
  color: rgb(255, 255, 255);
  border:1px solid rgb(255, 255, 255); 
  border-radius :8px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  padding-top: 2px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  font-size: 16px;
  font-weight:bold;
  text-align: center;
  margin-top: 0px;
  margin-left: 10px;
}

input.changinglistnameorigin {
  position: relative;
  pointer-events: none;
  display: block;
  width: 500px;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  font-weight:bold;
  color: #000000;
  background:  silver;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
  text-align: center;
}

input.changinglistname {
  position: relative;
  display: block;
  width: 500px;
  height:30px;
  border: 1.5px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  font-weight:bold;
  color: #000000;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  margin-top: 0px;
  text-align: left;
  padding-left: 10px;
}

input.changinglistname:hover {
  border: 1.5px solid rgb(0, 50, 200);
  border-radius: 5px;
  box-shadow: 0 0 5px rgb(0, 50, 200); 
}

div.listoverlap{
  height: 30px;
}

p.listoverlap{
  position: relative;
  border-radius:10px; 
  width: 52%;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 16px;
  font-weight:bold;
  margin-top: 10px;
  text-align: center;
  margin-left: 10px;
  padding-left: 10px;
}

span.changemessage{
  font-size: 16px;
  color:rgb(0, 50, 200); 
}

div.listnameupdate{
  position: relative;
  margin-left: 10px;
  width: 100%;
}

input.changinglistnameupdate{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-left: 0%;
  margin-top: 50px;
  padding-top: 4px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.changinglistnameupdate:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.changinglistnameupdate:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.listreturn{
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 24px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 5px;
}

input.listreturn:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.listreturn:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}


p.changinglistnameok{
  position: relative;
  border-radius:5px; 
  width: 500px;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 16px;
  font-weight:bold;
  margin-top: 10px;
  text-align: center;
  margin-left: 10px;
  padding-left: 10px;
}

input.newlistname {
  position: relative;
  pointer-events: none;
  display: block;
  width: 500px;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  font-weight:bold;
  color: #000000;
  background:  silver;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
  text-align: center;
}

input.changinglistnameok{
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
}

input.changinglistnameok:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
}


input.changinglistnameok:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  transform: translateY(2px);
}


/* 新規リスト作成 */

h1.newlistname {
  position: relative;
  width: 20%;
  height:33px;
  color: rgb(255, 255, 255);
  border:1px solid rgb(255, 255, 255); 
  border-radius :8px;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  padding-top: 2px;
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  font-size: 20px;
  font-weight:bold;
  text-align: center;
  margin-top: -1px;
  margin-left: 10px;
}


input.creatingnewlistname {
  position: relative;
  display: block;
  width: 500px;
  height:30px;
  border: 1.5px solid rgb(255, 255, 255);
  border-radius: 5px;
  color: #000000;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 16px;
  font-weight:bold;
  margin-left: 10px;
  margin-top: 0px;
  text-align: left;
  padding-left: 10px;
}

input.creatingnewlistname:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200); 
}


  input.creatednewlistname {
    position: relative;
    border: 1px solid white;
    border-radius :8px;
    color: #000000;
    outline: none;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
    background-color: silver;
    margin-left: 10px;
    padding-left: 10px;
    cursor:pointer; 
    width: 500px;
    height:30px; 
    font-size: 16px;
    font-weight:bold;
  }


input.creatingnewlist{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  padding-top: 0px;
  margin-left: 43%;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.creatingnewlist:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.creatingnewlist:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.creatingnewlistreturn{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  box-shadow:0 0 2px rgb(0, 50, 200); 
  padding-top: 3px;
}

input.creatingnewlistreturn:hover{  
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
}

input.creatingnewlistreturn:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  transform: translateY(2px)
}

div.creatingnewlistmessage{
  height: 40px;
  border:1px solid transparent; 
  }

div.creatingnewlistaction{
margin-top: 20px;
margin-left: 10px;
}

input.creatingnewlistcancel{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  box-shadow:0 0 2px rgb(0, 50, 200); 
  margin-left: 10px;
  padding-top: 3px;
}

input.creatingnewlistcancel:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
}

input.creatingnewlistcancel:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  transform: translateY(2px)
}


div.addtolisthead{
  margin-top: 10px;
  height:30px;
}

h1.addtolistmessagelist {
  width: 110px;
  height:18px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  padding: 0.5em 0.5em 0.5em 0.5em;
  font-size: 12px;
  font-weight:bold;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
}

input.addtolistdetaillist {
  position: relative;
  pointer-events: none;
  display: block;
  width: 320px;
  height:25px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  outline: none;
  background:  rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  margin-top: -15px;
  text-align: left;
  padding-top: 5px;
  padding-left: 10px;
}

div.base-frame_addtolist {
  display: flex;
  flex-direction: row;
  width: 99.5%;
  height: 407px;
  border: 1.5px solid silver;
  border-radius: 5px;
  box-shadow :0px 0px 2px silver;
  margin-top: 0px;
  margin-left: 2.5px;
}


div.left-frame_addtolist {
  width: 50%;
  box-shadow :0px 0px 5px silver;
  margin-top: 1px;
  padding-top: 10px;
}

div.right-frame_addtolist {
  width: 50%;
  padding-left: 1%;
  padding-top: 13px;
}

div.addtolistleft{
  margin-top:-3px;
}


h1.addtolistmessage {
  width: 110px;
  height:20px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  padding: 0.5em 0.5em 0.5em 2em;
  font-size: 12px;
  font-weight:bold;
  padding-left: 10px;
  margin-left: 5px;
  margin-top: 0px;
  text-align: center;
}

input.addtolistdetail {
  position: relative;
  display: block;
  width: 320px;
  height:28px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 10px;
  margin-top: 1px;
  text-align: left;
  padding-left: 10px;
}

input.addtolistdetail:hover {
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

textarea.addtolistdetail {
  width: 320px;
  height: 200px; 
  margin:20pem 20px; 
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  outline: none;
  border: 1.5px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  resize: none;
  font-weight:bold;
  margin-top: 2px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-left: 10px;
}

textarea.addtolistdetail:hover {
  box-shadow: 0 0 5px rgb(0, 50, 200);
  border: 1.5px solid rgb(0, 50, 200);
}

textarea.addtolistdetail::placeholder{
  color: #cccccc;
  font-size: 16px;
  font-weight:bold;
}

::placeholder{
  color: #cccccc;
  font-size: 12px;
  font-weight:bold;
}


input.addtolistadd{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-top: 5px;
  margin-left: 75%;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolistadd:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolistadd:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.addtolistreturn{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-top: 10px;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolistreturn:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.addtolistreturn:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

p.addtolisterror{
  position: relative;
  border-radius:5px; 
  width: 40%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 30px;
  margin-top: -15px;
  padding-top: 5px;
  text-align: center;
}

/* 出題内容編集 */

div.editresetlist{
  width: 95%;
  height:27.5px;
}

div.editlisthead{
  margin-top: 10px;
  height:40px;
}

h1.editmessagelist {
  width: 110px;
  height:18px;
  border-radius :5px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 2px silver;
  color:rgb(255, 255, 255); 
  background: silver;
  padding: 0.5em 0.5em 0.5em 0.5em;
  font-size: 12px;
  font-weight:bold;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
}

input.editlistdetaillist {
  position: relative;
  pointer-events: none;
  display: block;
  width: 320px;
  height:25px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  outline: none;
  background:  rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  margin-top: -15px;
  text-align: left;
  padding-top: 5px;
  padding-left: 10px;
}


div.editlistimage{
  margin-left:5px;
  margin-top: 5px;
  height: 140px;
}

div.selectlistimage{
  margin-left: 0px;
}

div.editlistimagelabel{
  width: 160px;
  box-shadow :0px 0px 15px silver;
  margin-top: 0px;
}

input.editlistimage{
  width: 400px; 
  height: 40px; 
  border:1px solid rgb(0, 50, 200);
  font-size:16px; 
  display: none;
}

label.editlistimage{
  cursor:pointer; 
  text-align: center; 
  border-radius:10px; 
  border:1px solid rgb(186, 158, 0);
  width: 100px;
  height: 25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));  
  font-size: 14px; 
  font-weight:bold;
  color: rgb(186, 158, 0);
  margin-top: -5px;
  margin-left: 0px;
  padding-top: 5px;
  box-shadow: 0px 1px 1px 1px rgb(186, 158, 0);
}

label.editlistimage:hover{
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom ,  rgb(186, 158, 0) , rgb(186, 158, 0)  ,rgb(186, 158, 0) , rgb(112, 95, 0) );
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(186, 158, 0);
}

label.editlistimage:active{
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom ,  rgb(186, 158, 0) , rgb(186, 158, 0)  ,rgb(186, 158, 0) , rgb(112, 95, 0) );
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px  rgb(186, 158, 0);
  transform: translateY(1px);
}

fieldset.editlistimage{
  padding:10px; 
  border:2px solid rgb(255, 255, 255); 
  width:200px;
  height: 150px;
  background-color: #fff;
  margin-top: 5px;
  margin-left: 105px;
}

div.base-frame_edittolist {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 99.5%;
  height: 412px;
  border: 1.5px solid silver;
  border-radius: 5px;
  box-shadow :0px 0px 5px silver;
  margin-top: -15px;
  margin-left: 2px;
}


div.base-frame_edittolistdelete {
  position: absolute;
  z-index:10000;
  display: flex;
  flex-direction: row;
  width: 99.8%;
  height: 455px;
  border-radius: 5px;
  background-color:rgba(253, 253, 253, 0.8);
  box-shadow :0px 0px 5px silver;
  margin-top: -58px;
  margin-left: 1px;
}


div.base-frame_edittolistcomplete {
  position: absolute;
  z-index:10000;
  display: flex;
  flex-direction: row;
  width: 99.5%;
  height: 480px;
  border: 1.5px solid rgb(255, 0, 0);
  border-radius: 5px;
  background-color:rgba(255, 172, 172, 0.6);
  box-shadow :0px 0px 5px silver;
  margin-top: -20px;
  margin-left: 2px;
}


div.left-frame_edittolist {
  width: 50%;
  box-shadow :0px 0px 5px silver;
  margin-top: 1px;
  padding-top: 5px;
}

div.right-frame_edittolist {
  width: 50%;
  padding-left: 1%;
  padding-top: 3px;
}


div.selectlistimage{
  margin-left: 0px;
}

img.editlistimage{
  position: absolute;
  border-radius:5px; 
  height: 140px;
  max-width: 220px;
  border:1px solid #686868;
  margin-left: -180px;
  margin-top: -22px;
}

p.notset{
  position: relative;
  border-radius:5px; 
  width: 190px;
  height: 80px;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid #686868;
  color: silver;
  font-size: 16px;
  font-weight:bold;
  margin-left: -80px;
  margin-top: -23px;
  text-align: center;
  padding-top: 60px;
}

input.editlistimagedelete{
  border-radius:10px; 
  border:1px solid rgb(255, 0, 0); 
  color:rgb(255, 0, 0); 
  margin-top: 150px;
  width: 90px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 14px; 
  font-weight:bold;
  margin-top: -30px;
  margin-left: -60px;
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0); 
}

input.editlistimagedelete:hover{
  border:1px solid  rgb(255, 255, 255); 
  color:white; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0); 
}

input.editlistimagedelete:active{
  border:1px solid  rgb(255, 255, 255); 
  color:white; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 0, 0); 
  transform: translateY(1px);
}

div.edittolistleft{
  margin-top: 0px;
}

h1.edittolistmessage {
  width: 110px;
  height:30px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  font-size: 13px;
  font-weight:bold;
  padding-left: 5px;
  line-height: 30px;
  margin-left: 10px;
  margin-top: 0px;
  text-align: center;
}

input.edittolistdetail {
  position: relative;
  display: block;
  width: 320px;
  height:24px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 10px;
  text-align: left;
  padding-left: 10px;
}

input.edittolistdetail:hover {
  border: 1px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


textarea.edittolistdetail {
  width: 320px;
  height: 200px; 
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  outline: none;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px;
  resize: none;
  font-weight:bold;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-left: 10px;
  white-space: pre-wrap;
}

textarea.edittolistdetail:hover {
  box-shadow: 0 0 5px rgb(0, 50, 200);
  border: 1px solid rgb(0, 50, 200);
}


 div.updatetolistedit{
  margin-left: 250px;
 }


 input.updatetolistedit{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 16px;
  font-weight:bold;
  margin-top: -2px;
  margin-left: 10px;
  padding-top: 3px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.updatetolistedit:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}


input.updatetolistedit:active{
  position: relative;
  border-radius:10px;  
  border:1px solid white;
  color:rgb(255, 255, 255); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  font-size: 16px;
  font-weight:bold;
  margin-top: -2px;
  margin-left: 10px;
  padding-top: 3px;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.updatetolistreturn{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 16px;
  font-weight:bold;
  box-shadow:0 0 2px rgb(0, 50, 200); 
  margin-top: -5px;
  margin-left: 10px;
  padding-top: 3px;
}

input.updatetolistreturn:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
}

input.updatetolistreturn:active{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
}

input.updatetolistdelete{
  position: relative;
  border-radius:10px; 
  border:1px solid red; 
  color:red; 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 16px;
  font-weight:bold;
  margin-top: -5px;
  margin-left: 10px;
  padding-top: 3px;
  box-shadow: 0px 1px 1px 1px red; 
}

input.updatetolistdelete:hover{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px red; 
}

input.updatetolistdelete:active{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px red; 
  transform: translateY(1px);
}

p.edittolisterror{
  position: relative;
  border-radius:5px; 
  width: 40%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 30px;
  margin-top: -15px;
  padding-top: 5px;
  text-align: center;
}

div.modal-content-deleteedit{
  width: 100%;
  font-weight:bold;
  margin-top: 30px;
}

h4.modal-header-deleteedit{
  width:200px; 
  height: 25px;
  border-radius:10px; 
  color:white;
  border:1px solid rgb(0, 50, 200); 
  box-shadow: 0 0 1px rgb(0, 0, 0);
  background-color:rgb(0, 50, 200); 
  font-size: 15px; 
  font-weight:bold;
  text-align: center;
  margin-top: 10px;
  margin-left: 40%;
  padding-top: 5px;
}

div.modal-message-deleteedit{
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff);
  box-shadow:0px 1px 0px  silver,0px 0px 4px 4px rgb(255, 70, 70) inset;
  font-weight:bold;
  text-align: center;
  padding-top: 10px;
  padding-left: 50px;
  height: 70px;
  width: 93.5%;
  margin-top: -10px;
  margin-left: 7px;
}

div.modal-footer-deleteedit{
  background: transparent;
  margin-left: 0px;
  margin-top: 5px;
  height: 50px;
  width: 50%;
  text-align: center;
}

div.updatetolistreturn{
  margin-left: 800px;
}

input.deletetolistreturn{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 16px;
  font-weight:bold;
  box-shadow:0 0 2px rgb(0, 50, 200); 
  margin-top: 20px;
  margin-left: -100px;
}

input.deletetolistreturn:hover{
  border:1px solid white;
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200); 
}


input.deleteedit{
  border-radius:10px; 
  border:1px solid rgb(255, 70, 70); 
  color:rgb(255, 70, 70); 
  width:100px; 
  margin-left: 150px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 15px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteedit:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deleteedit:active{
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 70, 70);
  transform: translateY(1px);
}


input.deleteeditcancel{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width:100px; 
  margin-left: 10px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 15px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.deleteeditcancel:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.deleteeditcancel:active{
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

/* Excelインポート */

div.importexcelfile{
  width:99%;
  margin-top: 0px;
  margin-left: 2px;
  padding-left: 10px;
}

h1.excelimport {
  width: 220px;
  height:20px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 5px;
  color:rgb(255, 255, 255); 
  background: silver;
  padding: 0.5em 0.5em 0.5em 2em;
  font-size: 12px;
  font-weight:bold;
  padding-left: 10px;
  text-align: center;
  margin-top: 0px;
}


input.excelimport {
  position: relative;
  pointer-events: none;
  display: block;
  width: 320px;
  height:28px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight:bold;
  color: rgb(0, 0, 0);
  outline: none;
  background:  rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-top: 5px;
  padding-left: 10px;
}

div.selectexcel{
  width: 300px;
  margin-left: 20px;
}

label.importexcelfile{
  display:block;
  float:left;
  cursor:pointer; 
  text-align: center; 
  border-radius:10px; 
  border:1px solid rgb(91, 167, 15); 
  width: 150px;
  height: 25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 14px; 
  font-weight:bold;
  color:rgb(91, 167, 15); 
  margin-left: 10px;
  padding-top: 5px;
  margin-top: 0px;
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15); 
}


label.importexcelfile:hover{
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255); 
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15); 
}

label.importexcelfile:active{
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(91, 167, 15); 
  transform: translateY(1px);
}

input.excelimportreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 120px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  box-shadow: 0 0 5px rgb(0, 50, 200);
  font-size: 15px; 
  font-weight:bold;
  margin-top: 20px;
  padding-top: 4px;
}


input.excelimportreturn:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


div.excelupdatearea{
  width: 100%;
  height:50px;
  margin-left: 5px;
}

input.excelimportupdate{
  cursor:pointer; 
  text-align: center; 
  border-radius:10px; 
  border:1.5px solid rgb(0, 50, 200); 
  width: 200px;
  height: 30px;
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232)); 
  font-size: 14px; 
  font-weight:bold;
  color:rgb(0, 50, 200); 
  margin-top: 0px;
  margin-left: 5px;
  padding-top: 0px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.excelimportupdate:hover{
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  color:rgb(255, 255, 255); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.excelimportupdate:active{
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  color:rgb(255, 255, 255); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

div.importexceltablearea{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-radius:5px; 
  overflow: auto;
  width: 992px;
  height: 367px;
  overflow: scroll;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  margin-top: -10px;
  margin-left: 2px;
}

div.importexceltablearea table{
box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
width: 100%;
margin: 0;
border-spacing: 0;
table-layout: fixed;
border-collapse:collapse;
}

div.importexceltablearea tr {
box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
border-right: 0.1px solid #999;
border-left:  0.1px solid #999;
border-bottom:  0.1px solid #999;
}

div.importexceltablearea th{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 12px; 
  background: #eae4a5;
  color:rgb(0, 0, 0); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
  border-collapse:collapse;
}

div.importexceltablearea td{
font-size: 12px; 
font-weight:bold;
word-wrap: break-word;
box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
border-right: 0.1px solid #999;
border:1px solid rgb(255, 255, 255); 
border-bottom:  0.1px solid #999;
background: #FFF;
padding: 5px;
}


p.importexcelcomplete{
position: relative;
border-radius:5px; 
width: 52%;
background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
border:1px solid rgb(0, 50, 200); 
color: #000000;
font-size: 16px;
font-weight:bold;
margin-top: 10px;
text-align: center;
margin-left: 10px;
padding-left: 10px;
}

span.importexcelcomplete{
  font-size: 16px;
  color:rgb(0, 50, 200); 
}

p.importexcelerror{
position: relative;
border-radius:5px; 
width: 70%;
height:25px;
cursor:pointer; 
color: #ff0000;
background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
border:1px solid rgb(0, 50, 200); 
font-size: 14px;
font-weight:bold;
text-align: center;
margin-left: 30px;
margin-top: 20px;
padding-top: 5px;
text-align: center;
}

div.modal-content_deletelist{
  position: absolute;
  z-index:10000;
  width: 99.7%;
  height: 430px;
  background-color:rgba(255, 255, 255, 0.8);
  font-weight:bold;
  margin-top: 0px;
  margin-left: 1px;
}

div.deletelistmessage{
  position: absolute;
}

/* リスト削除*/

div.deletelistconfirm{
  width: 99%;
  margin-top: 30px;
  height: 45px;
  padding-left: 10px;
}

h1.deletelistconfirm {
width: 60%;
height:45px;
border-radius :8px;
box-shadow:0px 1px 0px  silver,0px 0px 4px 4px rgb(255, 70, 70) inset;
font-size: 16px;
font-weight:bold;
text-align: center;
padding-top: 10px;
padding-left: 20px;
margin-top: 0px;
overflow: hidden;
box-sizing: border-box;
}

span.deletelistconfirm{
  font-size: 16px;
  color:red;
}

input.deletelistconfirmok{
  border-radius:10px; 
  border:1px solid rgb(255, 70, 70); 
  color:rgb(255, 70, 70); 
  width:100px; 
  height:40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));  
  margin-top: 3px;
  margin-left: 20px;
  font-size: 15px; 
  font-weight:bold;
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deletelistconfirmok:hover{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(255, 70, 70);
}

input.deletelistconfirmok:active{
  border-radius:10px; 
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 70, 70);
  transform: translateY(1px);
  }


input.deletelistconfirmcancel{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width:100px; 
  height:40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  box-shadow: 0 0 2px rgb(0, 50, 200); 
  margin-top: 0px;
  margin-left: 20px;
  font-size: 15px; 
  font-weight:bold;
}

input.deletelistconfirmcancel:hover{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0 0 5px rgb(0, 50, 200); 
}

input.deletelistconfirmcancel:active{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
  }

label.deletelistmessage {
  border: none;
  margin-left: 360px;
}

div.listdeletearea{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  overflow: auto;
  border-radius:5px; 
  width: 99.7%;
  height:372px;
  overflow: scroll;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  margin-top: 5px;
  margin-left: 2px;
}

div.listdeletearea table{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  width: 100%;
  margin: 0;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse:collapse;
}

div.listdeletearea tr {
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-right: 0.1px solid #999;
  border-left:  0.1px solid #999;
  border-bottom:  0.1px solid #999;
}

div.listdeletearea th{
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  font-size: 12px; 
  background: rgb(0, 50, 200);
  color:rgb(255, 255, 255); 
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
}

div.listdeletearea td{
  font-size: 12px; 
  font-weight:bold;
  word-wrap: break-word;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-right: 0.1px solid #999;
  border:1px solid rgb(255, 255, 255); 
  border-bottom:  0.1px solid #999;
  background: #FFF;
  padding: 5px;
}


h1.deletelistcomplete {
  padding: relative;
  width: 52%;
  height: 25px;
  border-radius :8px;
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  padding-top: 0px;
  margin-top: 0px;
  text-align: center;
}

input.deletelistreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:1em 0px; 
  width:100px; 
  height:35px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  box-shadow: 0 0 2px rgb(0, 50, 200); 
  margin-top: 40px;
  margin-left: 20px;
  font-size: 15px; 
  font-weight:bold;
  padding-top: 5px;
}

input.deletelistreturn:hover{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0 0 5px rgb(0, 50, 200); 
}

input.deletelistreturn:active{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
  }

/* 画面テーマ編集 *****************************************************************************************/
div.controllayoutappname {
  display: flex;
  position: relative;
  width: 85%;
  height: 50px;
  margin-bottom: 1%;
  margin-top: 0px;
  padding-top: 10px;
  padding-left: 30px;
  margin-left: 50px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border:1px solid rgb(0, 0, 0);
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.controllayoutfavicon {
  display: flex;
  position: relative;
  width: 85%;
  height: 100px;
  margin-bottom: 1%;
  margin-top: 0px;
  padding-top: 10px;
  padding-left: 30px;
  margin-left: 50px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border:1px solid rgb(0, 0, 0);
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

div.controllayouttopimage {
  display: flex;
  position: relative;
  width: 85%;
  height: 230px;

  margin-top: 0px;
  padding-top: 10px;
  padding-left: 30px;
  margin-left: 50px;
  background: radial-gradient(rgb(255, 255, 255), rgb(251, 251, 251));
  border:1px solid rgb(0, 0, 0);
  border-radius:3px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h1.controllayout {
  position: relative;
  width: 20%;
  height:30px;
  font-size: 14px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  border-radius:10px;
  padding-top: 5px;
  margin-top: 0px;
}

input.appnameinput {
  display: block;
  width: 50%;
  height:30px;
  border: 1.5px solid rgb(0, 0, 0, 0.56);
  border-radius:5px; 
  font-size: 16px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  outline: none;
  padding-top: 5px;
  padding-left: 20px;
  margin-top: 0px;
  margin-left: 30px;
}

input.appnameinput:hover {
  border: 1.5px solid rgb(0, 50, 200);
  color: rgb(0, 0, 0);
  box-shadow:0 0 5px rgb(0, 50, 200); 
}

input.appnameinput:active {
  border: 1.5px solid rgb(0, 50, 200);
  color: rgb(0, 0, 0);
  box-shadow:0 0 5px rgb(0, 50, 200); 
}


input.appnameupdate{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width:100px; 
  height:30px;
  padding: 0px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 100%;
  font-weight:bold;
  margin-left: 20px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.appnameupdate:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.appnameupdate:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

datalist#appnamelist {
  font-size: 20px; 
  padding-top: 10px;
}

option.appnamelist {
  font-size: 18px; 
  padding-top: 10px;
}


label.imageselect{
  border-radius:10px; 
  border:1px solid rgb(186, 158, 0);
  color:rgb(186, 158, 0);
  margin:1em 10px; 
  width:90px; 
  height: 25px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 30px;
  padding-top: 3px;
  box-shadow: 0px 1px 1px 1px rgb(186, 158, 0);
}

label.imageselect:hover{
  border:1px solid rgb(255, 255, 255);
  color:rgb(255, 255, 255);
  background: linear-gradient(to bottom ,  rgb(186, 158, 0) , rgb(186, 158, 0)  ,rgb(186, 158, 0) , rgb(112, 95, 0) );
  box-shadow: 0px 1px 1px 1px rgb(186, 158, 0);
}

label.imageselect:active{
  border:1px solid rgb(255, 255, 255);
  color:rgb(255, 255, 255);
  background: linear-gradient(to bottom ,  rgb(186, 158, 0) , rgb(186, 158, 0)  ,rgb(186, 158, 0) , rgb(112, 95, 0) );
  box-shadow: 0px 0.5px 0.5px 0.5px  rgb(186, 158, 0);
  transform: translateY(1px);
}

input.favicondisplay{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  margin:1em 10px; 
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 20px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.favicondisplay:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}


input.favicondisplay:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}


input.faviconinitial{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  margin:1em 10px; 
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 0px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.faviconinitial:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.faviconinitial:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

p.notimageselectfavicon {
  border:1px solid rgb(0, 50, 200); 
  box-shadow: 2px 2px 2px;
  color: silver;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  font-size: 16px;
  font-weight:bold;
  width: 100px;
  height: 60px;
  cursor:pointer; 
  border-radius: 5px;
  padding-top: 30px;
  margin-top: 1px;
  margin-left: 1px;
}

img.imageselectfavicon {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 2px 2px 2px;
  width: 100px;
  height: 90px;
  border-radius: 5px;
  margin-top: 1px;
  margin-left: 1px;
}


input.topimagedisplay{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:1em 10px; 
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 20px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topimagedisplay:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topimagedisplay:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.topimageinitial{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:1em 10px; 
  width:100px; 
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 0px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topimageinitial:hover{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.topimageinitial:active{
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

img.imageselecttopimage {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 2px 2px 2px;
  width: 300px;
  height:220px;
  border-radius: 5px;
  margin-top: 1px;
  margin-left: 1px;
}

p.notimageselecttopimage {
  border:1px solid rgb(0, 50, 200); 
  box-shadow: 2px 2px 2px;
  color: silver;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  font-size: 16px;
  font-weight:bold;
  width: 300px;
  height: 120px;
  cursor:pointer; 
  border-radius: 5px;
  padding-top: 100px;
  margin-top: 1px;
  margin-left: 1px;
}


/* アカウント管理*****************************************************************************************/
ul li.indexaccount{
  width: 30%;
  height: 40px;
  border-radius :8px;
  border:1px solid rgb(0, 50, 200); 
  font-size: 22px; 
  text-align: center;
  font-weight:bold;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  margin-bottom: 10px;
  list-style-type: none!important;
  margin-left: 1px;
  padding-top: 2px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

ul li.indexaccount:hover{
  color:rgb(255, 255, 255);   
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
}

ul li.indexaccount:active{
  transform: translateY(1px);
}

a.indexaccount{
  height: 105%;
  width: 101%;
  font-size: 20px;  
  color: rgb(0, 50, 200);
  text-decoration: none;
  display: block;
  padding-top: 6px;
  margin-top: -3px;
  margin-bottom: -1px;
  margin-left: -1px;
}

a.indexaccount:visited{ 
  color: rgb(0, 50, 200);
}

a.indexaccount:hover{
  color: rgb(255, 255, 255);
}

a.indexaccount:visited:hover{
  color: rgb(255, 255, 255);
}

input.form-control{
  border-radius :5px;
  width: 350px;
  height:30px;
  padding-top: 5px;
  margin-left: 20px;
  padding-top: 0px;
  padding-left: 30px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  outline: 0;
  border: 0.5px solid rgb(200, 200, 200);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-top: 1px;
}


input.form-control:focus{
  color: rgb(0, 0, 0);
  border: 0.5px solid rgb(200, 200, 200);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

input.form-control:hover{
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow:0 0 5px rgb(0, 50, 200); 
}


input.form-control1{
  border-radius :5px;
  width: 350px;
  height:30px;
  margin-left: 20px;
  margin-top: 10px;
  padding-left: 30px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  outline: 0;
  border: 0.5px solid rgb(200, 200, 200);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  box-shadow:0 0 5px rgb(0, 50, 200); 
}

input.form-control1:focus{
  border: 0.5px solid rgb(200, 200, 200);
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
}

input.form-control1:hover{
  border: 1.5px solid rgb(0, 50, 200);
  box-shadow:0 0 2px rgb(0, 50, 200); 
}

/* ゲストアカウント作成*****************************************************************************************/

div.account{
  width: 100%;
  padding-left: 10px;
}

h1.account {
  width: 250px;
  height:28px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  background:linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 50, 200) ,rgb(0, 50, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  padding-top: 5px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-top: 0px;
}

div.acoountreset{
  width: 100%;
  margin-bottom: -26px;
}

input.returnaccount {
  position:  relative;    
  border-radius:10px; 
  border:2px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 2px rgb(0, 50, 200); 
  margin-top: 2.4px;
  margin-left: 5px;
}

input.returnaccount:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200);
}


input.accountauthority {
  position: relative;
  pointer-events: none;
  display: block;
  width: 370px;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  background:  silver;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: center;
  padding-left: 10px;
  margin-top: 0.2px;
}

div.accountinput{
  width:auto;
  /* height: 250px; */
}

div.actionanderror{
  width:99%;
}

div.accountaction{
  width:30%;
  padding-left: 50px;
  margin-left: 0px;
  margin-top: 0px;
  height:50px;
}

input.accountaction{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width:100px; 
  height:30px;
  padding: 2px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  font-size: 15px; 
  font-weight:bold;
  margin-left: 0%;
  margin-top: 0px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}


input.accountaction:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}


input.accountaction:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.accountactionreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height:40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 2px rgb(0, 50, 200);
  font-size: 15px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 10px;
}


input.accountactionreturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

input.accountactionreturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
}

div.accounterror{
  width:50%;
  height:200px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

p.accounterror{
  position: relative;
  border-radius:5px; 
  width: 400px;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 10px;
  margin-top: 5px;
  padding-top: 3px;
  text-align: center;
}

p.accountcomplete{
  position: relative;
  border-radius:5px; 
  width: 400px;
  height:25px;
  cursor:pointer; 
  color: #000000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 10px;
  margin-top: 5px;
  padding-top: 3px;
  text-align: center;
}


/* パスワード変更*****************************************************************************************/

div.changepassword{
  width: 100%;
  padding-left: 10px;
}

h1.changepassword {
  width: 22%;
  height:40px;
  border-radius :8px;
  border:1px solid silver;
  box-shadow :0px 0px 5px silver;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
}

div.changepasswordreset{
  width: 100%;
  margin-bottom: -26px;
}

input.resetchangepassword {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));
  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 5px rgb(0, 50, 200); 
  margin-top: 2.2px;
  margin-left: 2px;
}

input.resetchangepassword:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow:0 0 5px rgb(0, 50, 200);
}


input.currentusername {
  position: relative;
  pointer-events: none;
  display: block;
  width: 35%;
  height:40px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color:rgb(0, 50, 200); 
  background:#F4F4F4; 
  outline: none;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  margin-left: 40px;
  text-align: center;
  padding-left: 10px;
  margin-top: 0px;
}

div.changepasswordaction{
  width: 95%;
  height: 50px;
  margin-top: 0px;
  padding-left: 50px;
}

input.changepasswordregister{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 5px rgb(0, 50, 200);
  font-size: 15px; 
  font-weight:bold;
  margin-left: 0px;
}


input.changepasswordregister:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));  
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


input.changepasswordregister:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
}

input.changepasswordreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 5px rgb(0, 50, 200);
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}

input.changepasswordreturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0 0 5px rgb(0, 50, 200);
}


input.changepasswordreturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: none;
  transform: translateY(2px);
}

div.accounterrorpassword{
  width:50%;
  height:200px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

div.passwordchangeerror{
  width: 500px;
  height:120px;
  padding-left: 0px;
  margin-top: 5px;
  margin-left: 10px;
}

p.passwordchangeerror{
  position: relative;
  border-radius:5px; 
  width: 400px;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 0px;
  margin-top: 5px;
  padding-top: 3px;
  text-align: center;
}


/* 新規アカウント登録*****************************************************************************************/
div.signup{
  width: 100%;
  padding-left: 10px;
}

h1.signup {
  width: 22%;
  height:40px;
  border-radius :8px;
  border:1px solid silver;
  box-shadow :0px 0px 5px silver;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
}

div.signupreset{
  width: 100%;
  margin-bottom: -26px;
}

input.resetsignup {
  position:  relative;    
  border-radius:10px; 
  border:1.5px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 5px rgb(0, 50, 200); 
  margin-top: 2.2px;
  margin-left: 2px;
}

input.resetsignup:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow:0 0 5px rgb(0, 50, 200);
}


select.signup {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 383px;
  height:32px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 20px; 
  font-weight: bold;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: center;
  padding-left: 10px;
  margin-top: 1px;
}

select.signup:hover {
  border:1.5px solid rgb(0, 50, 200); 
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

input.signupstaff {
  position: relative;
  pointer-events: none;
  display: block;
  width: 370px;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color:rgb(0, 50, 200);
  background:#F4F4F4; 
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: center;
  padding-left: 10px;
  margin-top: 1px;
}

option.signup {
  font-size: 18px; 
  padding-top: 10px;
  font-weight: bold;
}

div.signupaction{
  width:95%;
  padding-left: 50px;
  margin-top: 30px;
  height:50px;
}

input.signupregister{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  font-size: 15px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 385px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.signupregister:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}



input.signupregister:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

input.signupreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  font-size: 15px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}


input.signupreturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.signupreturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}signupaction

div.signuperror{
  width: 500px;
  height:120px;
  padding-left: 0px;
  margin-left: -260px;
  margin-top: -130px;
}

p.signuperror{
  position: relative;
  border-radius:5px; 
  width: 100%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 0px;
  margin-top: 5px;
  padding-top: 5px;
  text-align: center;
}

p.signupcomplete{
  position: relative;
  border-radius:5px; 
  width:100%;
  height:30px;
  cursor:pointer; 
  color: #000000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 0px;
  margin-top: 5px;
  padding-top: 4px;
  text-align: center;
}

div.topimagedisplay{
  display: flex;
}

/* ユーザーアカウント編集*****************************************************************************************/
div.editusertop{
  width: 99%;
  height: 35px;
  margin-left: 0px;
  margin-top: -5px;
}

div.edituser{
  width: 100%;
  margin-left: 10px;
}

h1.edituserselect {
  width: 22.2%;
  height:25px;
  border-radius :5px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  padding-top: 3px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-left: 3px;
  margin-top: 2px;
}

div.edituserreset{
  width: 100%;
  margin-bottom: -26px;
}

input.edituserreset {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  margin:0em 0px; 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px;
  font-weight:bold;
  box-shadow:0 0 5px rgb(0, 50, 200); 
  margin-top: 2px;
  margin-left: 2px;
}

input.edituserreset:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow:0 0 5px rgb(0, 50, 200);
}

div.editusercreated{
  display: flex;
  width:100%;
  margin-top: 10px;
  margin-left: 0px;
}

h2.editusercreated {
  width: 45%;
  height:20px;
  border-radius :8px;
  border:1px solid silver;
  box-shadow :0px 0px 2px silver;
  padding-top: 3px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-left: 10px;
}

h2.editusercreatedblank {
  width: 200px;
  height:40px;
  margin-left: 20px;
}

select.edituserselect {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 148px;
  height:30px;
  border:1px solid silver;
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  outline: none;
  box-shadow: 0 0 2px silver;
  margin-left: 19px;
  text-align: left;
  padding-left: 10px;
  margin-top: 2px;
}

select.edituserselect:hover {
  border:1.5px solid rgb(0, 50, 200); 
  box-shadow: 0 0 5px rgb(0, 50, 200); 
}

div.base-frame-edituser {
  display: flex;
  flex-direction: row;
  width: 99.7%;
  height: 420px;
  margin-left: 3px;
  margin-top: -3px;
}

div.left-frame-edituser {
  width: 45%;
  margin-top: -0px;
  padding-top: 5px;
}

div.right-frame-edituser {
  width: 45%;
  padding-left: 1%;
}

h1.edituser {
  width: 45%;
  height:24px;
  border-radius :5px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  padding-top: 3px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-top: -1px;
}

div.selecteduserp{
  margin-left:-260px;
  margin-top: -8px;
}

p.selecteduser{
  margin-left:-10px;
  font-size: 12px; 
  font-weight: bold;
  margin-top: -5px;
}

select.edituserguest {
  position: relative;
  display: block;
  width: 30%;
  height:28px;
  border: 1px solid silver;
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  outline: none;
  box-shadow: 0 0 2px silver;
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
}

input.edituserauthority {
  position: relative;
  display: block;
  width: 26%;
  height:22px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background:  silver;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-top: 5px;
  padding-left: 15px;
  margin-top: 0px;
}

select.edituser {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 30%;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
}

select.edituser:hover {
  border:1.5px solid rgb(0, 50, 200); 
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

select.editusernothing {
  pointer-events:none;
  position: relative;
  display: block;
  cursor:pointer; 
  width: 30%;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  background:  silver;
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
}

option.edituser{
  font-size: 18px; 
}

input.editusername {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 27%;
  height:25px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background:  silver;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
}

input.edituserreturn{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 30px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 2px rgb(0, 50, 200);
  font-size: 15px; 
  font-weight:bold;
  padding-left: 10px;
  margin-left: 150px;
  margin-top: 0px;
}

input.edituserreturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

input.edituserreturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background:linear-gradient(20deg, rgb(0, 50, 200), rgb(0, 50, 200), rgb(0, 50, 200));  font-size: 15px; 
  box-shadow: none;
  transform: translateY(2px);
}

input.accountdelete{
  border-radius:10px; 
  border:1px solid red; 
  color:rgb(255, 0, 0); 
  width: 120px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 350px;
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0); 
}

input.accountdelete:hover{
  border:1px solid  rgb(255, 255, 255); 
  color:white; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0)); 
  box-shadow: 0px 1px 1px 1px rgb(255, 0, 0); 
}

input.accountdelete:active{
  border:1px solid  rgb(255, 255, 255); 
  color:white; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 0, 0); 
  transform: translateY(1px);
}

input.accountdeleteconfirm{
  position: relative;
  border-radius:10px; 
  border:1px solid red; 
  color:red; 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-top: 20px;
  margin-left: 150px;
  margin-bottom: 15px;
  box-shadow: 0px 1px 1px 1px red; 
}

input.accountdeleteconfirm:hover{
  border:1px solid white;
  color:white;
  background: red; 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0)); 
  box-shadow: 0px 1px 1px 1px red; 
}

input.accountdeleteconfirm:active{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0)); 
  box-shadow: 0px 0.5px 0.5px 0.5px red; 
  transform: translateY(1px);
}

input.accountdeletecancel{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);  
}

input.accountdeletecancel:hover{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));  
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);  
}

input.accountdeletecancel:active{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));  
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);  
  transform: translateY(1px);
}

div.modal-footer_accountdelete{
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  text-align: center;
}

div.modal-content-deleteaccount{
  position: absolute;
  z-index:10000;
  width: 100%;
  height: 455px;
  background-color:rgba(253, 253, 253, 0.8);
  font-weight:bold;
  margin-top: -35px;
}

h4.modal-header-deleteaccount{
  width: 99.7%;
  height: 25px;
  border:1px solid rgb(255, 255, 255); 
  background-color:rgb(0, 50, 200); 
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  font-size: 15px; 
  font-weight:bold;
  text-align: center;
  margin-top: 50px;
  margin-left: 1px;
  padding-top: 5px;
}

div.modal-message-deleteaccount{
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff);
  box-shadow:0px 1px 0px  silver,0px 0px 4px 4px rgb(255, 70, 70) inset;
  font-weight:bold;
  text-align: center;
  padding-top: 5px;
  padding-left: 50px;
  height: 70px;
  width: 94%;
  margin-top: -10px;
  margin-left: 6px;
}

div.modal-footer-deleteaccount{
  background: transparent;
  margin-left: 250px;
  margin-top: 5px;
  height: 50px;
  width: 50%;
}

/* ユーザーログイン*****************************************************************************************/

div.userlogin{
  width: 100%;
}

h1.userlogin {
  width: 150px;
  height:29px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  padding-top: 5px;
  padding-left: 0px;
  font-size: 16px;
  font-weight:bold;
  text-align: center;
  margin-left: 10px;
  margin-right: 0px;
}

input#login{
  margin-top: 12px;
  height: 30px;
}

input#login:hover{
  border:1.5px solid rgb(0, 50, 200);  
  outline: none;
}

input#login:focus{
  border:1.5px solid rgb(0, 50, 200);  
  outline: none;
}

input#login:active{
  border:1.5px solid rgb(0, 50, 200);  
  outline: none;
}

input.login{
  position: relative;
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 16px;
  font-weight:bold;
  margin-top: 10px;
  margin-left: 60px;
  padding-left: 11px;
  color:rgb(0, 50, 200);
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.login:hover{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.login:active{
  border:1px solid white;
  color:white;
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200)); 
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

div.signinerror{
  border:0px solid rgb(255, 0, 0); 
  display: flex;
}

p.signinerror{
  position: relative;
  border-radius:5px; 
  width: 40%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 20px;
  margin-top: 5px;
  padding-top: 3px;
  text-align: center;
}

p.signinerrorblank{
  position: relative;
  border-radius:5px; 
  width: 40%;
  height:25px;
  cursor:pointer; 
  color: transparent;
  background: transparent;
  background: transparent;
  border:1px solid transparent; 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 20px;
  margin-top: 5px;
  padding-top: 3px;
  text-align: center;
}

/* 管理者登録*****************************************************************************************/

p.initiallogin{
  position: relative;
  border-radius:5px; 
  width:63.3%;
  height:30px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 12px;
  padding-top: 4px;
  text-align: center;
}

/**初回管理者登録***************************************************/

h1.accountinitial {
  width: 22%;
  height:32px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 30, 200) ,rgb(0, 30, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  padding-top: 5px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 0px;
}

input.signupstaffinitial {
  position: relative;
  pointer-events: none;
  display: block;
  width: 370px;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  color:rgb(0, 0, 0, 0.56);
  background:#F4F4F4; 
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: center;
  padding-left: 10px;
  margin-top: 1px;
}

div.initalreturn{
  position: absolute;
  width: 95%;
  height:27.5px;
  margin-top: 14px;
}

input.initalreturn {
  position:  relative;    
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200); 
  color:rgb(0, 50, 200); 
  width: 100px;
  height: 26px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  font-size: 14px;
  font-weight:bold;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
  margin-top: 0px;
  margin-left: 5px;
}

input.initalreturn:hover {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(255, 255, 255); 
}

input.initalreturn:active {
  border:1px solid rgb(255, 255, 255); 
  color:rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.25px 0.25px 0.25px rgb(255, 255, 255); 
  transform: translateY(1px);
}

div.initalsignuperror{
  width: 50%;
  height:120px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

div.initalactionanderror{
  border:1px solid rgb(255, 255, 255); 
  margin-left: 10px;
}

p.initalsignuperror{
  position: relative;
  border-radius:5px; 
  width: 100%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid rgb(0, 50, 200); 
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: 0px;
  margin-top: 5px;
  padding-top: 5px;
  text-align: center;
}

div.initialsignupaction{
  width:30%;
  padding-left: 40px;
  margin-top: 20px;
  height:50px;
}

input.initialsignupregister{
  border-radius:10px; 
  border:1px solid rgb(0, 50, 200);  
  color:rgb(0, 50, 200); 
  width:100px; 
  height: 40px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  font-size: 15px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 0px;
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.initialsignupregister:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 1px 1px 1px rgb(0, 50, 200);
}

input.initialsignupregister:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 50, 200);
  transform: translateY(1px);
}

div.sign{
  display: flex;
  height: 50px;
  border:0px solid rgb(255, 255, 255); 
}

/* 現状設定 *****************************************************************************************/
h1.controlquestion {
  position: absolute;
  width: 100%;
  font-size: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  background: radial-gradient(#F2B9A1, #EA6264);
  color: white;
  font-weight:bold;
  text-align: center;
  border-radius:10px;
  padding-bottom: 3px;
}

div.settinglist {
  border:2px solid rgb(42, 135, 240); 
  color:rgb(42, 135, 240); 
  width:800px;
}

h1.checksetting {
  width: 20%;
  height:25px;
  border-radius :8px;
  border:1px solid silver;
  box-shadow :0px 0px 2px silver;
  padding-top: 0px;
  padding-left: 10px;
  font-size: 14px;
  font-weight:bold;
  text-align: left;
  margin-top: 2px;
  margin-left: 10px;
  line-height: 25px;
}

input.checksetting {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 25%;
  height:21px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background:#F4F4F4;  
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 5px;
  margin-top: 2px;
}

div.checksettingcontrol{
  margin-top: 10px;
  margin-left: 300px;
}

input.checksettingok{
  border-radius:10px; 
  border: 1px solid rgb(255, 255, 255);
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));  
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}

input.checksettingok:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: 0 0 5px #EA6264;
}


input.checksettingok:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: none;
  transform: translateY(2px);
}


input.checksettingreturn{
  border-radius:10px; 
  border: 1px solid rgb(255, 255, 255);
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 0px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));   
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}

input.checksettingreturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);    
  box-shadow: 0 0 5px #EA6264;
}

input.checksettingreturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);    
  box-shadow: none;
  transform: translateY(2px);
}

p.checksettingerror{
  position: relative;
  border-radius:5px; 
  width: 90%;
  height:25px;
  cursor:pointer; 
  color: #ff0000;
  background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);
  border:1px solid #ff0000;
  box-shadow: 0 0 1px rgb(0, 0, 0, 0.56);
  font-size: 14px;
  font-weight:bold;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  padding-top: 5px;
  text-align: center;
}


/* お名前入力 *****************************************************************************************/

h1.inputname {
  width: 110px;
  height:20px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 2px silver;
  color:rgb(255, 255, 255); 
  background: silver;
  padding: 0.5em 0.5em 0.5em 0.5em;
  font-size: 14px;
  font-weight:bold;
  margin-top: 2px;
  margin-left: 20px;
  text-align: center;
  line-height: 20px;
}

input.confirmname {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 30%;
  height:30px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background:#F4F4F4;  
  outline: none;
  box-shadow: 0 0 3px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 10px;
  margin-top: 2px;
}

input.inputname {
  position: relative;
  display: block;
  width: 320px;
  height:30px;
  border: 1px solid rgb(0, 0, 0, 0.56);
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 10px;
  margin-top: 2px;
  text-align: left;
  padding-left: 10px;
}

input.inputname:hover {
  border: 1px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

input.inputname:active {
  border: 1px solid rgb(0, 50, 200);
  box-shadow: 0 0 5px rgb(0, 50, 200);
}

div.inputname{
  margin-top: 20px;
}

div.inputnameaction{
  margin-left: 260px;
  margin-top: 50px;
}

input.inputnameok{
  border-radius:10px; 
  border: 1px solid rgb(255, 255, 255);
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff, rgb(232, 232, 232));  
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}

input.inputnameok:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: 0 0 5px #EA6264;
}

input.inputnameok:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: none;
  transform: translateY(2px);
}

input.inputnamereturn{
  border-radius:10px; 
  border:1px solid #ffffff;
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 0px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));  
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}

input.inputnamereturn:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);    
  box-shadow: 0 0 5px #EA6264;
}

input.inputnamereturn:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);    
  box-shadow: none;
  transform: translateY(2px);
}

/* 開始メッセージ *****************************************************************************************/


div.startmessage{
  width: 100%;
}

h1.startmessage {
  width: 110px;
  height:25px;
  border-radius :8px;
  border:1px solid rgb(255, 255, 255); 
  box-shadow :0px 0px 5px silver;
  color:rgb(255, 255, 255); 
  background: silver;
  padding-top:5px;
  font-size: 12px;
  font-weight:bold;
  margin-top: 2px;
  margin-left: 10px;
  text-align: center;
}

input.startmessage {
  position: relative;
  display: block;
  cursor:pointer; 
  width: 25%;
  height:25px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 16px; 
  font-weight: bold;
  background:#F4F4F4;  
  outline: none;
  box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
  margin-left: 20px;
  text-align: left;
  padding-left: 5px;
  margin-top: 4px;
}

input.startmessageok{
  border-radius:10px; 
  border:1px solid #ffffff;
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 5px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-left: 10px;
}


input.startmessageok:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: 0 0 5px #EA6264;
}

input.startmessageok:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: none;
  transform: translateY(2px);
}


/* 出題画面 *****************************************************************************************/

h1.controlquestionloop {
  position: absolute;
  width: 100%;
  height:30px;
  font-size: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:10px;
  padding-bottom: 5px;
}

h1.controlquestionloopblank {
  position: absolute;
  width: 100%;
  height:30px;
  font-size: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:10px;
  padding-bottom: 5px;
}

div.nameandtime{
  display: flex;
  position: relative;
  width: 100%;
  height:30px;
}

h1.questionloopname {
  width:500px;
  height:25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:5px;
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 10px;
}

h1.questionlooptime {
  width:300px;
  height:25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:5px;
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 530px;
}

div.questionloopcategory{
  display: flex;
  margin-top: 0px;
  width: 100%;
  height:30px;
}


h1.questionloopcategory {
  width:500px;
  height:25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:5px;
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 10px;
}

h1.questionloopendtime {
  width:300px;
  height:25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:5px;
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 530px;
}

h1.questionloopdifficulty {
  width:100px;
  height:25px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  border-radius:5px;
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 850px;
}

div.questionarea{
  max-width:100%; 
  margin-top: 5px;
  margin-left: 1px;
}

div.questiondiv{
  display: flex;
}

fieldset.questionarea {
  resize: none;
  padding:10px; 
  box-shadow: 0 0 3px rgb(0, 0, 0, 0.56);
  border: none;
  border-radius:0px; 
  width:98%; 
  height:190px; 
  margin-top: -1px;
  margin-left: 2px;
  background-color: #fff;
}

textarea.questionarea {
  resize: none;
  padding:10px; 
  width:95%; 
  height:190px; 
  border: none;
  background-color: #fff;
  font-size: 20px; 
  font-weight:bold; 
  font-family: Arial, Helvetica, sans-serif;
  margin-top: -10px;
  margin-left: 0px;
  white-space: pre-wrap;
}

textarea.answerresultarea {
  resize: none;
  padding:10px; 
  width:95%; 
  height:26px; 
  border: none;
  box-shadow: 0 0 3px rgb(0, 0, 0, 0.56);
  background-color: #fff;
  font-size: clamp(12px, 2vw, 16px); 
  font-weight:bold; 
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-left: 0px;
  white-space: pre-wrap;
  text-align: center;
  outline: none;
}

textarea.answerresultarea2 {
  resize: none;
  padding:10px; 
  padding-top: 0%;
  width:95%; 
  height:40px; 
  border: none;
  box-shadow: 0 0 3px rgb(0, 0, 0, 0.56);
  background-color: #fff;
  font-size: clamp(12px, 2vw, 16px); 
  font-weight:bold; 
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-left: 0px;
  white-space: pre-wrap;
  text-align: left;
  outline: none;
}

div.questionareaimage{
  display: flex;
  border: none;
}

img.questionarea {
  margin-left: 0px;
  margin-right: 10px;
  height: 160px;
  border: none;
  margin-top: 10px;
}

h1.onebyone {
  width:99%;
  height:30px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: rgb(0, 0, 0);
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  position:relative;
  font-size: 20px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 1px;
  text-align: center;
}

div.questionloopmessage{
  border:0px solid rgb(255, 255, 255); 
}

h1.questionloopmessage {
  width:99%;
  height:25px;
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  color: white;
  font-weight:bold;
  text-align: center;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  position:absolute;
  font-size: 16px; 
  font-weight:bold; 
  text-align: left;
  padding-left: 5px;
  margin-top: 0px;
  margin-left: 3px;
  text-align: center;
}

div.choicearea{
  margin-top: 20px;
  margin-left: 2px;
  width:99; 
  height:140px;
}

fieldset.choicearea{
  padding:10px; 
  border:1px solid rgb(255, 255, 255); 
  height:140px;
  font-size: 16px; 
  font-weight:bold; 
  background-color: #fff; 
  margin-top:20px;
  margin-left: 15px;
}

input[type="radio"]{
  display: none;
}

label.labelchoice{
  display: block;
  float: left;
  cursor:pointer; 
  text-align: center; 
  border-radius:10px; 
  border:1px solid rgb(255, 255, 255);
  width: 450px;
  height: 35px;
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: clamp(14px, 2vw, 20px); 
  font-weight:bold;
  font-family: Arial, Helvetica, sans-serif;
  color:rgb(42, 135, 240);
  margin-top: 7px;
  margin-left: 10px;
  padding-top: 5px;
}

label.labelchoice:hover{
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
  box-shadow:0 0 5px rgb(42, 135, 240); 
  color:rgb(255, 255, 255);
}

label.labelchoice:active{
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
  color:rgb(255, 255, 255);
  box-shadow: none;
  transform: translateY(1px);
}

input[type=radio] {
  display: none; 
  }
input[type="radio"]:checked + label {
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
  color: rgb(238, 240, 246); 
  }

  div.questionloopremain{
    margin-top: 20px;
  }

  h1.questionloopremain {
    width:200px;
    height:25px;
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    color: white;
    font-weight:bold;
    text-align: center;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    border-radius:5px;
    position:absolute;
    font-size: 16px; 
    font-weight:bold; 
    text-align: center;
    padding-left: 5px;
    margin-left: 10px;
  }

  input.questionloopok{
    border-radius:10px; 
    border:1px solid rgb(255, 255, 255);
    color:rgb(42, 135, 240); 
    width:100px; 
    height: 30px;
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0 0 5px rgb(42, 135, 240); 
    font-size: 20px; 
    font-weight:bold;
    margin-left: 750px;
    margin-top: 6px;
  }
  

  input.questionloopok:hover{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: 0 0 5px rgb(42, 135, 240); 
  }
  
  input.questionloopok:active{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: none;
    transform: translateY(2px);
  }

  div.colorselect{
    width:100%; 
  }

  input.colorselect{
    width: 30px;
    height: 30px;
    margin:0em 10px; 
    border:1px solid rgb(0, 0, 0); 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff); 
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
    margin-top: 5px;
    margin-left: 60px;
  }

  input.colorselect:hover{
    border: 1px solid rgb(0, 0, 0); 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
  }

  input.colorselect:active{
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 0, 0); 
    transform: translateY(1px);
  }


  /* 入力修正画面 *****************************************************************************************/

  h1.answerlistmessage {
    width:99%;
    height:25px;
    border:1px solid rgb(255, 255, 255); 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff);
    color: white;
    font-weight:bold;
    text-align: center;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    border-radius:5px;
    position:absolute;
    font-size: 16px; 
    font-weight:bold; 
    text-align: left;
    padding-left: 5px;
    margin-top: 50px;
    margin-left: 2px;
    text-align: center;
  }

  h1.keywordsearchlist {
    width: 150px;
    height:25px;
    border-radius :8px;
    background: #f0f0f0;
    color: #000000;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
    padding-top: 7px;
    font-size: 12px;
    font-weight:bold;
    text-align: left;
    text-align: center;
    margin-top: 0px;
    margin-left: 10px;
  }
  
  input.keywordsearchlist {
    display: block;
    width: 200px;
    height:28px; 
    border: none;
    font-size: 16px;
    font-weight:bold;
    color: rgb(0, 0, 0);
    outline: none;
    border: 1.5px solid rgb(255, 255, 255);
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    min-width: 150px;
  }
  
  input.keywordsearchlist:hover {
    border: 1.5px solid rgb(0, 50, 200);
    color: rgb(0, 0, 0);
    box-shadow:0 0 5px rgb(0, 50, 200); 
  }
  
div.answerkeyword{
  display: flex;
}
  
input.keywordclearlist {
  border-radius:5px; 
  border:1px solid  rgb(0, 0, 0, 0.56);
  width:50px; 
  height:32px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 10px;
  font-weight:bold; 
  margin-top: 0px;
  margin-left: 10px;
  color:rgb(0, 0, 0, 0.56);
  box-shadow: 0px 1px 1px 1px rgb(200, 200, 200); 
}

input.keywordclearlist:hover {
  border:1px solid rgb(0, 0, 0, 0.56);
  background: linear-gradient(to bottom , #f0f0f0, #f0f0f0 ,#f0f0f0, #cdcdcd); 
  color:rgb(0, 0, 0, 0.56);
  box-shadow: 0px 1px 1px 1px rgb(200, 200, 200); 
}

input.keywordclearlist:active {
  border:1px solid rgb(0, 0, 0, 0.56);
  background: linear-gradient(to bottom , #f0f0f0, #f0f0f0 ,#f0f0f0, #cdcdcd); 
  color:rgb(0, 0, 0, 0.56);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(200, 200, 200); 
  transform: translateY(1px);
}

  div.answerlist{
    border-radius:3px; 
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    width: 99.8%;
    overflow: auto;
    height:408px;
    margin-left: 2px;
    margin-top: 50px;
  }
  
  div.answerlist table{
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    margin: 0;
    width:100%;
    table-layout: fixed;
    border-collapse:collapse;
  }
  
  div.answerlist tr{
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  
    border-bottom:  0.1px solid #999;
  }
  
  div.answerlist th{
      box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
      font-size: 12px; 
      background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200));
      color:rgb(255, 255, 255); 
      position: sticky;
      height: 30px;
      top: 0;
      left: 0;
  }


  div.answerlist td{
    font-size: 12px; 
    height: 10px;
    font-weight:bold;
    word-wrap: break-word;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
    border-right: 0.1px solid #999;
    border-bottom:  0.1px solid #999;
    background: #FFF;
    padding: 5px;
}

  
  input.answerrevise {
    border-radius:10px; 
    border:1px solid rgb(0, 50, 200); 
    color:rgb(0, 50, 200); 
    width:100px; 
    height:30px; 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    box-shadow: 0 0 5px  rgb(0, 50, 200);
    font-size: 14px; 
    font-weight:bold;
  }


  input.answerrevise:hover {
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
    box-shadow:0 0 5px rgb(0, 50, 200); 
  }
  
  input.answerrevise:active {
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
    box-shadow: none;
    transform: translateY(2px);
  }

  input.answerreviseblank {
    border-radius:10px; 
    border:1px solid transparent; 
    color:transparent; 
    width:100px; 
    height:30px; 
    cursor:pointer; 
    background: transparent;
    box-shadow: 0 0 5px  transparent;
    font-size: 14px; 
    font-weight:bold;
  }

  div.answerlistquestion{
    width: 100%;
  }

  img.answerlist {
    margin-top: 2%;
    margin-left: 2%; 
    width:75%;
  }

  div.finishanswerbutton{
    margin-top:-10px;
    height:50px;
    width: 40%;
    margin-left: 350px;
  }

  input.finishanswerbutton{
    border-radius:10px; 
    border:1px solid red;
    color:red;
    margin-left: 20px;
    margin-top: 10px;
    padding-top: 0px;
    width:100px; 
    height:30px;
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    font-size: 16px; 
    font-weight:bold;
    box-shadow: 0px 1px 1px 1px red;
  }
  
  input.finishanswerbutton:hover  {
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
    box-shadow: 0px 1px 1px 1px red;
  }
  
  input.finishanswerbutton:active  {
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
    box-shadow: 0px 0.5px 0.5px 0.5px red;
    transform: translateY(1px);
  }

  div.modal-footer-finishlistaction{
    background: linear-gradient(to bottom , #ffffff , #ffffff ,#ffffff);
    margin-left: 2px;
    margin-top: 10px;
    height: 50px;
    width: 99.5%;
    text-align: center;
    padding-left: 1px;
  }

  input.finishlistok{
    border-radius:10px; 
    border:1px solid red ; 
    color: red ; 
    margin-top: 2px;
    margin-left: 340px;
    width:100px; 
    height: 30px;
    padding: 0px; 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    font-size: 15px; 
    font-weight:bold;
    box-shadow: 0px 1px 1px 1px  red ; 
  }
  
  input.finishlistok:hover{
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
    box-shadow: 0px 1px 1px 1px  red ; 
  }
  
  input.finishlistok:active{
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
    box-shadow: 0px 0.5px 0.5px 0.5px red ; 
    transform: translateY(1px);
  }

  input.finishlistcancel{
    border-radius:10px; 
    border:1px solid rgb(0, 50, 200); 
    color:rgb(0, 50, 200); 
    margin-top: 2px;
    margin-left: 110px;
    width:100px; 
    height: 30px;
    padding: 0px; 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    font-size: 15px; 
    font-weight:bold;
    box-shadow: 0px 1px 1px 1px  rgb(0, 50, 200);
  }
  
  input.finishlistcancel:hover{
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
    box-shadow: 0px 1px 1px 1px  rgb(0, 50, 200);
  }
  
  input.finishlistcancel:active{
    border:1px solid rgb(255, 255, 255); 
    color:rgb(255, 255, 255); 
    background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200), rgb(0, 50, 200));
    box-shadow: 0px 0.5px 0.5px 0.5px  rgb(0, 50, 200);
    transform: translateY(1px);
  }

  div.finishlist{
    margin-top: -10px;
  }

  div.finishlistaction{
    border-radius:3px; 
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    width: 99.8%;
    margin-left: 2px;
    margin-top: -10px;
  }

  div.answerlistconfirm{
    border-radius:3px; 
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    width: 99.8%;
    overflow: auto;
    height:408px;
    margin-left: 2px;
    margin-top: 41px;
  }
  
  div.answerlistconfirm table{
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    margin: 0;
    width:100%;
    table-layout: fixed;
    border-collapse:collapse;
  }
  
  div.answerlistconfirm tr{
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    border-bottom:  0.1px solid #999;
  }
  
  div.answerlistconfirm th{
      box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
      font-size: 12px; 
      background: linear-gradient(to bottom , rgb(0, 50, 200) , rgb(0, 50, 200) ,rgb(0, 50, 200));
      color:rgb(255, 255, 255); 
      position: sticky;
      height: 30px;
      top: 0;
      left: 0;
  }


  div.answerlistconfirm td{
    font-size: 12px; 
    height: 10px;
    font-weight:bold;
    word-wrap: break-word;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.56);
    border-right: 0.1px solid #999;
    border-bottom:  0.1px solid #999;
    background: #FFF;
    padding: 5px;
}

  /* 再入力画面 *****************************************************************************************/

  div.alreadyanswered{
    display: flex;
    margin-top: 25px;
    height:40px;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
  }

  h1.alreadyanswered {
    width:470px;
    height:30px;
    border:1px solid rgb(255, 255, 255); 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
    color: white;
    font-weight:bold;
    text-align: center;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.56);
    border-radius:5px;
    position:absolute;
    font-size: 16px; 
    font-weight:bold; 
    text-align: center;
    padding-left: 5px;
    margin-top: 5px;
    margin-left: 10px;
  }

  input.answerreviseok{
    border-radius:10px; 
    border:1px solid rgb(255, 255, 255);
    color:rgb(42, 135, 240); 
    width:100px; 
    height: 30px;
    padding: 3px; 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0 0 5px rgb(42, 135, 240); 
    font-size: 20px; 
    font-weight:bold;
    margin-left: 700px;
    margin-top: 3px;
  }
  
  
  input.answerreviseok:hover{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: 0 0 5px rgb(42, 135, 240); 
  }
  
  input.answerreviseok:active{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: none;
    transform: translateY(2px);
  }

  input.answerrevisereturn{
    border-radius:10px; 
    border:1px solid rgb(255, 255, 255);
    color:rgb(42, 135, 240); 
    width:100px; 
    height: 30px;
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0 0 5px rgb(42, 135, 240); 
    font-size: 20px; 
    font-weight:bold;
    margin-left: 10px;
    margin-top: 3px;
  }
  
  
  input.answerrevisereturn:hover{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: 0 0 5px rgb(42, 135, 240); 
  }
  

  input.answerrevisereturn:active{
    color:rgb(255, 255, 255); 
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(to bottom , rgb(42, 135, 240) , rgb(42, 135, 240) ,rgb(42, 135, 240), rgb(1, 97, 208));
    box-shadow: none;
    transform: translateY(2px);
  }

  div.colorselectrevise{
    width:100%; 
  }

  input.colorselectrevise{
    width: 30px;
    height: 30px;
    margin:0em 10px; 
    border:1px solid rgb(0, 0, 0); 
    cursor:pointer; 
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff); 
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
    margin-top: 6px;
    margin-left: 50px;
  }

  input.colorselectrevise:hover{
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0); 
  }

  input.colorselectrevise:active{
    background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
    box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 0, 0); 
    transform: translateY(1px);
  }

/* 終了メッセージ *****************************************************************************************/

div.endmessage{
  width:99.8%;
  height:140px;
  margin-top: 0px;
  margin-left: 2px;
}

h1.endmessage {
  color: white;
  font-size: 16px;
}

div.resultoutout{
  margin-top: 20px;
}

input.endpdfresult{
  border-radius:10px; 
  border:1px solid rgb(236, 71, 71); 
  color:rgb(236, 71, 71); 
  width:110px;
  height:30px;
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200));
  font-size: 14px;
  font-weight:bold;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(236, 71, 71);
}

input.endpdfresult:hover {
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(222, 0, 0));
  box-shadow: 0px 1px 1px 1px rgb(236, 71, 71);
}

input.endpdfresult:active{
  color:rgb(255, 255, 255); 
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(236, 71, 71) , rgb(236, 71, 71) ,rgb(236, 71, 71), rgb(183, 0, 0));
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(236, 71, 71);
  transform: translateY(1px);
}


input.endexcelresult{
  border-radius:10px; 
  border:1px solid rgb(91, 167, 15); 
  width:110px;
  height:30px; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  color:rgb(91, 167, 15);
  font-size: 14px;
  font-weight:bold;
  margin-left: 10px;
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.endexcelresult:hover  {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 1px 1px 1px rgb(91, 167, 15);
}

input.endexcelresult:active {
  border:1px solid rgb(255, 255, 255); 
  background: linear-gradient(to bottom , rgb(91, 167, 15) , rgb(91, 167, 15) ,rgb(91, 167, 15), rgb(59, 118, 0)); 
  color:rgb(255, 255, 255);
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(91, 167, 15);
  transform: translateY(1px);
}

input.endmessageok{
  border-radius:10px; 
  border:1px solid #ffffff;
  color:#EA6264;
  width:100px; 
  height: 30px;
  padding: 0px; 
  cursor:pointer; 
  background: linear-gradient(to bottom , #ffffff , #ffffff, #ffffff , rgb(200, 200, 200)); 
  box-shadow: 0 0 5px #EA6264;
  font-size: 15px; 
  font-weight:bold;
  margin-top: 0px;
  margin-left: 10px;
  box-shadow: 0px 0.5px 0.5px 0.5px rgb(0, 0, 0); 
}

input.endmessageok:hover{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
}


input.endmessageok:active{
  color:rgb(255, 255, 255); 
  border: 1px solid rgb(255, 255, 255);
  background: linear-gradient(to bottom , #EA6264, #EA6264,#EA6264, #ff272a);   
  box-shadow: none;
  transform: translateY(2px);
}

div.endresultdatas{
  display: flex;
  margin-top: 10px;
  margin-left: -20px;
}

h1.endresultdatas {
  width: 220px;
  height:30px;
  border-radius :8px;
  background:linear-gradient(to bottom , rgb(120, 187, 255) , rgb(0, 50, 200) ,rgb(0, 50, 200));
  box-shadow:0 0 2px rgb(0, 50, 200); 
  color:rgb(255, 255, 255);
  font-size: 12px;
  font-weight:bold;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 0px;
  margin-left: 30px;
  text-align: center;
}

div.endresultimgoutput{
  display: flex;
  width: 99.5%;
  height: 300px;
  margin-top: -5px;
  margin-left: 8px;
  text-align: left;
}

img.endresultimgoutput {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 1px 1px 1px;
  height: 300px;
  border-radius: 5px;
  margin-top: 0px;
  margin-left: 20px;
}

img.endresultimgoutput2 {
  border:1px solid rgb(0, 0, 0); 
  box-shadow: 1px 1px 1px;
  width: 540px;
  height: 300px;
  border-radius: 5px;
  margin-top: 0px;
  margin-left: 10px;
}

p.endmessage{
  margin-left:0px;
  font-size: 16px; 
  font-weight: bold;
  margin-top: 10px;
}