/* .d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

@media (min-width: 769px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
} */

@media (max-width: 768px) {
  .d-nmd-none {
    display: none !important;
  }
}

#table_oc_schedule {
  border: none;

  th,
  td {
    border: none;
    padding: 5px;
  }

  tr {
    border-bottom: 1px solid #cecece;
  }

  thead th:nth-child(n+2) {
    padding: 3px;
    width: 6.5%;
  }

  .oc_all {
    color: #b02727;
    background: #b0272722;
  }

  .oc_photo {
    color: #373c91;
    background: #373c9122;
  }

  .oc_cinema {
    color: #d71e36;
    background: #d71e3622;
  }

  .oc_fineart {
    color: #deac14;
    background: #deac1422;
  }

  .oc_music {
    color: #48995b;
    background: #48995b22;
  }

  .oc_literary {
    color: #708996;
    background: #70899622;
  }

  .oc_theatre {
    color: #d5808c;
    background: #d5808c22;
  }

  .oc_broadcast {
    color: #e18b45;
    background: #e18b4522;
  }

  .oc_design {
    color: #0076a5;
    background: #0076a522;
  }

  .oc_other {
    color: #9c27b0;
    background: #9c27b022;
  }

  .oc_common {
    color: #795548;
    background: #79554822;
  }

  .oc_graduate {
    color: #2e3977;
    background: #2e397722;
  }
}

#tab_oc,
#tab_oc_sub {
  width: 100%;

  .tab_group {
    display: flex;
    width: 100%;

    label {
      flex: auto;
      order: -1;
      min-width: 70px;
      padding: .7em 0 .5em;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 0;
      font-size: .9em;
      text-align: center;
      cursor: pointer;
      margin-bottom: 0;
      border-color: #e9f0f6 #f0f0f0 #fff;
      border-style: solid;
      border-width: 4px 1px 1px;
      border-radius: 5px;
    }

    label:hover {
      opacity: .8;
    }

    label:has(:checked) {
      background-color: #fff;
      border-color: #2589d0 #f0f0f0 #fff;
      color: #333333;
    }

    input {
      display: none;
    }

    label.oc_all {
      border-top-color: #b0272777;
      color: #b0272777;
    }

    label.oc_photo {
      border-top-color: #373c9177;
      color: #373c9177;
    }

    label.oc_cinema {
      border-top-color: #d71e3677;
      color: #d71e3677;
    }

    label.oc_fineart {
      border-top-color: #deac1477;
      color: #deac1477;
    }

    label.oc_music {
      border-top-color: #48995b77;
      color: #48995b77;
    }

    label.oc_literary {
      border-top-color: #70899677;
      color: #70899677;
    }

    label.oc_theatre {
      border-top-color: #d5808c77;
      color: #d5808c77;
    }

    label.oc_broadcast {
      border-top-color: #e18b4577;
      color: #e18b4577;
    }

    label.oc_design {
      border-top-color: #0076a577;
      color: #0076a577;
    }

    label.oc_other {
      border-top-color: #9c27b077;
      color: #9c27b077;
    }

    label.oc_common {
      border-top-color: #79554877;
      color: #79554877;
    }

    label.oc_graduate {
      border-top-color: #2e397777;
      color: #2e397777;
    }

    label.oc_all:has(:checked),
    label.oc_all:hover {
      background-color: #b0272722;
      border-top-color: #b02727;
      color: #b02727;
    }

    label.oc_photo:has(:checked),
    label.oc_photo:hover {
      background-color: #373c9122;
      border-top-color: #373c91;
      color: #373c91;
    }

    label.oc_cinema:has(:checked),
    label.oc_cinema:hover {
      background-color: #d71e3622;
      border-top-color: #d71e36;
      color: #d71e36;
    }

    label.oc_fineart:has(:checked),
    label.oc_fineart:hover {
      background-color: #deac1422;
      border-top-color: #deac14;
      color: #deac14;
    }

    label.oc_music:has(:checked),
    label.oc_music:hover {
      background-color: #48995b22;
      border-top-color: #48995b;
      color: #48995b;
    }

    label.oc_literary:has(:checked),
    label.oc_literary:hover {
      background-color: #70899622;
      border-top-color: #708996;
      color: #708996;
    }

    label.oc_theatre:has(:checked),
    label.oc_theatre:hover {
      background-color: #d5808c22;
      border-top-color: #d5808c;
      color: #d5808c;
    }

    label.oc_broadcast:has(:checked),
    label.oc_broadcast:hover {
      background-color: #e18b4522;
      border-top-color: #e18b45;
      color: #e18b45;
    }

    label.oc_design:has(:checked),
    label.oc_design:hover {
      background-color: #0076a522;
      border-top-color: #0076a5;
      color: #0076a5;
    }

    label.oc_other:has(:checked),
    label.oc_other:hover {
      background-color: #9c27b022;
      border-top-color: #9c27b0;
      color: #9c27b0;
    }

    label.oc_common:has(:checked),
    label.oc_common:hover {
      background-color: #79554822;
      border-top-color: #795548;
      color: #795548;
    }

    label.oc_graduate:has(:checked),
    label.oc_graduate:hover {
      background-color: #2e397722;
      border-top-color: #2e3977;
      color: #2e3977;
    }
  }
}

@media (max-width: 769px) {

  #tab_oc,
  #tab_oc_sub {
    overflow-x: scroll;
    scrollbar-width: thin;
  }
}

.oc-map-control {
  position: relative;
}

#oc-map {
  position: relative;
  overflow: auto;
  scrollbar-width: thin;
  background: #d3d3d3;
  /*max-height: 80vh;*/

  .oc-map-body {
    transform-origin: top left;
  }

  .oc-map-body.show-sub .basemap {
    opacity: 0;
  }

  .basemap,
  .submap {
    transition-duration: 1.0s;
    width: 100%;
    height: 100%;
  }

  .submap {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
  }

  .submap.show {
    display: block;
    animation-name: fade-in;
  }

  .submap.hide {
    display: block;
    opacity: 0;
    animation-name: fade-out;
  }

  img {
    transition-duration: 0.5s;
  }

  .submap>img {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
  }
}


.control-panel {
  position: absolute;
  left: calc(100% / 80 * 2);
  top: calc(100% / 49 * 2);
  z-index: 1;
  transition-duration: 0.1s;

  &.right {
    left: auto;
    right: calc(100% / 80 * 2);
    text-align: right;
  }

  &.bottom {
    top: auto;
    bottom: calc(100% / 49 * 2);
  }

  select {
    border-radius: 5px;
    margin: 5px 0px;
    padding-right: 5px;

    &#floor-select {
      min-width: 80px;
    }
  }
}

.map-marker {
  position: absolute;
  /*place-self: anchor-center;*/
  /*bottom: 0%;*/
  /*left: 0%;*/
  --bottom: 0%;
  --left: 0%;
  bottom: calc((var(--bottom) * 0.5) + (92% * 0.5));
  left: calc((var(--left) * 0.5) + (95% * 0.5));

  transition-duration: 0.15s;
  border-radius: 50%;

  width: calc(100% / 80 * 4);
  height: calc(100% / 49 * 4);
  opacity: 0;



  &.clickable {
    opacity: 1;
  }

  &.ripple {
    opacity: 1;
  }

  &.clickable::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);

    width: calc(100%);
    height: calc(100%);

    border: 1px solid #6c5cff;
    border-top: 1px solid #ffffff11;
    border-bottom: 1px solid #ffffff11;
    border-radius: 50%;
    background: #aaa1ff33;
    animation: rotateAnimation 2s linear infinite;
  }

  &.ripple::before,
  &.ripple::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);

    width: 0px;
    height: 0px;

    opacity: 0;
    background: #ff8c00;
    border: 0px solid #ff7200;
    border-radius: 50%;
    animation: rippleEffect 1s linear infinite;
  }

  &.ripple::before {}

  &.ripple::after {}

}

@keyframes rotateAnimation {
  from {
    transform: translate(-50%, 50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, 50%) rotate(360deg);
  }
}

@keyframes rippleEffect {
  0% {
    opacity: 1;
    width: 0px;
    height: 0px;
    border-width: 0;
  }

  30% {
    opacity: .4;
  }

  80% {
    opacity: 0;
    width: calc(100% * 1.5);
    height: calc(100% * 1.5);
    border-width: 7px;
  }

  100% {
    opacity: 0;
    width: 0px;
    height: 0px;
    border-width: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  99% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@media (max-width: 768px) {
  .control-panel {
    font-size: 10px;

    select,
    button {
      background: #ffffff88;
    }

    select#floor-select {
      min-width: 65px;
    }
  }
}

.phead.phead_h2 {
  position: relative;
  padding-left: 20px;
}

.phead.phead_h2::before {
  position: absolute;
  left: 0;
}

.plist.plist_type_ruled_line>.plist__item {
  position: relative;
  padding-left: 1.5em;
}

.plist.plist_type_ruled_line>.plist__item::before {
  content: "┗";
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .reservation-box li.plist__item {
    font-size: smaller;
  }
}

.phead.phead_h2 {
  position: relative;
  padding-left: 20px;
}

.phead.phead_h2::before {
  position: absolute;
  left: 0;
}

.plist.plist_type_ruled_line>.plist__item {
  position: relative;
  padding-left: 1.5em;
}

.plist.plist_type_ruled_line>.plist__item::before {
  content: "┗";
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .reservation-box li.plist__item {
    font-size: smaller;
  }
}

.admissions .phead_h2 {
  &.oc_photo::before {
    color: #373c91;
  }

  &.oc_cinema::before {
    color: #d71e36;
  }

  &.oc_fineart::before {
    color: #deac14;
  }

  &.oc_music::before {
    color: #48995b;
  }

  &.oc_literary::before {
    color: #708996;
  }

  &.oc_theatre::before {
    color: #d5808c;
  }

  &.oc_broadcast::before {
    color: #e18b45;
  }

  &.oc_design::before {
    color: #0076a5;
  }
}

@media (max-width: 768.98px) {
  .admissions .eduinfo-wrap.active .oc-reservation {
    padding: 10px;
  }
}

.grid-oc {
  overflow-y: scroll;
  scrollbar-width: thin;
  font-size: 12px;
}

.grid-oc table,
.grid-oc tbody {
  display: block;
}

.grid-oc tr {
  display: grid;
  grid-template-columns: 5.5% 25% 20% 49.5%;
}

.grid-oc [cnt=odd] {
  background: #ffffff !important;
}

.grid-oc [cnt=even] {
  background: #f2f2f2 !important;
}

.grid-oc td {
  background-color: #00000000 !important;
  border-left: none;
  border-top: none;
  align-content: center;
}

.grid-oc th,
.grid-oc [type=idx] {
  text-align: center;
  align-content: center;
}

@media (max-width: 768px) {
  .grid-oc tr {
    grid-template-columns: 15% 85%;
    grid-template-rows: repeat(3, auto);
  }

  .grid-oc td[type=idx] {
    grid-row: span 3;
  }
}

.grid-oc.reserve tr {
  grid-template-columns: 5.5% 55% 39.5%;
}

@media (max-width: 768px) {
  .grid-oc.reserve tr {
    grid-template-columns: 10% 90%;
  }

  .grid-oc.reserve td[type=idx] {
    grid-row: auto !important;
  }

  .grid-oc.reserve td[type=summary] {
    grid-row: 99 !important;
    grid-column: span 2;
  }
}

.grid-oc .reservation-box__btn {
  display: block;
  width: 85%;
  border: double #ddd;
  position: relative;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0;
}

.grid-oc .reservation-box__btn::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  right: 14px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px none;
  border-left: 0px none;
  background: none !important;
  padding-right: 0 !important;
}

@media (min-width: 769px) {
  .grid-oc .reservation-box__btn {
    font-size: 14px;
    letter-spacing: -0.01em;
  }

  .grid-oc .reservation-box__btn::after {
    width: 12px;
    height: 12px;
    right: 22px;
  }
}

.admissions .oc-reservation {
  overflow: clip;
  height: auto;
  visibility: visible;
  padding: 0px;
}

.admissions .oc-reservation__flow {
  position: relative;
  border: 1px solid #999;
  margin-bottom: 35px;
}

.admissions .oc-reservation__flow+.oc-reservation__flow::before {
    content: '';
    position: absolute;
    top: -37px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    border-top: 15px solid #000;
    border-right: 15px solid transparent;
    border-bottom: 0;
    border-left: 15px solid transparent;
}

.admissions .oc-reservation__flow__head {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 6px 0;
  background-color: #f4f4f4;
}

.admissions .oc-reservation__flow__body {
  padding: 15px;
}

.admissions .oc-reservation a[target='_blank'][href^='http']::after {
  background-image: none;
}