html, body {
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
/*
    margin: 0;
    padding: 0;
*/
    background-color: #333;
/*
    background-image: repeating-linear-gradient(45deg, #313131 25%, transparent 25%, transparent 75%, #313131 75%, #313131), repeating-linear-gradient(45deg, #313131 25%, #333 25%, #333 75%, #313131 75%, #313131);
    background-position: 0 0, 50px 50px;
    background-size: 100px 100px;    
*/
}
.base-frame {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}
.left-frame {
    padding-left: 5px;
    padding-top: 5px;
    width: 20%;
}
.right-frame {
    width: 80%;
    overflow: auto;
}
.main_header {
    font-size:  28px;
    color: #ff0;
}
.stage_header {
    margin:  0;
    font-size:  28px;
    color: #fff;
    position:  relative;
    font-weight:  heavy;
    display:  inline-block;
    padding-top: 15px;
    padding-left: 80px;
    padding-bottom: 10px;
}
.stage_header:before {
    content:  '';
    background-color: #ffeaac;
    display:  block;
    position:  absolute;
    left:  5px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 5px;
    z-index: 1;
}
.page_index {
    font-size:  20px;
	background-color: #8c85ef;
	color: #fff;
	overflow: hidden;
	padding: 6px 6px 6px 20px;
    position: relative;    
}
.page_index:before {
	background-color: #fff;
	content: '';
	display: block;
	opacity: 0.3;
	transform: rotate(-50deg);
	position: absolute;
	bottom: -10px;
	right: -330px;
	width: 500px;
	height: 500px;
}
.page_index:after {
    background-color: #fff;
	content: '';
	display: block;
	opacity: 0.3;
	transform: rotate(-70deg);
	position: absolute;
	bottom: -100px;
	right: -500px;
	width: 500px;
	height: 500px;
}
.stage_image {
    width: 800px;
    margin-left: 8px;
}
.field_frame {
    width: 700px;
    margin-left: 40px;
    background-color: #ddd;
}
.field_table {
    width: 100%;
}
.field_table td {
    width: 6.25%;
    font-size: 12px;
}
.field_table td img {
    width: 50%;
}
.list_table {
    margin-left: 8px;
    width: 80%;
    background-color: #999;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
}
.list_table th {
    padding: 10px;
    border-bottom: solid 4px #478cd3;
    color: #478cd3
}
.list_table td {
    padding: 10px;
    border-bottom: solid 1px #478cd3;
}

/* メニューボタン */
.menu_button1 {
  background-color: #3DD1E7;
  border: 0 solid #E5E7EB;
  box-sizing: border-box;
  color: #000000;
  display: flex;
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.00rem;
  margin-bottom: 0.5rem;
  padding: .5rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  width: 80%;
  max-width: 240px;
  position: relative;
  cursor: pointer;
  transform: rotate(-2deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.menu_button1:focus {
  outline: 0;
}
.menu_button1:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}
.menu_button1:hover:after {
  bottom: 2px;
  left: 2px;
}
.menu_button2 {
    background-color: #9F9127;
    border: 0 solid #E5E7EB;
    box-sizing: border-box;
    color: #000000;
    display: flex;
    font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.00rem;
    margin-bottom: 0.5rem;
    padding: .5rem 1.65rem;
    position: relative;
    text-align: center;
    text-decoration: none #000000 solid;
    text-decoration-thickness: auto;
    width: 80%;
    max-width: 240px;
    position: relative;
    cursor: pointer;
    transform: rotate(-2deg);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.menu_button2:focus {
    outline: 0;
}
.menu_button2:after {
    content: '';
    position: absolute;
    border: 1px solid #000000;
    bottom: 4px;
    left: 4px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}
.menu_button2:hover:after {
    bottom: 2px;
    left: 2px;
}
.menu_button3 {
    background-color: #873147;
    border: 0 solid #E5E7EB;
    box-sizing: border-box;
    color: #000000;
    display: flex;
    font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.00rem;
    margin-bottom: 0.5rem;
    padding: .5rem 1.65rem;
    position: relative;
    text-align: center;
    text-decoration: none #000000 solid;
    text-decoration-thickness: auto;
    width: 80%;
    max-width: 240px;
    position: relative;
    cursor: pointer;
    transform: rotate(-2deg);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.menu_button3:focus {
    outline: 0;
}
.menu_button3:after {
    content: '';
    position: absolute;
    border: 1px solid #000000;
    bottom: 4px;
    left: 4px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}
.menu_button3:hover:after {
    bottom: 2px;
    left: 2px;
}
@media (min-width: 768px) {
    .menu_button1 {
        padding: .75rem 3rem;
        font-size: 1.25rem;
    }
    .menu_button2 {
        padding: .75rem 3rem;
        font-size: 1.25rem;
    }
    .menu_button3 {
        padding: .75rem 3rem;
        font-size: 1.25rem;
    }
}