/*! ver. 2026033101 */
:root {
  --font-family: "Noto Sans JP", sans-serif;
  --font-size-medium: 18px;
  --font-size-normal: 16px;
  --font-size-small: 14px;
  --font-weight-normal: normal;
  --font-weight-normal-b: 500;
  --font-weight-bold: bold;
  --margin-box: 20px;
  --height-input: 40px;
  --height-button: 48px;
  --radius-box: 10px;
  --radius-ui: 8px;
  --radius-dialog: 20px;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray: #DFE0E3;
  --color-gray-l: #F5F5F5;
  --color-gray-d: #333333;
  --color-blue: #0000FF;
  --color-content: #EDF4FF;
  --color-primary: #0080A3;
  --color-primary-f: #0080A35A;
  --color-primary-l: #F6FDFF;
  --color-primary-l2: #E4FAFD;
  --color-line-u: #E5E5E5;
  --color-screen: #E6FBFF;
  --color-map: #DCE9FE;
  --color-hazard: #F7AEA3;
  --ic-link-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.918 5.25H22.7513V11.0833' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0547 15.9444L22.7491 5.25' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8333 14.9723V20.8056C19.8333 21.3213 19.6285 21.8159 19.2638 22.1806C18.8992 22.5452 18.4046 22.7501 17.8889 22.7501H7.19444C6.67875 22.7501 6.18417 22.5452 5.81951 22.1806C5.45486 21.8159 5.25 21.3213 5.25 20.8056V10.1112C5.25 9.59549 5.45486 9.10092 5.81951 8.73626C6.18417 8.37161 6.67875 8.16675 7.19444 8.16675H13.0278' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-link-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.918 5.25H22.7513V11.0833' stroke='%230080A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0547 15.9444L22.7491 5.25' stroke='%230080A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8333 14.9723V20.8056C19.8333 21.3213 19.6285 21.8159 19.2638 22.1806C18.8992 22.5452 18.4046 22.7501 17.8889 22.7501H7.19444C6.67875 22.7501 6.18417 22.5452 5.81951 22.1806C5.45486 21.8159 5.25 21.3213 5.25 20.8056V10.1112C5.25 9.59549 5.45486 9.10092 5.81951 8.73626C6.18417 8.37161 6.67875 8.16675 7.19444 8.16675H13.0278' stroke='%230080A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-link-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.918 5.25H22.7513V11.0833' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0547 15.9444L22.7491 5.25' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8333 14.9723V20.8056C19.8333 21.3213 19.6285 21.8159 19.2638 22.1806C18.8992 22.5452 18.4046 22.7501 17.8889 22.7501H7.19444C6.67875 22.7501 6.18417 22.5452 5.81951 22.1806C5.45486 21.8159 5.25 21.3213 5.25 20.8056V10.1112C5.25 9.59549 5.45486 9.10092 5.81951 8.73626C6.18417 8.37161 6.67875 8.16675 7.19444 8.16675H13.0278' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-plus-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z' fill='%230080A3'/%3E%3C/svg%3E");
  --ic-remove-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z' fill='%230080A3'/%3E%3C/svg%3E");
  --ic-check-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.55156 18.0001L3.85156 12.3001L5.27656 10.8751L9.55156 15.1501L18.7266 5.9751L20.1516 7.4001L9.55156 18.0001Z' fill='white'/%3E%3C/svg%3E%0A");
  --ic-triangle-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M-1.90735e-06 11L7 0L14 11H-1.90735e-06Z' fill='white'/%3E%3C/svg%3E");
  --ic-close-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z' fill='%231F1F1F'/%3E%3C/svg%3E");
  --lens-throw-table-box-w: 761px;
  --lens-throw-table-box-pad-right: 21px;
  --mapview-col-left-w: 260px;
  --mapview-col-body-w: 500px;
  --mapview-col-right-w: 1fr;
  --mapview-row-top-h: 65px;
  --mapview-row-body-h: 266px;
  --mapview-row-bottom-h: 130px;
}
.sim {
  min-width: 1200px;
  color: #000000;
  font-family: var(--font-family);
  line-height: 1.6;
  letter-spacing: 0.1em;
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  *:focus-visible {
    outline: none;
    box-shadow: 0 0 3px 2px var(--color-primary-f);
  }
}
.sim h1 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  margin-top: 50px;
  margin-bottom: 12px;
}
.sim p {
  margin: 0;
  padding: 0;
}
.sim button {
  letter-spacing: inherit;
}
.sim a {
  text-decoration: none;
  &[class^=sim-btn-],
  &[class*=" sim-btn-"] {
    span:last-of-type {
      text-align: center;
      width: 100%;
    }
  }
}
.sim ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sim label {
  cursor: pointer;
}
.sim input {
  &[type=radio],
  &[type=range] {
    accent-color: var(--color-primary);
  }
  &[type=radio] {
    width: 18px;
    height: 18px;
    margin: 0 5px 0 0;
  }
  &[type=range] {
    width: 100%;
  }
}
.sim input[type=text],
.sim input[type=number],
.sim select {
  font-family: inherit;
  letter-spacing: inherit;
  box-sizing: border-box;
  font-size: var(--font-size-normal);
  border-radius: var(--radius-ui);
  outline: none;
  border: 1px solid var(--color-primary-f);
  background-color: var(--color-primary-l);
  width: 100%;
  height: var(--height-input);
  padding-left: 12px;
  &:focus {
    box-shadow: 0 0 3px 1px var(--color-primary-f);
  }
}
.sim select {
  padding-left: 8px;
}
.sim dialog {
  border: none;
  border-radius: var(--radius-dialog);
  box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
  flex-direction: column;
  padding: 0;
  > :nth-of-type(1) {
    padding: 24px;
  }
  .sim-dlg-close {
    position: absolute;
    cursor: pointer;
    top: 24px;
    right: 24px;
  }
  .sim-dialog-foot {
    display: flex;
    justify-content: center;
  }
}
.sim-center {
  margin: auto;
  width: 1200px;
}
.sim-body {
  padding-top: 24px;
  padding-bottom: 24px;
}
.sim-content {
  background-color: var(--color-content);
  visibility: hidden;
}
.sim-sp-ml-10 {
  margin-left: 10px;
}
.sim-sp-ml-20 {
  margin-left: 20px;
}
.sim-sp-mt-10 {
  margin-top: 10px;
}
.sim-sp-mt-20 {
  margin-top: 20px;
}
.sim-size-btn-wfull {
  width: 100%;
  height: var(--height-button);
}
.sim-box-1,
.sim-box-2 {
  border-radius: var(--radius-box);
  padding: 24px;
  background-color: var(--color-white);
}
.sim-box-1 {
  padding-top: 10px;
}
.sim-box-2 {
  background-color: var(--color-map);
}
.sim-box-3 {
  background-color: var(--color-primary-l);
  border-radius: var(--radius-box);
  color: var(--color-primary);
  font-weight: var(--font-weight-normal-b);
  padding: 8px 20px;
  margin-right: 10px;
  column-gap: 16px;
  span {
    font-weight: var(--font-weight-bold);
  }
}
.sim-font-normal {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
}
.sim-font-size-medium {
  font-size: var(--font-size-medium);
}
.sim-font-size-normal {
  font-size: var(--font-size-normal);
}
.sim-font-size-small {
  font-size: var(--font-size-small);
}
.sim-font-weight-normal {
  font-weight: var(--font-weight-normal);
}
.sim-font-weight-normal-b {
  font-weight: var(--font-weight-normal-b);
}
.sim-font-weight-bold {
  font-weight: var(--font-weight-bold);
}
.sim-text-color-primary {
  color: var(--color-primary);
}
.sim-con-row-1,
.sim-con-row-2,
.sim-con-row-3,
.sim-con-row-4,
.sim-con-row-5,
.sim-con-row-6 {
  display: flex;
}
.sim-con-row-2 {
  align-items: center;
  justify-content: center;
}
.sim-con-row-3 {
  justify-content: space-between;
}
.sim-con-row-4 {
  align-items: flex-end;
}
.sim-con-row-5 {
  justify-content: flex-end;
}
.sim-con-row-6 {
  align-items: center;
}
.sim-unit {
  margin-left: 10px;
}
.sim-row-box {
  margin: 20px 0;
  p {
    margin-bottom: 3px;
  }
  .sim-row:not(:first-child) {
    margin-top: 16px;
  }
  .sim-row-2:not(:first-child) {
    margin-top: 24px;
  }
}
.sim-overflow-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sim-relative-box {
  position: relative;
}
.sim-select-ph {
  option {
    color: black;
  }
  &:invalid,
  option:first-child {
    color: gray;
  }
}
.sim-head-1,
.sim-head-2 {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-normal-b);
  margin: 0;
}
.sim-head-1 {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-line-u);
}
.sim-head-2 {
  padding: 0;
}
.sim-btn-1,
.sim-btn-2,
.sim-btn-3 {
  border-radius: var(--radius-ui);
  font-size: var(--font-size-normal);
  cursor: pointer;
  padding: .5em 1em;
  span:last-of-type {
    width: 100%;
  }
}
.sim-btn-1 {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}
.sim-btn-2 {
  border: 1px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
}
.sim-btn-3 {
  border: 1px solid #a3a3a3;
  background-color: var(--color-white);
  color: var(--color-black);
  border-width: 1px;
}
.sim-square-btn-up,
.sim-square-btn-down,
.sim-square-btn-left,
.sim-square-btn-right {
  background-color: var(--color-primary);
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: var(--radius-ui);
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.sim-square-btn-up {
  background-image: var(--ic-triangle-1);
}
.sim-square-btn-down {
  background-image: var(--ic-triangle-1);
  transform: rotate(180deg);
}
.sim-square-btn-left {
  background-image: var(--ic-triangle-1);
  transform: rotate(-90deg);
}
.sim-square-btn-right {
  background-image: var(--ic-triangle-1);
  transform: rotate(90deg);
}
.sim-toggle-btn {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 25px;
  border-radius: 50px;
  background-color: var(--color-gray);
  cursor: pointer;
  transition: background-color .2s;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: var(--color-white);
    content: "";
    transition: left .2s;
  }
  &:has(:checked) {
    background-color: var(--color-primary);
  }
  &:has(:checked)::after {
    left: 25px;
  }
  input[type=checkbox] {
    display: none;
  }
}
.sim-label-radio {
  &:has(input[type=radio]) {
    display: flex;
    align-items: center;
  }
  &:has(input[type=radio]:checked) {
    color: var(--color-primary);
  }
}
[class^=sim-ic-],
[class*=" sim-ic-"] {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
}
.sim-ic-link-1 {
  background-image: var(--ic-link-1);
}
.sim-ic-link-2 {
  background-image: var(--ic-link-2);
}
.sim-ic-link-3 {
  background-image: var(--ic-link-3);
}
.sim-ic-plus-2 {
  background-image: var(--ic-plus-2);
}
.sim-ic-remove-2 {
  background-image: var(--ic-remove-2);
}
.sim-ic-check-1 {
  background-image: var(--ic-check-1);
}
.sim-ic-triangle-1 {
  background-image: var(--ic-triangle-1);
}
.sim-ic-close-3 {
  background-image: var(--ic-close-3);
}
.sim-message-dialog {
  width: 650px;
  min-width: 650px;
  .sim-dialog-foot > button {
    margin: 0 10px;
    width: 120px;
    height: var(--height-button);
  }
  [name=elMessage] {
    margin: 30px 10px;
  }
}
.sim-accordion {
  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary::after {
    box-sizing: border-box;
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-right: 3px;
    border-bottom: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
    content: "";
    transition: transform .3s;
  }
  &[open] summary::after {
    transform: rotate(225deg);
  }
}
.sim-search-head {
  ~ .sim-search-container {
    display: none;
  }
  &[open] ~ .sim-search-container {
    display: flex;
    margin-top: 16px;
  }
}
.sim-search-head2 {
  margin-top: 16px;
  > div:first-of-type {
    width: 700px;
    > div {
      width: 100%;
    }
  }
  > a {
    width: 217px;
    margin-left: 6px;
    height: 64px;
  }
}
.sim-search-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  text-align: center;
  gap: 14px 10px;
  width: 860px;
  height: 546px;
  .sim-hidden-radio {
    display: none;
  }
  li {
    background-color: var(--color-gray-l);
    border-radius: var(--radius-ui);
    width: 200px;
    height: 220px;
    padding: 13px;
    label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      img {
        width: 150px;
        height: 100px;
        margin-bottom: auto;
      }
      div {
        margin-right: auto;
      }
      div:nth-of-type(1) {
        font-weight: var(--font-weight-bold);
      }
      div:nth-of-type(2),
      div:nth-of-type(3) {
        font-size: var(--font-size-small);
      }
      div:last-of-type {
        margin-bottom: 2px;
      }
    }
  }
  li:has(.sim-hidden-radio:checked) {
    background-color: var(--color-primary-l);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }
}
.sim-search-message {
  display: none;
}
.sim-search-filter {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-top: 24px;
  width: 270px;
  .sim-head-1 {
    padding: 16px 0;
  }
  .sim-row-box {
    .sim-row:last-child {
      margin-top: 24px;
      button {
        width: 160px;
        height: var(--height-button);
      }
    }
  }
}
.sim-simulator-area {
  display: flex;
  margin-top: var(--margin-box);
  > div:nth-of-type(1) {
    flex-shrink: 0;
    flex-basis: 330px;
  }
  > div:nth-of-type(2) {
    width: 100%;
  }
}
.sim-roomstand-box {
  .sim-roomstand-tab {
    display: flex;
    column-gap: 5px;
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      border-radius: var(--radius-ui);
      background-color: var(--color-primary-l);
      padding: 10px 0;
      &:has(input[type=radio]:checked) {
        outline: 1px solid var(--color-primary-f);
      }
    }
    label span {
      margin-right: 5px;
    }
    &:has(input[name=elControlRoomStandType][value="0"]:checked) ~ .sim-roomstand-pages .sim-roomstand-page-1,
    &:has(input[name=elControlRoomStandType][value="1"]:checked) ~ .sim-roomstand-pages .sim-roomstand-page-2 {
      display: block;
    }
  }
  .sim-roomstand-pages {
    border-radius: var(--radius-ui);
    background-color: var(--color-primary-l);
    margin-top: 5px;
    padding: 20px;
    label {
      margin-bottom: 5px;
    }
    .sim-roomstand-page-2 {
      .sim-row:nth-of-type(1) {
        margin-bottom: 16px;
      }
      .sim-row:nth-of-type(2) {
        margin-top: 0;
      }
    }
    .sim-roomstand-page-1,
    .sim-roomstand-page-2 {
      display: none;
    }
  }
}
.sim-search-dialog {
  width: 926px;
  min-width: 926px;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 10px;
    margin-top: 20px;
    li {
      width: calc(100% / 3 - 10px);
    }
  }
  .sim-dialog-foot {
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .sim-dialog-foot > button {
    margin: 0 8px;
    width: 280px;
    height: var(--height-button);
  }
}
.sim-lensshift-cursor {
  column-gap: 4px;
  > div:nth-of-type(2) {
    font-size: 0;
    > div {
      margin: 4px 0;
    }
  }
}
.sim-lens-view {
  margin-bottom: var(--margin-box);
  > div:first-of-type {
    width: 568px;
    margin-top: 10px;
    > p:nth-of-type(1) {
      width: 225px;
    }
  }
  details {
    ~ .sim-lens-throw {
      visibility: hidden;
      height: 0;
    }
    &[open] ~ .sim-lens-throw {
      visibility: inherit;
      height: auto;
    }
  }
}
.sim-lens-throw {
  > div:nth-of-type(1),
  .sim-lens-throw-head-box,
  .sim-lens-throw-table-box {
    width: calc(var(--lens-throw-table-box-w) + var(--lens-throw-table-box-pad-right));
    max-width: calc(var(--lens-throw-table-box-w) + var(--lens-throw-table-box-pad-right));
  }
  > div:nth-of-type(1) {
    text-align: right;
    font-size: var(--font-size-small);
    padding-right: calc(var(--lens-throw-table-box-pad-right) - 10px);
  }
}
.sim-lens-throw-head-box {
  position: relative;
  height: 20px;
  letter-spacing: normal;
  > span {
    position: absolute;
    font-size: var(--font-size-small);
  }
}
.sim-lens-throw-table-box {
  max-height: 183px;
  overflow: auto;
  position: relative;
  table,
  th,
  td {
    box-sizing: border-box;
  }
  th,
  div,
  span {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
  }
  table {
    border-spacing: 0;
    table-layout: fixed;
  }
  td {
    border-left: 1px solid var(--color-gray);
    &:last-child {
      border-right: 1px solid var(--color-gray);
    }
  }
  tbody {
    th {
      padding: 6px 20px 6px 10px;
      text-align: left;
      label {
        padding: 2px 0;
        input[type=radio] {
          margin-right: 10px;
        }
        > div {
          > span {
            font-weight: var(--font-weight-bold);
          }
          > div {
            letter-spacing: normal;
          }
        }
      }
    }
    tr:has(input[name=elLensListItem]:checked),
    th:has(input[name=elLensListItem]:checked) {
      background-color: var(--color-primary-l2);
      color: var(--color-primary);
    }
    tr:has(input[name=elLensListItem]:checked) .sim-lens-throw-table-bar {
      background-color: var(--color-primary);
    }
  }
}
.sim-lens-throw-table-bar {
  height: 30px;
  background-color: var(--color-gray);
  border-radius: 4px;
  padding: 0;
  margin: 0;
  position: sticky;
}
.sim-control-view {
  margin-right: var(--margin-box);
  > div {
    margin-bottom: var(--margin-box);
  }
  [name=elReset] {
    margin-top: 22px;
  }
}
.sim-control-view2 {
  padding: 15px 20px;
  margin-bottom: var(--margin-box);
  column-gap: 20px;
  input[type=number] {
    width: 100px;
    height: 48px;
  }
}
.sim-draggable-box {
  cursor: pointer;
  touch-action: none;
  border: none;
  margin: 0;
  padding: 0;
}
.sim-draw {
  position: relative;
}
.sim-draw > * {
  position: absolute;
}
.sim-map {
  display: grid;
  grid-template-columns: var(--mapview-col-left-w) var(--mapview-col-body-w) var(--mapview-col-right-w);
  grid-template-rows: var(--mapview-row-top-h) var(--mapview-row-body-h) var(--mapview-row-bottom-h);
  gap: 0;
  width: 100%;
}
.sim-map-top {
  grid-area: 1 / 1 / 2 / 4;
}
.sim-map-left {
  grid-area: 2 / 1 / 3 / 2;
}
.sim-map-body {
  grid-area: 2 / 2 / 3 / 3;
  background-color: white;
}
.sim-map-right {
  grid-area: 2 / 3 / 3 / 4;
}
.sim-map-bottom {
  grid-area: 3 / 1 / 4 / 4;
}
.sim-map-cover {
  visibility: hidden;
  position: absolute;
  background-color: var(--color-white);
  font-size: var(--font-size-normal);
  color: red;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.sim-map-right-ruler {
  position: absolute;
  transform-origin: top left;
  transform: rotate(-90deg);
  white-space: nowrap;
  color: var(--color-primary);
  font-size: var(--font-size-small);
  left: 15px;
  top: 300px;
}
.sim-sidemap-view,
.sim-frontmap-view {
  margin-bottom: var(--margin-box);
  font-size: var(--font-size-small);
}
.sim-frontmap-view .sim-map {
  grid-template-rows: var(--mapview-row-top-h) var(--mapview-row-body-h) calc(var(--mapview-row-bottom-h) - 50px);
}
.sim-ruler-box-left {
  width: 100%;
  height: 100%;
  text-align: right;
  position: relative;
  > div {
    margin-right: 20px;
    position: absolute;
    right: 0;
    &:nth-of-type(1) {
      top: 0;
    }
    &:nth-of-type(2) {
      top: 100px;
    }
    &:nth-of-type(3) {
      bottom: 0;
    }
  }
}
.sim-ruler-box-top-bottom {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  > div {
    position: absolute;
    &:nth-of-type(2) {
      left: 100px;
    }
  }
}
.sim-map-top .sim-ruler-box-top-bottom {
  div {
    bottom: 15px;
  }
}
.sim-map-bottom .sim-ruler-box-top-bottom {
  div {
    top: 15px;
  }
}
.sim-map-legend-box {
  display: flex;
  align-items: center;
  left: 16px;
  bottom: 10px;
  font-size: var(--font-size-small);
  width: 100%;
  column-gap: 20px;
  span {
    margin-left: 8px;
  }
}
.sim-legend-screen {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-primary);
  background-color: var(--color-screen);
}
.sim-legend-hazard {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-hazard);
  background-color: var(--color-hazard);
}
.sim-legend-lensshift {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-blue);
}
.sim-map-guide-person {
  bottom: 10px;
  right: 0;
}
.sim-projector {
  height: 25px;
  svg {
    width: auto;
    height: 100%;
    transform-origin: center center;
    transform: scaleX(1.0);
    transform: scaleY(1.0);
    display: block;
  }
  svg:not(:nth-of-type(1)) {
    display: none;
  }
}
.sim-projector-ci {
  display: none;
  width: 30px;
  height: 30px;
  border: 1px solid blue;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px rgb(100 200 255 / 30%);
}
.sim-projector-guide-box1,
.sim-projector-guide-box2 {
  white-space: nowrap;
}
.sim-frontmap-view .sim-map-body .sim-projector {
  left: 0;
  top: 0;
  width: 60px;
  height: 25px;
  background-color: black;
}
.sim-person-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sim-person {
  height: 100px;
  top: calc(var(--mapview-row-body-h) - 100px);
  mix-blend-mode: multiply;
  pointer-events: none;
  svg {
    width: auto;
    height: 100%;
  }
}
.sim-inst-hint {
  dt {
    font-weight: var(--font-weight-normal-b);
  }
  dl dt {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  dt,
  dd {
    margin-left: 30px;
    font-size: var(--font-size-normal);
  }
  dl {
    counter-reset: my-counter;
    margin-bottom: 0;
  }
  dt::before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: var(--color-white);
    color: var(--color-primary);
    display: block;
    float: left;
    line-height: 20px;
    letter-spacing: normal;
    margin-left: -30px;
    text-align: center;
    height: 22px;
    width: 22px;
    border-radius: 50%;
  }
}