:root {
    --nagasa-color: linear-gradient(to right, #93d784 0%, #5e7907 100%);
    --kakudo-color: linear-gradient(to right, #84D7CD 0%, #075179 100%);
    --log-area-color: #e7e7eb;
    font-family: 'Noto Sans Japanese';
  }

  html, body {
    background-color: #e7e7eb;
    font-family: 'Noto Sans Japanese';
    overflow: hidden;
    min-height: 100%;
  }

  body {
    
    display: flex;
  }

  /* .dialog0 {
    font-size: 30px;
    font-family: 'Noto Sans Japanese';
    text-align: center;
  } */
  .abcd {
    text-align: center;
  }

  .abcd1 {
    text-align: center;
  }


  table {
    display: block;
    overflow-x: auto;
    font-size: 30px;
    border-radius: 10px;
    /* -webkit-overflow-scrolling: touch; */
  }

  td {
    white-space: nowrap;
    font-size: 25px;
    height: 75px;
  }

  td.td-first {
    width: 30%;
    border-radius: 10px 0 0 10px;
    padding-left: 10px;
  }

  td.td-second_dist {
    width: 60%;
  }

  td.td-second_ang {
    width: 60%;
  }

  td.td-third {
    width: 10%;
    border-radius: 0 10px 10px 0;
    padding-right: 10px;
    padding-left: 5px;
  }

  td:empty {
    background-clip: content-box;
    background-color: #d97873;
    padding: 20px 0px;
  }

  .dist_color {
    background-image: linear-gradient(to right, rgba(147, 215, 132, 0.4) 0%, rgba(94, 121, 7, 0.4) 100%);
    /* background: var(--nagasa-color); */
  }

  .ang_color {
    background-image: linear-gradient(to right, rgba(132, 215, 205, 0.4) 0%, rgba(7, 81, 121, 0.4) 100%);
    /* background: var(--kakudo-color); */
  }

  .grovalNavigation {
    flex: 1;
    /* min-width: 900px; */
    font-family: 'Noto Sans Japanese';
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .localNavigation {
    flex: 1;
    text-align: center;
    color: #727171;
    font-family: 'Noto Sans Japanese';
    display: block;
  }

  .content {
    position: relative;
    display: block;
    text-align: center;
    color: #727171;
    font-family: 'Noto Sans Japanese';
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    border-radius: 10px;
    color: #727171;
  }

  .radio-inline__label {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 18px;
    border-radius: 10px;
    transition: all .2s;
    color: #727171;
    font-size: 35px;
  }

  .radio-inline__input:checked+.radio-inline__label {
    background: var(--nagasa-color);
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, .7);
  }

  .radio-inline__input_angle {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
  }

  .radio-inline__label_angle {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 18px;
    border-radius: 10px;
    transition: all .2s;
    font-size: 35px;
  }

  .radio-inline__input_angle:checked+.radio-inline__label_angle {
    background: var(--kakudo-color);
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, .7);
  }

  .radio-inline__input_record {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    border-radius: 10px;
  }

  .radio-inline__label_record {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 18px;
    border-radius: 10px;
    transition: all .2s;
    font-size: 35px;
    border: none;
    outline: none;
  }

  .radio-inline__input_record:checked+.radio-inline__label_record {
    background: var(--kakudo-color);
    text-shadow: 0 0 1px rgba(0, 0, 0, .7);
  }

  .nagasaColor {
    background-image: linear-gradient(to right, rgba(147, 215, 132, 0.4) 0%, rgba(94, 121, 7, 0.4) 100%);
  }

  .kakudoColor {
    background-image: linear-gradient(to right, rgba(132, 215, 205, 0.4) 0%, rgba(7, 81, 121, 0.4) 100%);
  }

  .btn-nagasa {
    background-image: linear-gradient(to right, #899988 0%, #899988 40%, #93d784 51%, #5e7907 100%)
  }

  .btn-nagasa {
    margin: 10px;
    margin-top: 20px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-nagasa:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }

  .btn-kakudo {
    background-image: linear-gradient(to right, #889999 0%, #889999 40%, #84D7CD 51%, #075179 100%)
  }

  .btn-kakudo {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-kakudo:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
  }

  .btn-touroku {
    background: linear-gradient(to right, #d784c4 0%, #79075e 100%);
  }

  .btn-touroku {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-touroku:active {
    color: #fff;
    background-position: right center;
    background: linear-gradient(to right, #d784c4 0%, #79075e 100%);
    text-decoration: none;
    /* transform: scale(0.95); */
  }

  .btn-delete_sphe {
    background: linear-gradient(to right, #565656 0%, #565656 100%);
  }

  .btn-delete_sphe {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    /* text-transform: uppercase; */
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /* display: block; */
  }

  .btn-delete_sphe:active {
    color: #fff;
    background-position: right center;
    background: linear-gradient(to right, #d784c4 0%, #79075e 100%);
    text-decoration: none;
    /* transform: scale(0.95); */
  }

  .radio-inline__label_delete {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 18px;
    border-radius: 10px;
    transition: all .2s;
    font-size: 35px;
    border: none;
    outline: none;
  }

  .radio-inline__input_delete:checked+.radio-inline__label_delete {
    background: var(--kakudo-color);
    text-shadow: 0 0 1px rgba(0, 0, 0, .7);
  }

  .scrollArea {
    height: 740px;
    overflow: auto;
    border-radius: 10px;
    background:
      /* Shadow covers */
      linear-gradient(var(--log-area-color) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(rgba(255, 255, 255, 0), var(--log-area-color) 70%) 0 100%,
      /* Shadows */
      /* radial-gradient(形状とサイズ at 中心位置, 開始色, 途中色, 終了色) */
      radial-gradient(ellipse farthest-side at 50% 0%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)),
      radial-gradient(ellipse farthest-side at 50% 100%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) 0% 100%;
    background-repeat: no-repeat;
    background-color: var(--log-area-color);
    background-size: 100% 100px, 100% 100px, 100% 25px, 100% 25px;
    /* Opera doesn’t support this in the shorthand */
    /* スクロールすることでshadowを移動させる */
    background-attachment: local, local, scroll, scroll;
  }

  .scrollArea::-webkit-scrollbar {
    display: none;
  }

  .annotation {
    position: absolute;
    right: 0;
    margin-right: 10px;
    margin-top: 10px;
    width: 350px;
    height: 80px;
    background: rgba(231, 231, 235, 1);
    font-size: 35px;
  }

  .btn_delete_area {
    position: absolute;
    top: 15%;
    left: 89%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
    font-size: 30px;
  }

  .table11 {
    /* border: solid 1px #000000; */
    border-collapse: separate;
    border-spacing: 0px 8px;
  }

  #keisokuchi {
    position: absolute;
    white-space: nowrap;
    color: #333333;
    top: 50%;
    /*親要素を起点に上から50%*/
    left: 50%;
    /*親要素を起点に左から50%*/
    transform: translateY(-50%) translateX(-50%);
    /*要素の大きさの半分を戻す*/
  }

  .information {
    padding: 10px;
    font-size: 25px;
  }

  .studentName {
    background-color: white;
    margin-bottom: 10px;
    margin: 10px;
    font-size: 30px;
  }

  .nyuuryoku1 {
    text-align: center;
  }

  /* --------------ここからダイアログ関係---------------- */


  /* .ui-widget {
    font-size: 30px;
  }

  .ui-accordion-content {
  }

  .ui-widget, .ui-dialog{
    font-family: 'Noto Sans Japanese';
  }

  .dialog_hist button, .dialog_reg button{
    font-family: 'Noto Sans Japanese';
  } */

  /* 閉じるボタン一旦消す */
  button.ui-dialog-titlebar-close{
      display: none;
  }
  /* ヘッダー部分だけぽインタ無効 */
  .ui-accordion-header, .ui-accordion-header.active {
    /* background-color: #d97873; */
    pointer-events: none;
  }

  /*! jQuery UI - v1.13.2 - 2023-01-20
  * http://jqueryui.com
  * Includes: core.css, accordion.css, theme.css
  * To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityActive=75&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgImgOpacityContent=75&bgImgOpacityHeader=75&cornerRadiusShadow=8px&offsetLeftShadow=-8px&offsetTopShadow=-8px&thicknessShadow=8px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23aaaaaa&opacityOverlay=60&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%234c4949&iconColorError=%23cd0a0a&fcError=%23cd0a0a&borderColorError=%23cd0a0a&bgTextureError=flat&bgColorError=%23fef1ec&iconColorHighlight=%232e83ff&fcHighlight=%23363636&borderColorHighlight=%23fcefa1&bgTextureHighlight=flat&bgColorHighlight=%23fbf9ee&iconColorActive=%23454545&fcActive=%23111111&borderColorActive=%23aaaaaa&bgTextureActive=flat&bgColorActive=%23cccccc&iconColorHover=%23454545&fcHover=%23212121&borderColorHover=%23999999&bgTextureHover=flat&bgColorHover=%23dadada&iconColorDefault=%23888888&fcDefault=%23111111&borderColorDefault=%23aaaaaa&bgTextureDefault=flat&bgColorDefault=%23cccccc&iconColorContent=%23222222&fcContent=%23222222&borderColorContent=%23aaaaaa&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23222222&fcHeader=%23111111&borderColorHeader=%23aaaaaa&bgTextureHeader=flat&bgColorHeader=%23cccccc&cornerRadius=4px&fwDefault=normal&fsDefault=1.1em&ffDefault=Verdana%2CArial%2Csans-serif
  * Copyright jQuery Foundation and other contributors; Licensed MIT */

  /* Layout helpers
  ----------------------------------*/
  .ui-helper-hidden {
  	display: none;
  }
  .ui-helper-hidden-accessible {
  	border: 0;
  	clip: rect(0 0 0 0);
  	height: 1px;
  	margin: -1px;
  	overflow: hidden;
  	padding: 0;
  	position: absolute;
  	width: 1px;
  }
  .ui-helper-reset {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	outline: 0;
  	line-height: 1.3;
  	text-decoration: none;
  	font-size: 100%;
  	list-style: none;
  }
  .ui-helper-clearfix:before,
  .ui-helper-clearfix:after {
  	content: "";
  	display: table;
  	border-collapse: collapse;
  }
  .ui-helper-clearfix:after {
  	clear: both;
  }
  .ui-helper-zfix {
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	position: absolute;
  	opacity: 0;
  	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
  }

  .ui-front {
  	z-index: 100;
  }


  /* Interaction Cues
  ----------------------------------*/
  .ui-state-disabled {
  	cursor: default !important;
  	pointer-events: none;
  }


  /* Icons
  ----------------------------------*/
  .ui-icon {
  	display: none;
  	vertical-align: middle;
  	margin-top: -.25em;
  	position: relative;
  	text-indent: -99999px;
  	overflow: hidden;
  	background-repeat: no-repeat;
    font-size: 30px;
  }

  .ui-widget-icon-block {
  	left: 50%;
  	margin-left: -8px;
  	display: block;
  }

  /* Misc visuals
  ----------------------------------*/

  /* Overlays */
  .ui-widget-overlay {
  	font-family: 'Noto Sans Japanese';
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  }
  .ui-accordion .ui-accordion-header {
  	font-family: 'Noto Sans Japanese';
  	display: block;
  	cursor: pointer;
  	position: relative;
  	margin: 2px 0 0 0;
  	padding: .5em .5em .5em .7em;
  	font-size: 100%;
  }
  .ui-accordion .ui-accordion-content {
  	font-family: 'Noto Sans Japanese';
  	padding: 1em 2.2em;
  	border-top: 0;
  	overflow: auto;
  }

  /* Component containers
  ----------------------------------*/
  .ui-widget {
  	font-family: 'Noto Sans Japanese';
  	font-size: 30px;
  }
  .ui-widget .ui-widget {
  	font-size: 30px;
  }
  .ui-widget input,
  .ui-widget select,
  .ui-widget textarea,
  .ui-widget button {
  	font-family: 'Noto Sans Japanese';
  	font-size: 30px;
    border-radius: 10px;
  	border: 1px solid #aaaaaa;
    padding: 15px 25px;
    margin: 15px 25px;
    background: linear-gradient(to right, #fceabb 0%, #f8b500 100%);
  }
  .ui-widget select, .ui-widget input {
  	font-family: 'Noto Sans Japanese';
  	font-size: 30px;
    border-radius: 10px;
  	border: 1px solid #aaaaaa;
    padding: 15px 45px;
    background: linear-gradient(to right, #F4E2D8 0%, #F4E2D8 100%);
  }


  .ui-widget.ui-widget-content {
  	font-family: 'Noto Sans Japanese';
  	border: 1px solid #aaaaaa;
  }
  .ui-widget-content {
  	font-family: 'Noto Sans Japanese';
  	border: 1px solid #aaaaaa;
  	background: #ffffff;
  	color: #222222;
  }
  .ui-widget-content a {
  	font-family: 'Noto Sans Japanese';
  	color: #222222;
  }
  .ui-widget-header {
  	font-family: 'Noto Sans Japanese';
  	border: 1px solid #aaaaaa;
  	background: #cccccc;
  	color: #111111;
  	font-weight: bold;
  }
  .ui-widget-header a {
  	font-family: 'Noto Sans Japanese';
  	color: #111111;
  }

  /* Interaction states
  ----------------------------------*/
  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,

  /* We use html here because we need a greater specificity to make sure disabled
  works properly when clicked or hovered */
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
  	font-family: 'Noto Sans Japanese';
  	border: 1px solid #aaaaaa;
  	background: #cccccc;
  	font-weight: normal;
  	color: #111111;
  }
  .ui-state-default a,
  .ui-state-default a:link,
  .ui-state-default a:visited,
  a.ui-button,
  a:link.ui-button,
  a:visited.ui-button,
  .ui-button {
  	color: #111111;
  	text-decoration: none;
  }
  .ui-state-hover,
  .ui-widget-content .ui-state-hover,
  .ui-widget-header .ui-state-hover,
  .ui-state-focus,
  .ui-widget-content .ui-state-focus,
  .ui-widget-header .ui-state-focus,
  .ui-button:hover,
  .ui-button:focus {
  	border: 1px solid #999999;
  	background: #dadada;
  	font-weight: normal;
  	color: #212121;
  }
  .ui-state-hover a,
  .ui-state-hover a:hover,
  .ui-state-hover a:link,
  .ui-state-hover a:visited,
  .ui-state-focus a,
  .ui-state-focus a:hover,
  .ui-state-focus a:link,
  .ui-state-focus a:visited,
  a.ui-button:hover,
  a.ui-button:focus {
  	color: #212121;
  	text-decoration: none;
  }

  .ui-visual-focus {
  	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
  }
  .ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active,
  .ui-button:active,
  .ui-button.ui-state-active:hover {
  	border: 1px solid #aaaaaa;
  	background: #cccccc;
  	font-weight: normal;
  	color: #111111;
  }
  .ui-icon-background,
  .ui-state-active .ui-icon-background {
  	border: #aaaaaa;
  	background-color: #111111;
  }
  .ui-state-active a,
  .ui-state-active a:link,
  .ui-state-active a:visited {
  	color: #111111;
  	text-decoration: none;
  }

  /* Interaction Cues
  ----------------------------------*/
  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
  	border: 1px solid #fcefa1;
  	background: #fbf9ee;
  	color: #363636;
  }
  .ui-state-checked {
  	border: 1px solid #fcefa1;
  	background: #fbf9ee;
  }
  .ui-state-highlight a,
  .ui-widget-content .ui-state-highlight a,
  .ui-widget-header .ui-state-highlight a {
  	color: #363636;
  }
  .ui-state-error,
  .ui-widget-content .ui-state-error,
  .ui-widget-header .ui-state-error {
  	border: 1px solid #cd0a0a;
  	background: #fef1ec;
  	color: #cd0a0a;
  }
  .ui-state-error a,
  .ui-widget-content .ui-state-error a,
  .ui-widget-header .ui-state-error a {
  	color: #cd0a0a;
  }
  .ui-state-error-text,
  .ui-widget-content .ui-state-error-text,
  .ui-widget-header .ui-state-error-text {
  	color: #cd0a0a;
  }
  .ui-priority-primary,
  .ui-widget-content .ui-priority-primary,
  .ui-widget-header .ui-priority-primary {
  	font-weight: bold;
  }
  .ui-priority-secondary,
  .ui-widget-content .ui-priority-secondary,
  .ui-widget-header .ui-priority-secondary {
  	opacity: .7;
  	-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
  	font-weight: normal;
  }
  .ui-state-disabled,
  .ui-widget-content .ui-state-disabled,
  .ui-widget-header .ui-state-disabled {
  	opacity: .35;
  	-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
  	background-image: none;
  }
  .ui-state-disabled .ui-icon {
  	-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
  }


  /* Misc visuals
  ----------------------------------*/

  /* Corner radius */
  .ui-corner-all,
  .ui-corner-top,
  .ui-corner-left,
  .ui-corner-tl {
  	border-top-left-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-top,
  .ui-corner-right,
  .ui-corner-tr {
  	border-top-right-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-bottom,
  .ui-corner-left,
  .ui-corner-bl {
  	border-bottom-left-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-bottom,
  .ui-corner-right,
  .ui-corner-br {
  	border-bottom-right-radius: 4px;
  }

  /* Overlays */
  .ui-widget-overlay {
  	background: #4c4949;
  	opacity: .6;
  	-ms-filter: Alpha(Opacity=60); /* support: IE8 */
  }
  .ui-widget-shadow {
  	-webkit-box-shadow: -8px -8px 8px #aaaaaa;
  	box-shadow: -8px -8px 8px #aaaaaa;
  }