@import url(https://fonts.googleapis.com/css?family=Nunito);
.ZebraDialog_NoScroll{position:fixed;left:0;top:0;height:100%}.ZebraDialog *{box-sizing:content-box!important}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{margin:0;padding:0;text-align:left}.ZebraDialog{max-width:100%;z-index:1001}@media (max-width:574px){.ZebraDialog{width:100%}}.ZebraDialog_Confirmation .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/confirmation.png?4bff3d0e19926fa7b92517a697c7f115)}.ZebraDialog_Error .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/error.png?d36ca61e59573933e9ed6ec0520983cf)}.ZebraDialog_Information .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/information.png?11f14646453a636474964bc32e6a5a33)}.ZebraDialog_Question .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/question.png?c60973243e4ff24921861ae77ab1ed1e)}.ZebraDialog_Warning .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/warning.png?35bd8dc42f79335597251c5f81de89b7)}.ZebraDialog_Prompt .ZebraDialog_Body{background-image:url(/images/vendor/zebra_dialog/dist/css/flat/prompt.png?0d56906d046c4471e2c06dc8ee639518)}.ZebraDialog_Buttons.ZebraDialog_Buttons_Centered{text-align:center}a.ZebraDialog_Close{background:0 0;font-family:arial,sans-serif;font-size:21px;font-weight:700;margin-top:-15px;position:absolute;text-decoration:none;top:50%}.ZebraDialog_NoTitle .ZebraDialog_Close{top:0;margin-top:0}.ZebraDialogBackdrop{background:#666;height:100%;z-index:1000;width:100%}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{font-family:Helvetica,Tahoma,Arial,sans-serif;font-size:14px;line-height:1.4}.ZebraDialog_Spinner{background:url(/images/vendor/zebra_dialog/dist/css/flat/spinner.gif?d37cda0c8a32ead5a9a3ff0aac8d15cc) center center no-repeat;height:32px}.ZebraDialog_Spinner.ZebraDialog_iFrame{left:50%;margin-left:-16px;margin-top:-16px;position:absolute;top:50%;width:32px;z-index:2}.ZebraDialog{background:#fff;border:1px solid #dedede}.ZebraDialog.ZebraDialog_NotModal{box-shadow:0 0 10px #ccc}.ZebraDialog_Title{position:relative;border-bottom:1px solid #f0f0f0;color:#000;font-size:16px;font-weight:700;padding:12px 15px}.ZebraDialog_Body{overflow:auto;-webkit-overflow-scrolling:touch;color:#44484a;margin:10px;padding:20px}.ZebraDialog_Icon .ZebraDialog_Body{background-repeat:no-repeat;background-position:25px 20px;padding-left:124px;min-height:64px}.ZebraDialog_Prompt_Input{width:100%;box-sizing:border-box!important;padding:8px;margin:10px 0 0;border:1px solid #cbcbcb;color:#44484a;border-radius:3px}.ZebraDialog_Buttons{text-align:right;padding:10px 5px 10px 10px}.ZebraDialog_Buttons a{display:inline-block;white-space:nowrap;zoom:1;*display:inline;background:#516270;color:#fff;font-weight:700;margin-right:5px!important;min-width:60px;padding:10px 15px;text-align:center;text-decoration:none}.ZebraDialog_Buttons a:hover{background:#224467;color:#fff}.ZebraDialog_Close{color:#888;right:10px}.ZebraDialog_Close:focus,.ZebraDialog_Close:hover{color:#000}
@charset "UTF-8";

html {
  font-size: 62.5%;
}

body {
  font-family: sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
  font-size: 2.6rem;
  background-color: var(--background_color);
}

@media (max-width: 559px) {
  body {
    font-size: 1.6rem;
  }
}

.login__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  background-color: #343a40;
  padding-left: 2rem;
}

.login__container {
  margin-top: 4rem;
  min-height: calc(100vh - 4rem);
  padding: 2rem;
  background-color: #99ccbf;
  box-sizing: border-box;
}

.my-card {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  background-color: white;
  width: 70vw;
  max-width: 768px;
  margin: 0 auto;
}

@media (max-width: 559px) {
  .my-card {
    width: 90vw;
  }
}

.my-card__header {
  background-color: #343a40;
  color: white;
  padding: 2rem 0;
  font-size: 2rem;
  text-align: center;
}

@media (max-width: 559px) {
  .my-card__header {
    font-size: 1.6rem;
    padding: 1rem 0;
  }
}

.my-card__body {
  padding: 2rem 6rem 4rem;
}

@media (max-width: 959px) {
  .my-card__body {
    padding: 1rem 3rem 2rem;
  }
}

.my-card__body table {
  width: 100%;
  font-size: 2rem;
  border-spacing: 0 1rem;
  margin-bottom: 2rem;
}

.my-card__body table th {
  text-align: start;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .my-card__body table td,
  .my-card__body table th {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    display: block;
  }
}

.my-card__center {
  text-align: center;
}

.my-card__button {
  background-color: #00cc99;
  border-style: none;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 2rem;
  font-size: 2rem;
  color: white;
}

.my-card input {
  width: 100%;
  font-size: 2rem;
}

.setting__inputBtn {
  margin-top: 10px;
  font-size: 0;
}

.setting__inputBtn input {
  width: calc(100% - 150px);
  height: 4rem;
  font-size: 2rem;
  background-color: var(--background_color);
  color: var(--background_text);
  border: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
}

.setting__inputBtn input::-moz-placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.setting__inputBtn input::placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.setting__inputBtn button {
  font-size: 2rem;
  height: 4rem;
  width: 150px;
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 3px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 3px;
  margin: 0;
}

.setting__warning {
  font-size: 2rem;
  color: red;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.setting-qc__cell,
.setting-qc__cell--fixed,
.setting-qc__cell--heading {
  border-bottom: 1px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-right: 1px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  background-color: var(--background_color);
}

.setting-qc__cell--heading {
  background-color: var(--primary_color);
  color: var(--primary_text);
}

.setting-qc__cell--fixed {
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
}

.setting-qc__input {
  border-width: 0px;
  width: 100%;
  height: 30px;
  background-color: var(--background_color);
  color: var(--background_text);
  font-family: "Kosugi Maru", sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
  font-size: 20px;
  font-weight: normal;
  padding: 6px;
}

.setting-qc ul {
  display: flex;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 20px;
  margin-top: 1rem;
}

.setting-qc ul li {
  padding-top: 3px;
  padding-right: 14px;
  padding-left: 14px;
  border-left: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-top: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.setting-qc ul li:last-child {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.setting-qc ul .ui-state-active {
  background-color: var(--primary_color);
  color: var(--primary_text);
}

.setting-qc ul .ui-state-active a {
  color: var(--primary_text);
}

.setting-qc ul a {
  text-decoration: none;
  color: var(--background_text);
}

.main-content {
  float: left;
  width: 100%;
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.main-content__container:not(:last-child) {
  margin-bottom: 32px;
}

.main-content__heading {
  font-size: 32px;
}

.main-content__labeled,
.main-content__labeled > input,
.main-content__labeled > label > input,
.main-content__labeled > input > label,
.main-content__labeled > label > input > label,
.main-content__labeled > input > input,
.main-content__labeled > label > input > input,
.main-content__labeled > input > label > input,
.main-content__labeled > label,
.main-content__labeled > input > label > label,
.main-content__labeled > input > input > label {
  font-size: 32px;
}

.main-content__labeled > label,
.main-content__labeled > input > label,
.main-content__labeled > label > input > label,
.main-content__labeled > input > label > label,
.main-content__labeled > input > input > label,
.main-content__labeled > label > label,
.main-content__labeled > input > label > label > label,
.main-content__labeled > input > input > label > label {
  width: 400px;
  display: block;
  float: left;
}

.main-content__labeled > input,
.main-content__labeled > input > input,
.main-content__labeled > label > input > input,
.main-content__labeled > input > label > input,
.main-content__labeled > input > input > input,
.main-content__labeled > label > input,
.main-content__labeled > input > label > label > input,
.main-content__labeled > input > input > label > input {
  width: calc(95% - 400px);
  border-color: var(--primary_color);
  border-style: solid;
  border-width: 3px;
}

.main-content__labeled > span,
.main-content__labeled > label > span,
.main-content__labeled > input > span,
.main-content__labeled > label > input > span,
.main-content__labeled > input > label > span,
.main-content__labeled > input > input > span {
  width: calc(95% - 400px);
  display: flex;
}

.main-content__labeled > select,
.main-content__labeled > label > select,
.main-content__labeled > input > select,
.main-content__labeled > label > input > select,
.main-content__labeled > input > label > select,
.main-content__labeled > input > input > select {
  width: calc(95% - 400px);
  border-color: var(--primary_color);
  border-style: solid;
  border-width: 3px;
  font-size: 32px;
}

.main-content__labeled input[type=checkbox] {
  width: 40px;
  height: 34px;
  vertical-align: middle;
}

.disabled,
.webmenu__content .webuke-answers__button:not(:disabled):hover:disabled,
.webmenu__content .webuke-answers__button:disabled,
.menu__button:disabled,
.uke-answers__button:disabled,
.uke-biko__button:disabled,
.uke-answers__button-4:disabled,
.uke-answers__button-6:disabled {
  color: #848484;
  background-color: #dcdcdc;
  border-color: #cccccc;
  text-shadow: 1px 1px 0px #eaeaea;
}

.uke-answers__button,
.uke-biko__button,
.uke-answers__button-4,
.uke-answers__button-6 {
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 0px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 9999px;
  border-bottom: 10px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  height: 20%;
  margin-top: 15px;
  box-sizing: border-box;
  vertical-align: middle;
  padding: 1rem 0.2rem;
  font-size: 2.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 959px) {
  .uke-answers__button,
  .uke-biko__button,
  .uke-answers__button-4,
  .uke-answers__button-6 {
    font-size: 1.6rem;
  }
}

.uke-answers__button-6 {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
}

@media (max-width: 559px) {
  .uke-answers__button-6 {
    width: 98%;
    height: auto;
  }
}

.uke-answers__button-6 > label {
  display: block;
  font-size: 4.2rem;
}

@media (max-width: 559px) {
  .uke-answers__button-6 > label {
    font-size: 2rem;
  }
}

.uke-answers__button-6 > label:nth-child(2) {
  display: block;
  font-size: 2.8rem;
}

@media (max-width: 559px) {
  .uke-answers__button-6 > label:nth-child(2) {
    font-size: 1.6rem;
  }
}

.uke-answers__button-4 {
  width: 31%;
  margin-left: 1%;
  margin-right: 1%;
}

@media (max-width: 559px) {
  .uke-answers__button-4 {
    width: 98%;
    height: auto;
  }
}

.uke-answers__button-4 > label {
  display: block;
  font-size: 4.2rem;
}

@media (max-width: 559px) {
  .uke-answers__button-4 > label {
    font-size: 2.4rem;
  }
}

.uke-answers__button-4 > label:nth-child(2) {
  display: block;
  font-size: 2.8rem;
}

@media (max-width: 559px) {
  .uke-answers__button-4 > label:nth-child(2) {
    font-size: 2rem;
  }
}

.uke-answers__element--accent {
  color: #cc3300;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  margin-top: 30px;
}

@media (max-width: 559px) {
  .menu {
    flex-direction: column;
  }
}

.menu__button {
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 0px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 9999px;
  border-bottom: 10px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  box-sizing: border-box;
  vertical-align: middle;
  padding: 3.2rem 0.2rem;
  width: 100%;
  margin: 2rem 2.5%;
}

.menu__button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(10px);
}

.menu__label,
.menu__label--accent {
  font-size: 3.6rem;
}

@media (max-width: 959px) {
  .menu__label,
  .menu__label--accent {
    font-size: 2rem;
  }
}

.menu__label--sizeharf {
  font-size: 1.8rem;
}

@media (max-width: 959px) {
  .menu__label--sizeharf {
    font-size: 1.6rem;
  }
}

.menu__label--sizemain {
  font-size: 8.1rem;
}

@media (max-width: 959px) {
  .menu__label--sizemain {
    font-size: 1.6rem;
  }
}

.menu__label--accent {
  color: #cc3300;
  font-weight: bold;
  font-size: 2rem;
}

@media (max-width: 959px) {
  .menu__label--accent {
    font-size: 1.6rem;
  }
}

.language-list {
  display: flex;
  list-style-type: none;
  justify-content: center;
  padding-left: 0;
  width: 100%;
  padding-bottom: 3rem;
}

.language-list__item,
.language-list__item--disable {
  padding-left: 1rem;
  padding-right: 1rem;
}

.language-list__item a,
.language-list__item--disable a {
  text-decoration: none;
  color: #04aeda;
}

.language-list__item:not(:last-child),
.language-list__item--disable:not(:last-child) {
  border-right: 1px solid var(--primary_color);
}

.language-list__item--disable {
  pointer-events: none;
  font-weight: bold;
}

.language-list__item--disable:not(:last-child) {
  border-right: 1px solid var(--primary_color);
}

.language-list__item--disable a {
  text-decoration: none;
  color: #666666;
}

.ZebraDialog {
  font-size: 32px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  background-color: var(--background_color);
  border-width: 7px;
}

.ZebraDialog .ZebraDialog_Title {
  background-color: var(--primary_color);
  border-bottom: 1px var(--primary_color) solid;
  font-size: 20px;
  color: var(--primary_text);
}

.ZebraDialog .ZebraDialog_Body {
  font-size: 20px;
  color: var(--background_text);
}

.ZebraDialog .ZebraDialog_Body input {
  font-size: 20px;
}

.ZebraDialog .ZebraDialog_Buttons a {
  background-color: var(--primary_color);
  font-size: 20px;
  color: var(--primary_text);
}

.ZebraDialog .ZebraDialog_Close {
  color: var(--primary_text);
}

@media (max-width: 559px) {
  .ZebraDialog {
    top: 400px;
  }
}

.modal {
  font-size: 1.8rem;
}

.modal__container,
.modal__container--between,
.modal__container--end {
  display: flex;
  margin-bottom: 0.8rem;
}

.modal__container--end {
  justify-content: flex-end;
}

.modal__container--between {
  justify-content: space-between;
}

.modal input {
  font-size: 1.8rem;
}

.modal__button,
.modal__button--secondary,
.modal__button--primary {
  border-style: solid;
  border-color: var(--primary_color);
  border-width: 2px;
  border-radius: 2px;
  font-size: 1.8rem;
}

.modal__button--primary {
  background-color: var(--primary_color);
  color: var(--primary_text);
}

.modal__button--secondary {
  background-color: white;
}

.modal__header {
  background-color: var(--primary_color);
  color: var(--primary_text);
  border-bottom: 2px color-mix(in hsl, var(--background_color) 80%, black 20%) solid !important;
}

.modal__footer {
  border-top: 2px color-mix(in hsl, var(--background_color) 80%, black 20%) solid !important;
}

.page {
  margin: 0;
  display: flex;
  flex-direction: row;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 600px;
  box-sizing: border-box;
}

@media (max-width: 559px) {
  .page {
    flex-direction: column-reverse;
    min-height: unset;
  }
}

.page__navi {
  width: 120px;
  background-color: var(--primary_color);
  height: 100%;
  padding: 1.6rem 0.8rem;
  box-sizing: border-box;
  font-size: 17px;
  color: var(--primary_text);
  display: flex;
  flex-direction: column;
  z-index: 999;
}

@media (max-width: 559px) {
  .page__navi {
    padding: 1rem;
    width: 100%;
    height: 100px;
  }
}

.page__navi > div {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 6px;
  margin-right: 3px;
}

@media (max-width: 559px) {
  .page__navi > div {
    flex-direction: row;
    justify-content: space-around;
  }
}

.page__navi > div:first-child {
  flex: 1;
}

.page__navi > div:first-child > label {
  display: block;
  margin-bottom: 10px;
}

.page__navi > div .bi {
  font-size: 65px;
  color: var(--primary_text);
}

.page__navi > div .bi:hover {
  cursor: pointer;
}

.page__navi > div .bi.bi-arrow-left-circle {
  font-size: 60px;
}

.page__navi > div .bi.bi-floppy {
  font-size: 55px;
}

.page__navi > div .bi.bi-search {
  font-size: 55px;
}

.page__navi > div .bi.bi-plus-circle {
  font-size: 60px;
}

.page__navi > div .bi.bi-info-circle {
  font-size: 60px;
}

.page__navi > div .bi.bi-chat-dots {
  font-size: 55px;
}

.page__navi > div .bi.bi-file-earmark {
  font-size: 55px;
}

.page__navi > div span {
  font-weight: bold;
}

.page__navi > div input {
  margin: 0 auto;
  width: 70%;
  height: auto;
  display: block;
}

@media (orientation: portrait) and (max-width: 559px) {
  .page__navi > div input {
    height: calc(100px - 4rem);
    width: auto;
  }
}

@media (orientation: landscape) and (max-width: 559px) {
  .page__navi > div input {
    height: calc(100% - 2rem);
    width: auto;
  }
}

.page__navi > div img {
  margin: 0 auto;
  width: 80%;
  height: auto;
  display: block;
}

@media (max-width: 559px) {
  .page__navi > div img {
    height: calc(100% - 2rem);
    width: auto;
    display: none;
  }
}

@media (max-width: 959px) {
  .page__navi--tab-dnone {
    display: none;
  }
}

.page__main {
  flex: 1;
  padding: 1rem;
  box-sizing: border-box;
  overflow: auto;
}

@media (max-width: 559px) {
  .page__main {
    width: 100%;
    height: auto;
  }
}

.navi {
  top: 0;
  left: 0;
  position: fixed;
  width: 120px;
  height: 100%;
  background-color: var(--primary_color);
  z-index: 2;
}

.navi__lists {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  padding-top: 10px;
}

.navi__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
}

.navi__list input {
  width: 70px;
  margin-bottom: 2px;
  margin-left: auto;
  margin-right: auto;
}

.navi__list label {
  color: #04AEDA;
  font-size: 1.6rem;
}

.navi__logo {
  padding: 24px;
  position: absolute;
  bottom: 0px;
}

.navi__logo img {
  max-width: 100%;
  height: auto;
}

form {
  margin: 0;
}

.myturn-ukeno {
  margin: 5.2rem 0;
  font-size: 5.2rem;
  font-weight: bold;
}

@media (max-width: 959px) {
  .myturn-ukeno {
    margin: 4rem 0;
    font-size: 4rem;
    text-align: center;
  }
}

.myturn-ukeno__no {
  font-size: 2.6rem;
}

@media (max-width: 959px) {
  .myturn-ukeno__no {
    font-size: 2rem;
  }
}

.content-s {
  font-size: 2rem;
}

@media (max-width: 959px) {
  .content-s {
    font-size: 1.4rem;
  }
}

.content-s__flexbox {
  display: flex;
  flex-direction: column;
}

.content-s__flexbox > * {
  margin-bottom: 1rem;
}

@media (max-width: 959px) {
  .content-s__flexbox > * {
    margin-bottom: 0.7rem;
  }
}

.content-s__LINE-ICON {
  height: 49px;
}

@media (max-width: 959px) {
  .content-s__LINE-ICON {
    height: 36px;
  }
}

.content-s__button,
.content-s__button-wauto {
  background-color: var(--primary_color);
  border: color-mix(in hsl, var(--primary_color) 90%, black 10%) solid 3px;
  border-radius: 3px;
  font-size: 2rem;
  color: white;
  padding: 1rem 4rem;
  width: 157.88px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 959px) {
  .content-s__button,
  .content-s__button-wauto {
    font-size: 1.4rem;
    padding: 0.7rem 2.8rem;
    width: 116px;
  }
}

.content-s__button-wauto {
  width: -moz-fit-content;
  width: fit-content;
}

.content {
  box-sizing: border-box;
}

@media (max-width: 959px) {
  .content {
    font-size: 1.8rem;
  }
}

.content__title,
.analysis__title {
  /*border-bottom-color: $primaryColor;
  border-bottom-width: 5px;
  border-bottom-style: solid;*/
  display: flex;
  justify-content: space-between;
  font-size: 2.6rem;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .content__title,
  .analysis__title {
    flex-direction: column-reverse;
    font-size: 1.8rem;
  }
}

@media (max-width: 959px) {
  .content__title,
  .analysis__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 559px) {
  .content__title > label,
  .analysis__title > label {
    text-align: right;
  }
}

.content__table th {
  color: var(--background_text);
}

.content__table input,
.content__table select {
  background-color: var(--background_color);
  color: var(--background_text);
}

.content__table input::-moz-placeholder, .content__table select::-moz-placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.content__table input::placeholder,
.content__table select::placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.content__midashi,
.analysis__midashi {
  border-bottom: solid var(--primary_color) 3.9rem;
  border-right: solid transparent 3.9rem;
  height: 0;
}

@media (max-width: 959px) {
  .content__midashi,
  .analysis__midashi {
    border-bottom: solid var(--primary_color) 2.7rem;
    border-right: solid transparent 2.7rem;
  }
}

.content__midashi label,
.analysis__midashi label {
  color: var(--primary_text);
  text-align: left;
  padding-left: 2.6rem;
  padding-right: 7.8rem;
}

@media (max-width: 959px) {
  .content__midashi label,
  .analysis__midashi label {
    padding-left: 1.8rem;
    padding-right: 5.4rem;
  }
}

.content__sentence {
  color: var(--background_text);
  font-size: 4.2rem;
}

@media (max-width: 959px) {
  .content__sentence {
    font-size: 2rem;
  }
}

.content > *:not(:last-child) {
  margin-bottom: 20px;
}

.content table {
  width: 100%;
  font-size: 2.6rem;
  text-align: left;
}

@media (max-width: 959px) {
  .content table {
    font-size: 1.8rem;
  }
}

.content table tr {
  width: 100%;
}

.content table tr > td,
.content table tr th {
  padding-bottom: 20px;
}

@media (max-width: 559px) {
  .content table tr > td,
  .content table tr th {
    display: block;
  }
}

.content table tr > td > input,
.content table tr > td select,
.content table tr th > input,
.content table tr th select {
  width: 100%;
  font-size: 2.6rem;
  border: var(--primary_color) solid 3px;
  padding: 3px;
}

@media (max-width: 959px) {
  .content table tr > td > input,
  .content table tr > td select,
  .content table tr th > input,
  .content table tr th select {
    font-size: 1.8rem;
  }
}

.content__buttons-layout {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 559px) {
  .content__buttons-layout {
    flex-direction: column;
  }
}

.content__buttons-layout > button:not(:last-child) {
  margin-right: 2.6rem;
}

@media (max-width: 559px) {
  .content__buttons-layout > button:not(:last-child) {
    margin-right: 0;
    margin-bottom: 2rem;
  }
}

.content__button,
.annsearch__button {
  background-color: var(--primary_color);
  border: color-mix(in hsl, var(--primary_color) 90%, black 10%) solid 3px;
  border-radius: 3px;
  font-size: 2.6rem;
  color: var(--primary_text);
  padding: 1.3rem 5.2rem;
}

@media (max-width: 959px) {
  .content__button,
  .annsearch__button {
    font-size: 1.8rem;
    padding: 0.9rem 3.6rem;
  }
}

.submanu {
  padding: 0.5rem;
  position: fixed;
  top: 0;
  left: 120px;
  width: 200px;
  height: 100%;
  background-color: #dddddd;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.title {
  position: relative;
}

.title__container--left {
  height: 0;
  width: 300px;
  border-bottom: 36px solid var(--primary_color);
  border-right: 32px solid transparent;
}

.title__container--left label {
  color: #FFFFFF;
  font-size: 20px;
  float: left;
  padding-top: 8px;
  padding-left: 10px;
  margin-bottom: 0px;
}

.title hr {
  margin-top: -5px;
  margin-bottom: 0px;
  height: 5px;
  background-color: var(--primary_color);
  border: none;
}

.kpi {
  height: 100px;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

.kpi__per {
  font-size: 1.2rem;
  color: red;
}

.kpi__data {
  font-size: 2.4rem;
  font-weight: bold;
}

.kpi__detail {
  font-size: 1.2rem;
}

/* ネット受付表示エリア */

.web-body {
  background-size: auto auto;
  background-color: var(--background_color);
  margin: 20px;
}

@media (max-width: 559px) {
  .web-body {
    margin-bottom: 80px;
  }
}

.web-page {
  margin: 0;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

@media (max-width: 559px) {
  .web-page {
    flex-direction: column-reverse;
  }
}

.webnavi {
  /* body要素のmargin削除 */
  position: fixed;
  /* 追従 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 999;
  /* 重ね順を一番上へ */
  height: 100%;
  padding: 3rem;
  /* 戻る・再表示ボタン */
  /* JEロゴ */
}

@media (max-width: 559px) {
  .webnavi {
    position: fixed;
    padding: 0;
    flex-direction: row;
    height: unset;
    width: 100vw;
    left: 0px;
    bottom: 0px;
    /* バナーの下の位置に配置 */
    display: flex;
    justify-content: space-around;
    /*子アイテムを均等配置*/
  }
}

.webnavi__btn {
  text-align: center;
  background: var(--primary_color);
  color: var(--primary_text);
  font-size: 1.4rem;
  border: none;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  overflow: hidden;
  /*はみ出た部分を隠す*/
  box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.2);
  transition-duration: 0.3s;
  cursor: pointer;
}

.webnavi__btn:not(:first-child) {
  margin-top: 20px;
}

@media (max-width: 559px) {
  .webnavi__btn:not(:first-child) {
    margin-top: 0px;
  }
}

.webnavi__btn:hover {
  background: var(--background_color);
  color: var(--primary_color);
}

.webnavi__btn i {
  font-size: 46px;
  width: auto;
  margin-bottom: 2px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 559px) {
  .webnavi__btn i {
    font-size: 20px;
  }
}

@media (max-width: 559px) {
  .webnavi__btn {
    background: var(--primary_color);
    border: 1px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
    font-size: 1.2rem;
    box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    border-radius: 0;
    height: 60px;
  }
}

/* webmenuカードデザイン */

.webmenu {
  font-family: 游ゴシック体, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: var(--background_color);
  width: 70vw;
  max-width: 768px;
  margin: 20 auto;
  /* Myturnロゴ表示エリア */
  /* ショップ名表示 */
}

@media (max-width: 559px) {
  .webmenu {
    margin: 0;
    width: 100%;
  }
}

.webmenu__header {
  text-align: center;
  padding: 3rem 0;
  margin-top: 3rem;
  margin-bottom: 2rem;
  width: 100%;
  height: 4rem;
}

@media (max-width: 559px) {
  .webmenu__header {
    font-size: 2rem;
    padding: 3.5rem 0;
  }
}

.webmenu__title {
  text-align: center;
  margin-bottom: 1.25rem;
}

.webmenu__title label {
  font-size: 2.8rem;
  padding: 5rem 0;
  padding-right: 0.25rem;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .webmenu__title label {
    font-size: 2.2rem;
  }
}

.webmenu__content {
  text-align: center;
  padding: 2rem 3rem 4rem;
  /* 現在の日時・受付設問の表示 */
  /* 中央寄せ本文 */
  /* 左寄せ本文 */
  /* 中央寄せエラーメッセージ */
  /* 現在の待ち組数・受付番号 */
  /* No. */
  /* 中央寄せボタン：緑 */
  /* 受付内容の回答ボタン：白 */
  /* 入力フォーム */
}

@media (max-width: 559px) {
  .webmenu__content {
    flex-direction: column-reverse;
    min-height: unset;
  }
}

.webmenu__content .sub-title {
  font-size: 2.2rem;
  padding: 5rem 0;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .webmenu__content .sub-title {
    font-size: 2rem;
  }
}

.webmenu__content .contents-text {
  font-size: 2rem;
  padding: 3rem 0;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .webmenu__content .contents-text {
    font-size: 1.8rem;
  }
}

.webmenu__content .contents-text-left {
  margin: auto;
  width: 80%;
  font-size: 2rem;
  padding: 1rem 0;
  color: var(--background_text);
  opacity: 0.5;
  text-align: left;
}

@media (max-width: 559px) {
  .webmenu__content .contents-text-left {
    width: 100%;
    font-size: 1.8rem;
  }
}

.webmenu__content .contents-errortext {
  font-size: 2rem;
  color: #ff0000;
  text-align: center;
}

@media (max-width: 559px) {
  .webmenu__content .contents-errortext {
    font-size: 1.6rem;
  }
}

.webmenu__content .numbers {
  font-size: 8rem;
  padding: 5rem 0;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .webmenu__content .numbers {
    font-size: 6rem;
    padding: 3rem 0;
  }
}

.webmenu__content__ukeno {
  font-size: 2.6rem;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .webmenu__content__ukeno {
    font-size: 2rem;
  }
}

.webmenu__content .webukebtn {
  max-width: 360px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  position: relative;
  background: var(--primary_color);
  border: 1px solid var(--primary_color);
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: var(--primary_text);
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

.webmenu__content .webukebtn:before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--primary_text);
  border-right: 2px solid var(--primary_text);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
  pointer-events: none;
  transition-duration: 0.3s;
}

.webmenu__content .webukebtn:hover {
  background: var(--background_color);
  color: var(--primary_color);
  cursor: pointer;
}

.webmenu__content .webukebtn:hover:before {
  border-color: var(--primary_color);
}

.webmenu__content .webukebtn:disabled {
  background: #b0b0b0;
  border-color: #b0b0b0;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.7;
}

.webmenu__content .webukebtn:disabled:before {
  border-color: #fff;
}

.webmenu__content .webuke-answers__button {
  max-width: 360px;
  max-height: 80px;
  min-height: 60px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  position: relative;
  background: var(--primary_color);
  border: 1px solid var(--primary_color);
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  cursor: pointer;
  /* 待ち状況表示 */
}

.webmenu__content .webuke-answers__button:disabled {
  cursor: auto;
}

.webmenu__content .webuke-answers__button:before {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid var(--primary_text);
  border-right: 2px solid var(--primary_text);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
  transition-duration: 0.3s;
}

.webmenu__content .webuke-answers__button:not(:disabled):hover {
  background: var(--background_color);
}

.webmenu__content .webuke-answers__button:not(:disabled):hover > label {
  padding: 0 0 0 15px;
  display: block;
  color: var(--primary_color);
  transition-duration: 0.3s;
  cursor: pointer;
}

.webmenu__content .webuke-answers__button:not(:disabled):hover > span {
  color: var(--primary_color);
  transition-duration: 0.3s;
  cursor: pointer;
}

.webmenu__content .webuke-answers__button:not(:disabled):hover:before {
  border-top: 2px solid var(--primary_color);
  border-right: 2px solid var(--primary_color);
}

.webmenu__content .webuke-answers__button > label {
  padding: 0 0 0 15px;
  display: block;
  font-size: 1.8rem;
  color: var(--primary_text);
}

.webmenu__content .webuke-answers__button > span {
  padding: 0 0 0 15px;
  font-size: 1.6rem;
  color: var(--primary_text);
}

.webmenu__content .webuke-answers__button__element--accent {
  color: #cc3300;
}

.webmenu__content .biko__input {
  margin: 20px 0 30px 0;
  height: 360px;
  width: 450px;
  background-color: var(--background_color);
  border: 2px color-mix(in srgb, var(--background_text) 20%, transparent 80%) solid;
  border-radius: 6px;
  padding: 10px;
  color: var(--background_text);
  font-size: 1.6rem;
  transition: all 0.6s ease;
}

.webmenu__content .biko__input::-moz-placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.webmenu__content .biko__input::placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.webmenu__content .biko__input:focus {
  outline: 0;
  border: 2px solid var(--primary_color);
}

@media (max-width: 559px) {
  .webmenu__content .biko__input {
    width: 100%;
    height: 280px;
    font-size: 1.6rem;
  }
}

.webmenu__content .contactform {
  width: 80%;
  text-align: center;
  margin: 30px auto;
  margin-bottom: 30px;
  position: relative;
}

@media (max-width: 559px) {
  .webmenu__content .contactform {
    width: 100%;
    text-align: left;
  }
}

.webmenu__content .contactform > input,
.webmenu__content .contactform select {
  font-family: 游ゴシック体, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0 0 30px 0;
  width: 80%;
  transition: all 0.6s ease;
  background-color: var(--background_color);
  border-bottom: 2px solid color-mix(in srgb, var(--background_text) 40%, transparent 60%);
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 0px;
  font-size: 2.2rem;
  color: var(--background_text);
  padding: 0 0 0 10px;
}

.webmenu__content .contactform > input::-moz-placeholder, .webmenu__content .contactform select::-moz-placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.webmenu__content .contactform > input::placeholder,
.webmenu__content .contactform select::placeholder {
  color: var(--background_text);
  opacity: 0.5;
}

.webmenu__content .contactform > input:focus,
.webmenu__content .contactform select:focus {
  outline: 0;
  border-bottom: 2px solid var(--primary_color);
}

@media (max-width: 559px) {
  .webmenu__content .contactform > input,
  .webmenu__content .contactform select {
    width: 100%;
    font-size: 1.8rem;
  }
}

/* WEB受付の言語選択 */

.language-choice {
  display: flex;
  list-style-type: none;
  justify-content: center;
  padding-left: 0;
  width: 100%;
  padding-bottom: 3rem;
  font-weight: 600;
  font-size: 1.6rem;
}

.language-choice__item,
.language-choice__item--disable {
  padding-left: 1rem;
  padding-right: 1rem;
}

.language-choice__item a,
.language-choice__item--disable a {
  text-decoration: none;
  color: #04aeda;
}

.language-choice__item:not(:last-child),
.language-choice__item--disable:not(:last-child) {
  border-right: 1px solid var(--background_text);
}

.language-choice__item--disable {
  pointer-events: none;
  font-weight: bold;
}

.language-choice__item--disable:not(:last-child) {
  border-right: 1px solid var(--background_text);
}

.language-choice__item--disable a {
  text-decoration: none;
  color: var(--background_text);
}

.analysis {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.analysis__title {
  margin-bottom: 1rem;
}

.analysis__content {
  flex: 1;
  display: flex;
}

.analysis__content > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 99%;
}

.analysis__content > div:first-child > div {
  display: flex;
  padding: 0 0.8rem;
}

.analysis__content > div:first-child > div:not(:last-child) {
  padding-bottom: 0.8rem;
}

.analysis__content > div:first-child > div:nth-child(3),
.analysis__content > div:first-child > div:nth-child(4) {
  flex: 1;
}

.analysis__content > div:first-child > div:nth-child(3) > div,
.analysis__content > div:first-child > div:nth-child(4) > div {
  width: 49%;
  flex: 0 0 auto;
}

.analysis__card {
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: var(--background_color);
  color: var(--background_text) !important;
  margin-right: 1rem;
}

.analysis__dropdown {
  background-color: var(--background_color);
  color: var(--background_text);
  border: 1px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  font-size: 1.6rem;
  padding: 2px;
}

#annranking {
  border: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-spacing: 0px;
}

#annranking th {
  background-color: var(--primary_color);
  color: var(--background_text);
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

#annranking th:not(:last-child) {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

#annranking td {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%);
  color: var(--background_text);
}

#annranking td:last-child {
  text-align: right;
}

#annranking td:not(:last-child) {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.setting-ann-tbl {
  width: 100%;
  font-weight: normal;
  table-layout: fixed;
  border-spacing: 0;
  border-top: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-left: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.setting-ann-tbl__header {
  line-height: 30px;
  background-color: var(--primary_color);
  color: var(--primary_text);
  font-size: 20px;
  font-weight: normal;
  text-align: left;
}

.setting-ann-tbl__header th {
  font-weight: normal;
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.setting-ann-tbl__body {
  line-height: 30px;
  color: #000000;
  font-size: 20px;
  font-weight: normal;
}

.setting-ann-tbl__body th {
  background-color: var(--primary_color);
  color: var(--primary_text);
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  font-size: 18px;
  text-align: left;
  font-weight: normal;
}

.setting-ann-tbl__body td {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  background-color: var(--background_color);
}

.setting-ann-tbl__body td > input {
  width: 100%;
  background-color: var(--background_color);
  color: var(--background_text);
  border-width: 0px;
  font-size: 20px;
  padding: 6px;
}

.setting-ann-tbl__body tr:hover {
  background-color: #e5e5e5;
  /* 行の背景色 */
}

#annlst {
  background-color: var(--background_color) !important;
}

.annlst {
  height: 100%;
  width: 100%;
  border: 3px var(--primary_color) solid;
  overflow: auto;
}

.annlst__table {
  width: 100%;
  font-weight: normal;
  table-layout: fixed;
  border-spacing: 0;
}

.annlst__header {
  background-color: var(--primary_color);
  color: var(--primary_text);
  font-size: 16px;
  text-align: left;
}

.annlst__header th {
  font-weight: normal;
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.annlst__header th:not(:nth-last-child(2)) {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.annlst__rows {
  font-size: 16px;
  color: var(--background_text);
}

.annlst__rows tr td {
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.annlst__rows tr td:not(:nth-last-child(2)) {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.annlst__rows tr td div {
  word-break: break-all;
  max-height: 9rem;
  overflow: hidden;
}

.annlst__rows tr td:first-child {
  font-weight: bold;
}

.annlst__rows tr:hover {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%);
}

.annlst__badge {
  background-color: #CCC100;
  margin: 2px;
  text-align: center;
  color: white;
  border-color: #CCC100;
  border-radius: 0.5rem;
}

.annlst__button {
  font-size: 17px;
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 2px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 4px;
  padding: 6px 6px;
  margin: 2px 4px;
}

.annlst__button:not(:disabled):hover {
  background-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
}

.annlst__button:disabled {
  color: #848484;
  text-shadow: 1px 1px 0px #eaeaea;
  background: #dcdcdc;
  border-color: #cccccc;
}

.input_wrapper {
  position: relative;
  color: var(--background_text);
}

.input_wrapper::after {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  content: "";
  font-size: 16px;
  font-weight: 500;
  font-family: bootstrap-icons !important;
  pointer-events: none !important;
}

/* 最終更新時間の表示 */

.UpdateTime {
  color: var(--background_text);
  font-family: メイリオ, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 18px;
  float: right;
  padding-top: 8px;
  padding-right: 10px;
}

/* 自動更新ON/OFFボタン */

.header_switchArea {
  float: right;
  padding-right: 12px;
  margin-top: -4px;
  color: var(--background_text);
}

/* ON/OFFボタンを表示するエリア */

.switchArea {
  line-height: 34px;
  letter-spacing: 0;
  text-align: center;
  font-size: 14px;
  position: relative;
  margin: auto;
  width: 130px;
  background: var(--background_color);
  /* チェックボックス */
  /* チェックボックスのラベル（標準）*/
  /* チェックボックスのラベル（ONのとき）*/
  /* 表示する文字（標準）*/
  /* 表示する文字（ONのとき）*/
  /* 丸部分のSTYLE（標準）*/
  /* 丸部分のSTYLE（ONのとき）*/
}

.switchArea input[type=checkbox] {
  display: none;
}

.switchArea label {
  display: block;
  box-sizing: border-box;
  height: 34px;
  border: 3px solid var(--primary_color);
  border-radius: 17px;
}

.switchArea input[type=checkbox]:checked + label {
  border-color: var(--primary_color);
}

.switchArea label span:after {
  content: "自動更新OFF";
  padding: 0 0 0 20px;
  color: #999999;
}

.switchArea input[type=checkbox]:checked + label span:after {
  content: "自動更新ON";
  padding: 0 20px 0 0;
  color: var(--background_text);
}

.switchArea #swImg {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--primary_color);
  top: 6px;
  left: 6px;
  border-radius: 13px;
  transition: 0.2s;
}

.switchArea input[type=checkbox]:checked ~ #swImg {
  transform: translateX(96px);
  background: var(--primary_color);
}

.annsearch {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  border-style: solid;
  border-width: 4px;
  border-color: var(--primary_color);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.annsearch__wrapper {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.annsearch__button {
  padding: 0.6rem 2.6rem;
  margin-left: 1rem;
  flex-shrink: 0;
}

@media (max-width: 559px) {
  .annsearch__button {
    align-self: flex-end;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

.annsearch .input_wrapper {
  width: 200px;
  margin-right: 1rem;
  flex-shrink: 0;
}

@media (max-width: 959px) {
  .annsearch .input_wrapper {
    width: 45%;
    max-width: 45%;
    margin-bottom: 1rem;
    flex-shrink: 1;
  }
}

@media (max-width: 559px) {
  .annsearch .input_wrapper {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
}

.annsearch__multiselect,
.annsearch__input {
  min-height: 3.2rem !important;
  min-width: 120px !important;
  background-color: var(--background_color) !important;
  background: var(--background_color) !important;
  color: var(--background_text) !important;
  border-color: var(--primary_color) !important;
  border-style: solid !important;
  border-width: 2px !important;
  font-size: 2rem !important;
  padding: 2px !important;
  margin-right: 1rem !important;
}

.annsearch__multiselect > span,
.annsearch__input > span {
  display: inline-block !important;
  width: 70% !important;
}

@media (max-width: 959px) {
  .annsearch__multiselect {
    width: 45% !important;
    max-width: 45% !important;
    margin-bottom: 1rem !important;
  }
}

@media (max-width: 559px) {
  .annsearch__multiselect {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

.annsearch__input {
  width: 100% !important;
  padding-right: 36px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 559px) {
  .annsearch {
    flex-direction: column;
    align-items: stretch;
  }
}

.ui-multiselect span.ui-icon {
  display: none !important;
}

.ui-datepicker th {
  color: var(--background_text);
}

.ui-widget-header .ui-icon {
  display: none !important;
}

.ui-datepicker td a {
  color: var(--background_text) !important;
  background: var(--background_color) !important;
  border: 1px var(--primary_color) solid !important;
}

.ui-datepicker td a.ui-state-hover {
  background: var(--primary_color) !important;
  color: var(--primary_text) !important;
}

.ui-datepicker td a.ui-state-active {
  background: var(--primary_color) !important;
  color: var(--primary_text) !important;
}

#txtUkeDt {
  position: relative !important;
  height: 100% !important;
  outline: none;
}

#txtUkeDt:hover {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
  cursor: pointer !important;
}

#txtUkeDt:focus {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

#ui-datepicker-div {
  border: 1px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid !important;
  background: var(--background_color) !important;
  color: var(--background_text) !important;
  width: 374px !important;
}

.ui-multiselect {
  position: relative !important;
}

.ui-multiselect.ui-state-hover {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

.ui-multiselect.ui-state-active {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

.ui-multiselect::after {
  position: absolute !important;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  content: "";
  font-size: 12px;
  font-weight: bold;
  font-family: bootstrap-icons !important;
}

.ui-multiselect-header {
  background: var(--primary_color) !important;
  border: none !important;
}

.ui-multiselect-header span {
  color: var(--primary_text) !important;
}

.ui-icon-triangle-1-s {
  display: none !important;
}

.ui-datepicker-prev {
  top: 4px !important;
  left: 4px !important;
}

.ui-datepicker-prev.ui-state-hover {
  cursor: pointer;
}

.ui-datepicker-next {
  top: 4px !important;
  right: 4px !important;
}

.ui-datepicker-next.ui-state-hover {
  cursor: pointer;
}

.ui-datepicker-next-hover,
.ui-datepicker-prev-hover {
  border: none !important;
  background: none !important;
}

.ui-datepicker .ui-datepicker-header::before {
  position: absolute;
  top: 16px;
  left: 12px;
  padding-right: 0.25rem !important;
  content: "" !important;
  transform: rotate(90deg);
  font-family: bootstrap-icons !important;
  color: var(--primary_text);
  font-size: 12px !important;
  pointer-events: none !important;
}

.ui-datepicker .ui-datepicker-header::after {
  position: absolute;
  top: 16px;
  right: 12px;
  content: "" !important;
  transform: rotate(-90deg);
  font-family: bootstrap-icons !important;
  color: var(--primary_text) !important;
  font-size: 12px !important;
  pointer-events: none !important;
}

.ui-datepicker-year {
  width: 35% !important;
  margin-right: 8px !important;
  background: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

.ui-datepicker-month {
  width: 35% !important;
  margin-left: 8px !important;
}

.ui-multiselect-checkboxes label.ui-state-hover {
  border: 1px var(--primary_color) solid !important;
  background: var(--primary_color) !important;
}

.ui-datepicker .ui-datepicker-title select {
  color: var(--background_text) !important;
  border: 1px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid !important;
  background-color: var(--background_color) !important;
}

.ui-datepicker-title .ui-datepicker-year:hover,
.ui-datepicker-title .ui-datepicker-month:hover {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

.ui-datepicker-title .ui-datepicker-year:focus,
.ui-datepicker-title .ui-datepicker-month:focus {
  background-color: color-mix(in hsl, var(--background_color) 80%, black 20%) !important;
}

.ui-datepicker-title .ui-datepicker-year option,
.ui-datepicker-title .ui-datepicker-month option {
  background-color: var(--background_color) !important;
}

.ui-datepicker-title .ui-datepicker-year option:hover,
.ui-datepicker-title .ui-datepicker-month option:hover {
  background-color: var(--background_color) !important;
}

.ui-datepicker .ui-datepicker-title {
  color: var(--primary_text) !important;
  margin: 0 !important;
  width: 100% !important;
}

.ui-datepicker .ui-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary_color) !important;
  background: var(--primary_color) !important;
  width: 100% !important;
}

.uke-biko {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.uke-biko__textarea {
  width: 100%;
  height: 40vh;
  font-size: 2rem;
  display: block;
  resize: none;
  border: 1px var(--primary_color) solid;
}

.uke-biko__button {
  height: auto;
  width: auto;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 2.6rem;
}

.modal-content {
  background-color: var(--background_color) !important;
}

.ukests-tbl {
  border-spacing: 0px;
  background-color: var(--background_color);
  border: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.ukests-tbl > tbody > tr:last-child > td {
  border-bottom: 0px;
}

.ukests-tbl__headercell {
  background-color: var(--primary_color);
  color: var(--primary_text);
  border-bottom: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
  border-collapse: collapse;
  font-weight: bold;
  text-align: center;
}

.ukests-tbl__headercell:not(:last-child) {
  border-right: 2px color-mix(in hsl, var(--primary_color) 90%, black 10%) solid;
}

.ukests-tbl__cell {
  color: var(--background_text);
  border-collapse: collapse;
  border-bottom: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  padding: 0.8rem;
}

.ukests-tbl__cell:not(:last-child) {
  border-right: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-bottom: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
}

.ukests-tbl__cell--first {
  border-collapse: collapse;
  background-color: var(--primary_color);
  border-right: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-bottom: 2px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  color: var(--primary_text);
}

.qr_card {
  display: flex;
  border: var(--primary_color) 2px solid;
  border-radius: 2px;
  min-height: 65vh;
}

@media (max-width: 559px) {
  .qr_card {
    flex-direction: column;
  }
}

.qr_card__img {
  background-color: var(--primary_color);
  flex-basis: 40%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qr_card__content {
  flex-basis: 60%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.qr_card__content > div {
  color: var(--background_text);
}

.qr_card__message--warn {
  text-align: center;
  color: var(--background_text);
}

@media (max-width: 559px) {
  .qr_card__message--warn {
    text-align: initial;
  }
}

/*2025/10/06～編集*/

.page__navi {
  width: 120px;
  background-color: var(--primary_color);
  height: 100%;
  padding: 1.6rem 0.8rem;
  box-sizing: border-box;
  font-size: 17px;
  color: var(--primary_text);
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.tab-wrap {
  width: 83vw;
  height: 0px;
  display: flex;
  flex-wrap: wrap;
  margin: 30px auto;
  justify-content: flex-start;
}

.tab-wrap::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--primary_color);
  display: block;
  order: -1;
}

.tab-label {
  width: 50px;
  color: var(--primary_text);
  background-color: var(--primary_color);
  white-space: nowrap;
  text-align: center;
  padding: 5px 2em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
  max-width: 20%;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-label:hover {
  background: #818382;
  transform: scale(1.05);
}

.tab-cont {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
  padding: 0 15px;
  box-sizing: border-box;
}

.tab-switch {
  display: none;
}

.tab-switch:checked + .tab-label {
  background: var(--primary_color);
}

.tab-switch:checked + .tab-label + .tab-cont {
  height: auto;
  opacity: 1;
  padding: 20px;
  overflow: visible;
  transition: 0.5s opacity;
  margin-top: 0%;
}

input[type=radio]:checked + .tab-label {
  background: #818382;
}

.content-container {
  width: 70vw;
  height: 400px;
  margin: 0% 9% 1% 5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
}

.right-side,
.left-side,
.right-side4,
.left-side4 {
  padding: 0;
  height: 400px;
  box-sizing: border-box;
  border: 2px solid #808080;
  border-radius: 5px;
}

.right-side {
  width: 48vw;
  padding: 0 0 3 0%;
}

.left-side {
  width: 44vw;
  border-radius: 2px;
}

.right-side4 {
  width: 51vw;
  padding: 0 0 3 0%;
}

.left-side4 {
  width: 50vw;
  border-radius: 2px;
}

.image-container {
  height: 20vw;
  width: 15vw;
  align-items: center;
}

.ukehyo-image {
  margin-right: 30vw;
  height: 30vw;
}

.confirm-btn-container {
  text-align: right;
  margin-top: 0px;
  background-color: white;
}

textarea {
  width: 100%;
  padding: 20 10 10 0px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.info-container,
.info-container4 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: var(--background_text);
  margin-bottom: 0%;
  margin-top: 5%;
  white-space: nowrap;
}

.info-container {
  margin-left: 39vw;
}

.info-container4 {
  margin-left: 43vw;
}

#updateTime,
#updateTime2,
#updateTime3,
#updateTime4 {
  margin-left: 40px;
}

#previewButton,
#previewButton2 {
  font-size: 18px;
  background-color: var(--primary_color);
  color: var(--primary_text);
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#previewButton:hover,
#previewButton:active,
#previewButton2:hover,
#previewButton2:active {
  background-color: #808080;
}

.left-side textarea,
.right-side textarea {
  height: 100%;
  padding: 10px;
  resize: none;
  margin-top: 0;
}

.left-side textarea {
  background-color: #e9e8e8;
}

#text {
  margin: 0.5em;
  overflow: visible;
  width: 35vw;
  resize: none;
}

#text2,
#text3,
#text4 {
  margin: 0.5em;
  overflow: visible;
  width: 97%;
  height: 85%;
  resize: none;
}

.tutibtn {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px;
  box-sizing: border-box;
  margin: 1% auto -5% 3.3vw;
  font-size: 17px;
  text-align: left;
  color: black;
  border-radius: 5px;
  cursor: pointer;
}

.custom-radio-btn {
  display: inline-block;
  white-space: nowrap;
  margin: 5px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  position: relative;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 20px;
  background-color: var(--primary_color);
  color: var(--primary_text);
  text-align: center;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.custom-radio-btn:hover {
  background-color: #808080;
}

.custom-radio-btn input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-radio-btn input[type=radio]:checked + span {
  background-color: #808080;
  color: var(--primary_text);
  border-color: #808080;
  transform: scale(1.5);
}

.custom-radio-btn input[type=radio]:checked + span::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 20px;
  pointer-events: none;
}

.custom-radio-btn span {
  display: inline-block;
  font-size: 14px;
  padding: 4px 12px;
  line-height: 1.4;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
  font-weight: bold;
  font-family: "Kosugi Maru", sans-serif;
}

.form-group {
  display: flex;
  align-items: center;
}

.card {
  background-color: #f7f4f4;
  padding: 7px 0.5px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  width: 60px;
  text-align: center;
  line-height: 20px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#title {
  flex: 1;
  padding: 10px;
  margin-top: 1vh;
  margin-right: 1vh;
  width: 22vw;
  box-sizing: border-box;
}

.modal-title,
.modal-title2 {
  height: 60px;
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #adacac;
}

.close,
.close2 {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  padding: 10px;
  cursor: pointer;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close {
  right: 25px;
}

.close2 {
  right: 20px;
}

.email-header {
  margin: 15px 0 10px;
}

.email-body,
.sms-body {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.email-footer,
.sms-footer {
  font-size: 12px;
  color: #777;
  margin-top: 20px;
  border-top: 1px solid #adacac;
  padding-top: 10px;
  text-align: center;
}

.email-footer p,
.sms-footer p {
  margin: 0;
}

.email-footer strong,
.sms-footer strong {
  color: #d9534f;
}

.sms-footer {
  font-size: 14px;
}

#previewText,
#previewText2 {
  white-space: pre-wrap;
}

#previewText {
  color: #000000;
}

#previewTitle {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 8px;
  font-family: sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
  height: 15px;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .tab-wrap {
    width: 83vw;
    height: 0px;
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto;
    justify-content: flex-start;
  }

  .tab-wrap::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: var(--primary_color);
    display: block;
    order: -1;
  }

  .content-container {
    width: 75vw;
    height: auto;
    margin: 0 auto 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
  }

  .left-side,
  .right-side {
    width: 80%;
    height: 100%;
    border: 2px solid #808080;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .left-side textarea,
  .right-side textarea {
    width: 100%;
    height: 80%;
    padding: 10px;
    resize: vertical;
    margin-top: 0;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .right-side {
    order: 1;
  }

  .left-side {
    order: 2;
  }

  .left-side textarea {
    min-height: 380px;
  }

  .form-group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .card {
    width: auto;
    min-width: 60px;
    text-align: center;
    padding: 5px;
    background-color: #e9e8e8;
    border-radius: 5px;
  }

  #title {
    flex: 1;
    min-width: 0;
    padding: 8px;
    font-size: 16px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
  }

  #text,
  #text2,
  #text3,
  #text4 {
    margin: 0.5em;
    overflow: visible;
    width: 97%;
  }

  #text2,
  #text3 {
    height: 75%;
  }

  #text4 {
    height: 75%;
    margin-left: 7px;
    padding-left: 5px;
  }

  .info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    font-size: 14px;
    color: var(--background_text);
    margin: 5% 0 0 9vw;
    white-space: normal;
    gap: 10px;
    text-align: left;
  }

  .info-container4 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: var(--background_text);
    margin: 5% 0 0 5vw;
    white-space: nowrap;
  }

  .tutibtn {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    box-sizing: border-box;
    margin: 3% auto -5% 7vw;
    font-size: 17px;
    text-align: left;
    color: black;
    border-radius: 5px;
    cursor: pointer;
  }

  .content-container {
    flex-direction: column;
    align-items: center;
  }

  .right-side4 {
    height: 350px;
    border: 2px solid #808080;
    border-radius: 5px;
    box-sizing: border-box;
    order: 1;
    width: 68vw;
  }

  .left-side4 {
    height: 99%;
    border: 2px solid #808080;
    border-radius: 5px;
    box-sizing: border-box;
    order: 3;
    width: 40vw;
    margin-top: -21vw;
    margin-bottom: 0;
    margin-left: 35vw;
  }

  .image-container {
    order: 2;
    margin-right: 55vw;
    margin-bottom: 0;
  }

  .ukehyo-image {
    height: 45vh;
    margin-left: 0;
  }
}

.menu-span,
.sislabel,
.menlabel,
.labels {
  font-family: sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
}

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

.analysis__title1 {
  border-bottom: 5px solid var(--primary_color);
  display: flex;
  justify-content: space-between;
  color: var(--background_text);
}

.analysis__title1 label {
  font-family: sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
}

.setting__inputBtnset {
  margin-top: 10px;
  font-size: 0;
}

.setting__inputBtnset button {
  font-size: 2rem;
  height: 4rem;
  width: 100px;
  color: var(--primary_text);
  background-color: var(--primary_color);
  border: 3px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-radius: 3px;
  margin: 0;
}

.setting_pass {
  margin-top: 20px;
}

.setting_pass table {
  border-spacing: 20px 20px;
  margin: auto;
  width: 100%;
}

.setting_pass th {
  width: 50%;
  max-width: 50%;
}

.setting_pass td {
  width: 40%;
  max-width: 40%;
  word-wrap: break-word;
}

.invalid-feedbackpass {
  margin-top: 5px;
  font-size: 18px;
  white-space: normal;
  word-wrap: break-word;
  color: #dc3545;
}

.subsection_title_pass {
  font-family: "Kosugi Maru", sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
  font-size: 28px;
  color: var(--background_text);
  border-style: none;
}

.content__midashi,
.analysis__midashi {
  border-bottom: solid var(--primary_color) 3.9rem;
  border-right: solid transparent 3.9rem;
  height: 0;
}

@media (max-width: 959px) {
  .content__midashi,
  .analysis__midashi {
    border-bottom: solid var(--primary_color) 2.7rem;
    border-right: solid transparent 2.7rem;
  }
}

.content__midashi label,
.analysis__midashi label {
  color: var(--primary_text);
  text-align: left;
  padding-left: 2.6rem;
  padding-right: 7.8rem;
}

@media (max-width: 959px) {
  .content__midashi label,
  .analysis__midashi label {
    padding-left: 1.8rem;
    padding-right: 5.4rem;
  }
}

.content__title2 {
  border-bottom-color: var(--primary_color);
  border-bottom-width: 8px;
  border-bottom-style: solid;
  display: flex;
  justify-content: space-between;
  font-size: 2.6rem;
  color: var(--background_text);
}

.menu__button {
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 0px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 50px;
  border-bottom: 10px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  box-sizing: border-box;
  vertical-align: middle;
  padding: 3.2rem 0.2rem;
  width: 100%;
  height: 22vh;
  margin: 2rem 2.5%;
}

.menu__button:disabled,
.menu__button2:disabled,
.menu__button3:disabled {
  color: #848484;
  background-color: #dcdcdc;
  border-color: #cccccc;
  text-shadow: 1px 1px 0px #eaeaea;
}

.content__title,
.analysis__title {
  /*border-bottom-color: var(--primary_color);
  border-bottom-width: 5px;
  border-bottom-style: solid;*/
  display: flex;
  justify-content: space-between;
  font-size: 2.6rem;
  color: var(--background_text);
}

/*受付ボタン*/

.page2 {
  margin: 0;
  display: flex;
  flex-direction: row;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  /*min-height: 600px;*/
  box-sizing: border-box;
}

.uke-answers__button,
.uke-biko__button,
.uke-answers__button-4,
.uke-answers__button-6 {
  color: var(--primary_text);
  background-color: var(--primary_color);
  border-width: 0px;
  border-color: color-mix(in hsl, var(--primary_color) 90%, black 10%);
  border-style: solid;
  border-radius: 50px;
  border-bottom: 10px solid color-mix(in hsl, var(--primary_color) 90%, black 10%);
  box-sizing: border-box;
  vertical-align: middle;
  padding: 1rem 0.2rem;
  font-size: 2.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.uke-answers__button-4 {
  width: 30%;
  height: 20%;
  margin-left: 2%;
  margin-right: 1%;
  margin-top: 3%;
}

.uke-answers__button-6 {
  width: 48%;
  height: 20vh;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 3%;
}

.content__sentence {
  color: var(--background_text);
  font-size: 4.2rem;
  font-family: "Kosugi Maru", sans-serif, メイリオ, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
  margin-left: 2.5%;
}

/* 1) 本体を viewport の中央に固定 */

.ZebraDialog {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* 画面からはみ出さない保険 */
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  /* 他要素に負けないように */
  z-index: 99999 !important;
  /* 計算を安定させる（高さ/幅のズレ防止） */
  box-sizing: border-box;
}

/* 2) オーバーレイは常に全画面フィット */

.ZebraDialogOverlay {
  position: fixed !important;
  inset: 0 !important;
  /* top/right/bottom/left: 0 と同義 */
  z-index: 99998 !important;
}

/* 3) モーダルが出ている間はページのスクロールを止める（Chrome/Edge等）
   ※ :has() が使えないブラウザでは無視されます */

html:has(.ZebraDialog) {
  overflow: hidden;
}

/* 4) 細かい積み重ね対策（親に z-index が強い要素があっても負けにくく） */

.ZebraDialog,
.ZebraDialogOverlay {
  isolation: isolate;
}

/* 5) ダイアログ内部の縦伸びに備えて、見出しやボディにスクロール領域を用意
   （プロジェクトのクラス構造に合わせて適宜） */

.ZebraDialog .ZebraDialog_Body {
  overflow: auto;
  max-height: calc(90vh - 4rem);
  /* ヘッダ/フッタ分の余白は調整 */
}

.menu__label--sizemain {
  font-size: 8.1rem;
}

@media (max-width: 959px) {
  .menu__label--sizemain {
    font-size: 5.6rem;
  }
}

#confirmButton1,
#confirmButton2,
#confirmButton3,
#confirmButton4 {
  font-size: 18px;
  background-color: var(--primary_color);
  color: var(--primary_text);
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#confirmButton1:hover,
#confirmButton1:active,
#confirmButton2:hover,
#confirmButton2:active,
#confirmButton3:hover,
#confirmButton3:active,
#confirmButton4:hover,
#confirmButton4:active {
  background-color: #808080;
}

#confirmButton1,
#confirmButton2,
#confirmButton3,
#confirmButton4 {
  padding: 5px 15px;
}

.ZebraDialog .ZebraDialog_Buttons a {
  background-color: var(--primary_color);
  font-size: 20px;
  color: var(--primary_text);
  margin-top: 5px;
}