:root{
  --main:#000000;
  --sub:#434DA2;
  --color1:#545454;
  --color2:#CCCCCC;
  --color3:#FFFFFF;
  --body-background:url("picture/background.png");
  --border:0.4vw;
  --size1:4vw;
  --size2:8vw;
  --size3:2vw;
  --size4:1vw;
  --size5:3vw;
  --margin:20vw;
  --body-height:120vw;
  --button:10vw;
  --button-radius1:5vw;
  --button-radius2:1vw;
  --button-back-top:21vw;
  --button-back-left:7.6vw;
  --input-text-height:7.2vw;
  --input-number-height:5vw;
  --input-radio-height:2.5vw;
  --input-radio-margin-right:-1vw;
  --input-radio-after-radius:1.8vw;
  --input-checkbox-after-left:0.7vw;
  --arrow-width:12vw;
  --arrow-height:9vw;
  --arrow-padding-right:2.2vw;
  --table-line-height-1:7.35vw;
  --table-line-height-2:5.5vw
}
body{
  background-image:var(--body-background);
  background-size:100%;
  background-repeat:repeat-y;
  height:var(--body-height);
  margin:0;
}
*{
  font-size:var(--size1);
  font-family:"Kosugi Maru";
}
.set-position{
  position:absolute;
  top:var(--top);
  left:var(--left);
}
.set-size{
  width:var(--width);
  height:var(--height);
}
.head-b{
  position:fixed;
  bottom:0;
  left:0;
  height:16vw;
  width:100%;
  background-color:var(--main);
  opacity:0.9;
  z-index:10000;
}
.head-button{
  height:20vw;
  width:30vw;
  opacity:0;
}
.head-line{
  height:8vw;
  background-color:var(--color3);
}
.set-margin{
  height:var(--margin);
  width:95%;
}
.text-big{
  font-size:var(--size2);
	color:var(--color1);
}
.text-small{
	color:var(--color1);
}
.text-small2{
  font-size:var(--size3);
	color:var(--color1);
}
.text-A{
	color:var(--main);
}
.text-B{
	color:var(--color3);
}
.text-admin{
  line-height:var(--input-text-height);
}
.button{
  display:flex;
  justify-content:center;
  align-items:center;
	height:var(--button);
  line-height:var(--button);
  cursor:pointer;
}
.button-A{
	background:var(--main);
	color:var(--color3);
	border:none;
	border-radius:var(--button-radius1);
}
.button-B{
	background:var(--color3);
	color:var(--color1);
	border:var(--border) solid var(--sub);
	border-radius:var(--button-radius1);
}
.button-C{
	background:none;
	color:var(--main);
	border:none;
}
.button-D{
	background:var(--main);
	color:var(--color3);
	border:none;
	border-radius:var(--button-radius1);
  height:var(--size2);
  line-height:var(--size2);
}
.button-E{
	background:var(--main);
	color:var(--color3);
	border:none;
	border-radius:var(--button-radius2);
  height:var(--button);
  line-height:var(--button);
  z-index:2;
}
.button-F{
	background:var(--color3);
	color:var(--color1);
	border:var(--border) solid var(--sub);
	border-radius:var(--button-radius1);
  height:var(--size2);
  line-height:var(--size2);
}
.button-G{
  color:var(--sub);
  background:none;
  border:none;
  border-bottom:var(--border) solid var(--sub);
  height:var(--size5);
  font-size:var(--size3);
}
.button-back{
	background:none;
	color:var(--color1);
	border:none;
  position:absolute;
  top:var(--button-back-top);
  left:var(--button-back-left);
}
label {
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  line-height:1;
  vertical-align:middle;
}
input[type="checkbox"],
input[type="radio"] {
  vertical-align:middle;
}
.input-text{
  padding-left:var(--size3);
	height:var(--input-text-height);
  line-height:var(--size2);
	background:var(--color3);
	color:var(--color1);
	border:var(--border) solid var(--sub);
	border-radius:var(--size4);
  opacity:0.8;
}
.input-number{
  padding-left:var(--size3);
  height:var(--input-number-height);
  line-height:var(--size2);
  background:var(--color3);
  color:var(--color1);
  border:var(--border) solid var(--sub);
  border-radius:var(--size4);
  opacity:0.8;
  font-size:var(--size5);
}
.input-radio{
  appearance:none;
  position:relative;
  width:var(--size1);
  height:var(--size1);
  border-radius:var(--size3);
  background-color:var(--color2);
  margin:0;
  margin-right:var(--input-radio-margin-right);
  cursor:pointer;
}
.input-radio:checked::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:var(--input-radio-height);
  height:var(--input-radio-height);
  border-radius:var(--input-radio-after-radius);
  background-color:var(--main);
}
.input-checkbox{
  appearance:none;
  position:relative;
  width:var(--size1);
  height:var(--size1);
  border:var(--border) solid var(--sub);
  border-radius:var(--size4);
  background-color:var(--color3);
  cursor:pointer;
}
.input-checkbox:checked{
  border:none;
  background-color:var(--main);
}
.input-checkbox:checked::after{
  content:"";
  position:absolute;
  top:var(--size4);
  left:var(--input-checkbox-after-left);
  width:var(--size3);
  height:var(--size4);
  border-bottom:var(--border) solid var(--color3);
  border-left:var(--border) solid var(--color3);
  transform:rotate(-45deg);
}
.input-file-1{
  display:none;
}
.input-file-2{
  border-radius:var(--size3);
  border:var(--border) solid var(--sub);
  background-color:var(--color3);
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
}
.line{
 position: absolute;
 height: var(--border);
}
.line-A{
  background:var(--main);
}
.line-B{
  background: var(--sub);
  opacity: 0.5;
}
.arrow{
  display:inline-block;
  width:var(--arrow-width);
  height:var(--arrow-height);
  line-height:var(--arrow-height);
  background:var(--main);
  clip-path:polygon(0 17.4%, 73.2% 17.4%, 73.2% 0, 100% 50%, 73.2% 100%, 73.2% 82.6%, 0 82.6%);
	text-align:center;
  padding-right:var(--arrow-padding-right);
	color:var(--color3);
}
.table{
  border-collapse:collapse;
}
.table-1{
  border-top:var(--border) solid var(--color2);
  border-left:none;
  border-right:none;
  line-height:var(--table-line-height-1);
}
.table-2{
  border:var(--border) solid var(--color2);
  font-size:var(--size3);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background-color:var(--color3);
}
.table-3{
  border-top:var(--border) solid var(--color2);
  border-left:none;
  border-right:none;
  line-height:var(--table-line-height-2);
  font-size:var(--size3);
}
.graph-A-text-1{
  font-size:var(--size5);
}
.graph-element{
  background-color: var(--main);
}
.graph-text{
  box-sizing:border-box;
  display:block;
  transform:scale(var(--ggs, 1));
  width:var(--size);
  height:var(--size);
  border:9.1% solid transparent;
  border-radius:45.5%;
}
.graph-text::after,
.graph-text::before{
  content:"";
  display:block;
  box-sizing:border-box;
  position:absolute;
  width:72.7%;
  height:9.1%;
  background:currentColor;
  transform:rotate(45deg);
  border-radius:22.7%;
  top:36.4%;
  left:4.5%;
}
.graph-text::after{
  transform: rotate(-45deg);
}
.card{
border:var(--border) solid var(--color2);
background-color:var(--color3);
padding:var(--border);
border-radius:var(--size4);
}
.card-2{
  display:flex;
  justify-content:center;
  align-items:center;
}
.comment{
  overflow-y:auto;
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-break:break-all; 
  border:var(--border) solid var(--color2);
  background-color:var(--color3);
  padding:var(--size3);
  border-radius:var(--size1);
}
.comment-element{
  margin:var(--size5) 0;
  font-size:var(--size3);
}
.comment-2{
overflow-y:auto;
overflow-x:hidden;
overflow-wrap:break-word;
word-break:break-all;
}