@charset "UTF-8";

.facility {
  overflow: hidden;
}
.facility__content {
  width: min(1200px, 98%);
  margin-inline: auto;
}
.facility__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-inline: calc(50% - 49vw);
  border-bottom: 2px solid hsl(26, 54%, 25%);
  margin-block-end: clamp(2.5rem, 1.82rem + 2.91vw, 4rem);
}
.facility__li {
  width: min(420px, 33.3333333333%);
  padding: 1rem;
  position: relative;
}

@media screen and (max-width: 1024px) {
  .facility__li {
    width: min(420px, 50%);
  }
}
.facility__li img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
}
.facility__li .ttl {
  display: block;
  text-align: center;
  position: relative;
  background-color: hsl(0, 0%, 100%);
  border: 2px solid hsl(26, 54%, 25%);
  border-radius: 10px;
  font-size: clamp(0.875rem, 0.59rem + 1.21vw, 1.5rem);
  padding-block: 1rem;
  color:#E4261B;
}
@media screen and (max-width: 1024px) {
  .facility__li .ttl {
    writing-mode: horizontal-tb;
  }
}

.facility__li.active img {
  display: block;
  height:clamp(50px,calc(100 / 1200 * 100vw),100px);
  width: auto;
  aspect-ratio:16/128 ;
  translate:0 -2px;
}
.facility__li.active .ttl {
  width: 100%;
  background-color: #3CB134;
  color:white;
}
.facility__li.active .ttl::before {
  content: "";
  position: absolute;
  width: calc(100% + 2rem);
  height: calc(100% + 2rem + 4px);
  left: -1rem;
  top: -1rem;
  border: 2px solid hsl(26, 54%, 25%);
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #e6f9ff;
}

.facility__map {
  position: relative;
  margin-block-end: clamp(5rem, 3.86rem + 4.85vw, 7.5rem);
}



/* facility.css | http://dev.rina.com:8000/css/facility.css */



.facility__li {
  /* margin-inline: 1rem; */
  /* margin-block-end: 1rem; */
  padding: 1rem;
}
.aobadai_map01{
  width:fit-content;
  margin-inline:auto;
  aspect-ratio:1085/905 ;
}
.aobadai_map02{
  width:fit-content;
  margin-inline:auto;
  aspect-ratio:1001/806 ;
}
.eda_map01{
  width:fit-content;
  margin-inline:auto;
  aspect-ratio:1094/692 ;
}
.eda_map02{
  width:fit-content;
  margin-inline:auto;
  aspect-ratio:1024/641 ;
}
.facility__map img{
  height:auto;
}
.facility__map > [class*="btn"]{
  position: absolute;
  translate:-50% -50%;
}
.facility__map > [class*="btn"] img:hover{
  filter:brightness(1.1) drop-shadow( 0 0 10px rgb(255, 217, 1));
}
.abtn01{
  width:min(120px,16%);
  left: 89%;
  top: 27%;
}
.abtn02{
  width:min(124px,17%);
  left: 4%;
  top: 33%;
}
.abtn03{
  width:min(82px,13%);
  left: 50%;
  top: 95%;
}
.abtn04{
  width:min(136px,18%);
  left: 65%;
  top: 43%;
}
.abtn05{
  width:min(99px,14%);
  left: 58%;
  top: 26%;
}
.abtn06{
  width:min(99px,14%);
  left: 41.7%;
  top: 23%;
}
.abtn07{
  width:min(106px,15%);
  left: 42%;
  top: 43%;
}
.abtn08{
  width:min(99px,14%);
  left: 37%;
  top: 55%;
}
.abtn09{
  width:min(99px,14%);
  left: 60.5%;
  top: 68%;
}
.abtn10{
  width:min(100px,14%);
  left: 72%;
  top: 65.5%;
}
.abtn11{
  width:min(120px,16%);
  left: 17%;
  top: 81.5%;
}

.abtn12{
  width:min(119px,16%);
  left: 55%;
  top: 36%;
}
.abtn13{
  width:min(119px,16%);
  left: 10%;
  top: 89.5%;
}

.ebtn01{
  width:min(120px,17%);
  left: 48%;
  top: 68%;
}
.ebtn02{
  width:min(162px,22%);
  left: 34%;
  top: 13%;
}
.ebtn03{
  width:min(99px,14%);
  left: 48%;
  top: 33%;
}
.ebtn04{
  width:min(109px,16%);
  left: 48.5%;
  top: 57%;
}
.ebtn05{
  width:min(99px,14%);
  left: 28%;
  top: 30%;
}
.ebtn06{
  width:min(99px,14%);
  left: 12.5%;
  top: 33%;
}
.ebtn07{
  width:min(100px,15%);
  left: 13%;
  top: 69.5%;
}
.ebtn08{
  width:min(214px,28%);
  left: 30%;
  top: 50%;
}





[data-modal] {
  cursor: pointer;
}

/* モーダルの基本スタイル */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

@media screen and (max-width: 960px) {
  .modal {
    width: 90%;
  }
}
/* 背景のオーバーレイ */
.overlay {
  display: none; /* 初期状態で非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* モーダルの表示時に使うクラス */
.modal.show,
.overlay.show {
  display: block;
}

.modal {
  background-color: hsl(0, 0%, 100%);
  padding-block: clamp(1.125rem, 0.5rem + 2.67vw, 2.5rem);
  padding-inline: clamp(1rem, 0.55rem + 1.94vw, 2rem);
}
.modal__flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-block-end: 1rem;
  gap: 1.5rem;
}
@media screen and (max-width: 768px) {
  .modal__flex {
    flex-direction: column;
  }
}
.modal__h3 {
  color: hsl(26, 54%, 25%);
  font-size: clamp(1rem, 0.77rem + 0.97vw, 1.5rem);
  padding-block-end: 2px;
  margin-block-end: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 4px solid #3cb134;
  margin-inline: auto;
  font-weight: 600;
  padding: .5rem;
}
.modal__h3 span {
  width: 2rem;
  aspect-ratio: 1/1;
  display: block;
  color: hsl(0, 0%, 100%);
  background-color: hsl(26, 54%, 25%);
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

#map_A1 .cls-1,
#map_A1 .cls-2,
#map_A1 .cls-3,
#map_A1 .cls-4,
#map_A1 .cls-5 {
  fill: none;
}

#map_A1 .cls-1,
#map_A1 .cls-12,
#map_A1 .cls-3,
#map_A1 .cls-4,
#map_A1 .cls-5,
#map_A1 .cls-6,
#map_A1 .cls-7 {
  stroke: #643c1e;
}

#map_A1 .cls-1 {
  stroke-width: 1.53px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map_A1 .cls-17,
#map_A1 .cls-18,
#map_A1 .cls-2,
#map_A1 .cls-21,
#map_A1 .cls-22,
#map_A1 .cls-23,
#map_A1 .cls-25,
#map_A1 .cls-26,
#map_A1 .cls-28,
#map_A1 .cls-29,
#map_A1 .cls-30,
#map_A1 .cls-33,
#map_A1 .cls-35,
#map_A1 .cls-36,
#map_A1 .cls-37,
#map_A1 .cls-38,
#map_A1 .cls-39,
#map_A1 .cls-40,
#map_A1 .cls-43,
#map_A1 .cls-44,
#map_A1 .cls-45,
#map_A1 .cls-47,
#map_A1 .cls-48,
#map_A1 .cls-49,
#map_A1 .cls-50,
#map_A1 .cls-51,
#map_A1 .cls-52,
#map_A1 .cls-53,
#map_A1 .cls-54,
#map_A1 .cls-55,
#map_A1 .cls-56,
#map_A1 .cls-58 {
  stroke-width: 0;
}

#map_A1 .cls-6 {
  fill: #eae4d1;
}

#map_A1 .cls-12,
#map_A1 .cls-3,
#map_A1 .cls-4,
#map_A1 .cls-5,
#map_A1 .cls-6,
#map_A1 .cls-7 {
  stroke-miterlimit: 10;
}

#map_A1 .cls-12,
#map_A1 .cls-4,
#map_A1 .cls-6,
#map_A1 .cls-7 {
  stroke-width: 2px;
}

#map_A1 .cls-51,
#map_A1 .cls-7 {
  fill: #fff;
}

#map_A1 .cls-12 {
  fill: #f9d3e3;
}

#map_A1 .cls-3 {
  stroke-width: 5px;
}

#map_A1 .cls-54 {
  fill: #fcf15a;
}

#map_A1 .cls-17 {
  fill-rule: evenodd;
  fill: #7dc062;
}

#map_A1 .cls-63 {
  mix-blend-mode: multiply;
  opacity: 0.35;
}

#map_A1 .cls-18 {
  fill: #539a35;
}

#map_A1 .cls-21 {
  fill: #2b883a;
}

#map_A1 .cls-22 {
  fill: #594b29;
}

#map_A1 .cls-23 {
  fill: #643c1e;
}

#map_A1 .cls-25 {
  fill: #9a8026;
}

#map_A1 .cls-26 {
  fill: #88b328;
}

#map_A1 .cls-28 {
  fill: #2e7919;
}

#map_A1 .cls-29 {
  fill: #3e8c46;
}

#map_A1 .cls-30 {
  fill: #254e97;
}

#map_A1 .cls-33 {
  fill: #c4d473;
}

#map_A1 .cls-35 {
  fill: #dbdcdc;
}

#map_A1 .cls-36 {
  fill: #aacc03;
}

#map_A1 .cls-37 {
  fill: #b28146;
}

#map_A1 .cls-38 {
  fill: #d1151a;
}

#map_A1 .cls-39 {
  fill: #ceda00;
}

#map_A1 .cls-40 {
  fill: #2f763e;
}

#map_A1 .cls-43 {
  fill: #7d4697;
}

#map_A1 .cls-44 {
  fill: #8b7e46;
}

#map_A1 .cls-45 {
  fill: #946134;
}

#map_A1 .cls-47 {
  fill: #8264a8;
}

#map_A1 .cls-48 {
  fill: #826026;
}

#map_A1 .cls-49 {
  fill: #64a000;
}

#map_A1 .cls-50 {
  fill: #fffccc;
}

#map_A1 .cls-52 {
  fill: #fff500;
}

#map_A1 .cls-53 {
  fill: #e64119;
}

#map_A1 .cls-55 {
  fill: #edca89;
}

#map_A1 .cls-56 {
  fill: #fbf7b8;
}

#map_A1 .cls-58 {
  fill: #ebefa7;
}

#map_A2 .cls-1,
#map_A2 .cls-2,
#map_A2 .cls-3,
#map_A2 .cls-4,
#map_A2 .cls-5 {
  fill: none;
}

#map_A2 .cls-1,
#map_A2 .cls-3,
#map_A2 .cls-4,
#map_A2 .cls-5,
#map_A2 .cls-6 {
  stroke: #643c1e;
}

#map_A2 .cls-1 {
  stroke-width: 1.53px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map_A2 .cls-10,
#map_A2 .cls-11,
#map_A2 .cls-12,
#map_A2 .cls-13,
#map_A2 .cls-15,
#map_A2 .cls-16,
#map_A2 .cls-17,
#map_A2 .cls-2 {
  stroke-width: 0;
}

#map_A2 .cls-6 {
  fill: #eae4d1;
}

#map_A2 .cls-3,
#map_A2 .cls-4,
#map_A2 .cls-5,
#map_A2 .cls-6 {
  stroke-miterlimit: 10;
}

#map_A2 .cls-4,
#map_A2 .cls-6 {
  stroke-width: 2px;
}

#map_A2 .cls-3 {
  stroke-width: 5px;
}

#map_A2 .cls-17 {
  fill: #fcf15a;
}

#map_A2 .cls-10 {
  fill: #643c1e;
}

#map_A2 .cls-11 {
  fill: #254e97;
}

#map_A2 .cls-12 {
  fill: #dbdcdc;
}

#map_A2 .cls-13 {
  fill: #d1151a;
}

#map_A2 .cls-15 {
  fill: #fff;
}

#map_A2 .cls-16 {
  fill: #fff500;
}

#map_B1 .cls-1,
#map_B1 .cls-2,
#map_B1 .cls-3,
#map_B1 .cls-4,
#map_B1 .cls-5 {
  fill: none;
}

#map_B1 .cls-1,
#map_B1 .cls-3,
#map_B1 .cls-4,
#map_B1 .cls-5 {
  stroke: #643c1e;
}

#map_B1 .cls-1 {
  stroke-width: 1.53px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map_B1 .cls-15,
#map_B1 .cls-17,
#map_B1 .cls-2,
#map_B1 .cls-20,
#map_B1 .cls-21,
#map_B1 .cls-22,
#map_B1 .cls-23,
#map_B1 .cls-24,
#map_B1 .cls-25,
#map_B1 .cls-28,
#map_B1 .cls-29,
#map_B1 .cls-30,
#map_B1 .cls-31,
#map_B1 .cls-32,
#map_B1 .cls-33,
#map_B1 .cls-35,
#map_B1 .cls-36,
#map_B1 .cls-39,
#map_B1 .cls-40,
#map_B1 .cls-42,
#map_B1 .cls-44,
#map_B1 .cls-45,
#map_B1 .cls-46 {
  stroke-width: 0;
}

#map_B1 .cls-15,
#map_B1 .cls-49 {
  mix-blend-mode: multiply;
  opacity: 0.35;
}

#map_B1 .cls-15,
#map_B1 .cls-20 {
  fill: #5aa551;
}

#map_B1 .cls-3,
#map_B1 .cls-4,
#map_B1 .cls-5 {
  stroke-miterlimit: 10;
}

#map_B1 .cls-4 {
  stroke-width: 2px;
}

#map_B1 .cls-42 {
  fill: #fff;
}

#map_B1 .cls-3 {
  stroke-width: 5px;
}

#map_B1 .cls-46 {
  fill: #fcf15a;
}

#map_B1 .cls-17 {
  fill-rule: evenodd;
  fill: #7dc062;
}

#map_B1 .cls-21 {
  fill: #643c1e;
}

#map_B1 .cls-22 {
  fill: #54803d;
}

#map_B1 .cls-23 {
  fill: #2e7919;
}

#map_B1 .cls-24 {
  fill: #254e97;
}

#map_B1 .cls-25 {
  fill: #c7858a;
}

#map_B1 .cls-28 {
  fill: #dbdcdc;
}

#map_B1 .cls-29 {
  fill: #b5161d;
}

#map_B1 .cls-30 {
  fill: #b28146;
}

#map_B1 .cls-31 {
  fill: #a5cc35;
}

#map_B1 .cls-32 {
  fill: #a7c127;
}

#map_B1 .cls-33 {
  fill: #d1151a;
}

#map_B1 .cls-35 {
  fill: #98764c;
}

#map_B1 .cls-36 {
  fill: #925c24;
}

#map_B1 .cls-39 {
  fill: #f3c987;
}

#map_B1 .cls-40 {
  fill: #fff251;
}

#map_B1 .cls-44 {
  fill: #fff500;
}

#map_B1 .cls-45 {
  fill: #e5ba5c;
}

#map_B2 .cls-1,
#map_B2 .cls-4,
#map_B2 .cls-5 {
  fill: none;
}

#map_B2 .cls-1,
#map_B2 .cls-4,
#map_B2 .cls-5,
#map_B2 .cls-6 {
  stroke: #643c1e;
}

#map_B2 .cls-1 {
  stroke-width: 1.53px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map_B2 .cls-10,
#map_B2 .cls-11,
#map_B2 .cls-12,
#map_B2 .cls-13,
#map_B2 .cls-14,
#map_B2 .cls-9 {
  stroke-width: 0;
}

#map_B2 .cls-6 {
  fill: #eae4d1;
}

#map_B2 .cls-4,
#map_B2 .cls-5,
#map_B2 .cls-6 {
  stroke-miterlimit: 10;
}

#map_B2 .cls-4,
#map_B2 .cls-6 {
  stroke-width: 2px;
}

#map_B2 .cls-14 {
  fill: #fcf15a;
}

#map_B2 .cls-9 {
  fill: #643c1e;
}

#map_B2 .cls-10 {
  fill: #254e97;
}

#map_B2 .cls-11 {
  fill: #dbdcdc;
}

#map_B2 .cls-12 {
  fill: #d1151a;
}

#map_B2 .cls-13 {
  fill: #fff;
}