@charset "utf-8";
/*——————————————————————
base
——————————————————————*/
html{
  font-size: 10px;
}
/*
svg{
  margin-left: auto;
  margin-right: auto;
  display: block;   
}
*/

.main_map {
  position: relative;
  object-fit: cover;
  width: 100%;
  text-align: center;
}

.main_map._01 {
  height: 100%;
  /*
  height: 90rem;
  */
  overflow: scroll;
}


.sub_pic._04{
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}





.maps-hover{
  transition: .4s;
}

.maps-hover:hover{
  opacity: .2;
}


.mi-map{
  display: flex;
  flex-flow: column;
  overflow: scroll;
}



.title-first._01{
  position: fixed;
  top: 18.4rem;
  width: 100%;
  /*padding: 0 0 2rem 0;
  background: rgba(255, 255, 255, 0.8);*/
}

.title-2{
  justify-content: center;
}

.iconss{
  position: fixed;
  bottom: 4rem;
  left: 4rem;
  /*width: 100%;*/
  height: auto;
}

.iconss img{
  width: 70rem;
}

.title-first .iconss img{
  width: 69.5rem;
  height: auto;
}




/*——————————————————————
————————————————————————
ポップアップサイドメニュー
————————————————————————
——————————————————————*/

.position{
  position: absolute;
}

.side_open{
  position: fixed;
  visibility: hidden;
  width: 32rem;
  /*height: 48rem;*/
  background: rgba(255, 255, 255, 1.0);
  padding: 3rem;
  text-align: left;
  bottom: 12rem;
  right: -32rem;
  transition: .4s;
}

.side_open.open,.close_modal.open{
  visibility: visible;
  right: -1rem;
  transition: .4s ease-out;
}


.side_open_a{
  font-weight: 600;
}


.sea-kinds-ti{
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.sea-kinds-ti img{
  width: 4.1rem;
  height: auto;
}

.sab-titles{
  font-size: 1.4rem;
  padding-top: 2rem;
}

.seals{
  font-size: 1.6rem;
  padding: 1rem 0;
}

.sea-menu{
  padding: 1rem 0;
}

/*————————————————————————
カラーバリエーション———罫線
————————————————————————*/

.side_open._01{
  border:solid rgba(249, 193, 88, 1.0) 2px;
  border-radius: 2.2rem 0 0 2.2rem;
}

.side_open._02{
  border:solid rgba(241, 157, 174, 1.0) 2px;
  border-radius: 2.2rem 0 0 2.2rem;
}

.side_open._03{
  border:solid rgba(101, 170, 221, 1.0) 2px;
  border-radius: 2.2rem 0 0 2.2rem;
}

.side_open._04{
  border:solid rgba(102, 188, 123, 1.0) 2px;
  border-radius: 2.2rem 0 0 2.2rem;
}

.side_open._05{
  border:solid rgba(205, 171, 123, 1.0) 2px;
  border-radius: 2.2rem 0 0 2.2rem;
}




.seals li a{
  color: rgba(0, 143, 211, 1.0);
  border-bottom: solid rgba(0, 143, 211, 1.0)1px;
}

/*————————————————————————
カラーバリエーション———●
————————————————————————*/

.seals._01 li span{
  color: rgba(249, 193, 88, 1.0);
}

.seals._02 li span{
  color: rgba(241, 157, 174, 1.0);
}

.seals._03 li span{
  color: rgba(101, 170, 221, 1.0);
}

.seals._04 li span{
  color: rgba(102, 188, 123, 1.0);
}

.seals._05 li span{
  color: rgba(205, 171, 123, 1.0);
}



.close_modal{
  position: absolute;
  display: block;
  width: 100%;
  bottom: 2rem;
  left: 10rem;
  cursor: pointer;
}

.close_modal p{
  font-size: 1.4rem;
  padding-top: 0.5rem;
  padding-right: 3rem;
}


.list-closs-01,.list-closs-02{
  display: inline-block;
  position: absolute;
  top: 1.4rem;
  left: -3rem;
  width: 2.8rem;
  height: 1px;
  background-color: #3E3E3E;
}

.list-closs-01{
  transform: rotate(30deg);
}
.list-closs-02{
  transform: rotate(-30deg);
}
/*
.slide{display:none;}
.active{display:block;}*/


/*——————————————————————
————————————————————————
全体設定
————————————————————————
——————————————————————*/

.cls-1, .cls-203, .cls-212, .cls-215, .cls-216, .cls-217, .cls-218, .cls-219, .cls-228, .cls-249 {
  fill: none;
}

.cls-10, .cls-2, .cls-4, .cls-6, .cls-8 {
  fill: #c7c1ca;
}

.cls-3, .cls-9 {
  fill: #d7d3d9;
}

.cls-103, .cls-113, .cls-124, .cls-13, .cls-23, .cls-3, .cls-33, .cls-43, .cls-53, .cls-63, .cls-73, .cls-83, .cls-93 {
  opacity: 0.77;
}

.cls-104, .cls-114, .cls-125, .cls-14, .cls-24, .cls-34, .cls-4, .cls-44, .cls-54, .cls-64, .cls-74, .cls-84, .cls-94 {
  opacity: 0.41;
}

.cls-5 {
  fill: #d9d5db;
}

.cls-105, .cls-115, .cls-126, .cls-15, .cls-25, .cls-35, .cls-45, .cls-5, .cls-55, .cls-65, .cls-75, .cls-85, .cls-95 {
  opacity: 0.78;
}

.cls-106, .cls-116, .cls-127, .cls-16, .cls-161, .cls-26, .cls-36, .cls-46, .cls-56, .cls-6, .cls-66, .cls-76, .cls-86, .cls-96 {
  opacity: 0.4;
}

.cls-7 {
  fill: #efedf0;
}

.cls-108, .cls-118, .cls-129, .cls-18, .cls-28, .cls-38, .cls-48, .cls-58, .cls-68, .cls-78, .cls-8, .cls-88, .cls-98 {
  opacity: 0.82;
}

.cls-10, .cls-100, .cls-110, .cls-120, .cls-131, .cls-20, .cls-30, .cls-40, .cls-50, .cls-60, .cls-70, .cls-80, .cls-90 {
  opacity: 0.39;
}

.cls-11 {
  fill: #e6e4e8;
}

.cls-12, .cls-14, .cls-16, .cls-18, .cls-20 {
  fill: #6e5c42;
}

.cls-13, .cls-19 {
  fill: #92826d;
}

.cls-15 {
  fill: #968772;
}

.cls-17 {
  fill: #d1c9bd;
}

.cls-21 {
  fill: #b8ac9c;
}

.cls-22, .cls-24, .cls-26, .cls-28, .cls-30 {
  fill: #f8c480;
}

.cls-23, .cls-29 {
  fill: #fad5a5;
}

.cls-25 {
  fill: #fbd7aa;
}

.cls-27 {
  fill: #fdeeda;
}

.cls-31 {
  fill: #fce5c7;
}

.cls-32, .cls-34, .cls-36, .cls-38, .cls-40 {
  fill: #c6b292;
}

.cls-33, .cls-39 {
  fill: #d4c5ae;
}

.cls-35 {
  fill: #d6c8b2;
}

.cls-37 {
  fill: #ede7dd;
}

.cls-41 {
  fill: #e3d9ca;
}

.cls-42, .cls-44, .cls-46, .cls-48, .cls-50 {
  fill: #678bc7;
}

.cls-43, .cls-49 {
  fill: #7c98ce;
}

.cls-45 {
  fill: #8ba3d3;
}

.cls-47 {
  fill: #d3daee;
}

.cls-51 {
  fill: #bac6e5;
}

.cls-52, .cls-54, .cls-56, .cls-58, .cls-60 {
  fill: #f5b585;
}

.cls-53, .cls-59 {
  fill: #f8c7a1;
}

.cls-55 {
  fill: #f8c9a4;
}

.cls-57 {
  fill: #fce6d5;
}

.cls-61 {
  fill: #fadac0;
}

.cls-62, .cls-64, .cls-66, .cls-68, .cls-70 {
  fill: #e9523c;
}

.cls-63, .cls-69 {
  fill: #ed7f62;
}

.cls-65 {
  fill: #ee8367;
}

.cls-67 {
  fill: #f8cab7;
}

.cls-71 {
  fill: #f4ad93;
}

.cls-72, .cls-74, .cls-76, .cls-78, .cls-80 {
  fill: #ed7d6a;
}

.cls-73, .cls-79 {
  fill: #f19d8a;
}

.cls-75 {
  fill: #f2a18e;
}

.cls-77 {
  fill: #f9d5ca;
}

.cls-81 {
  fill: #f6c0b0;
}

.cls-82, .cls-84, .cls-86, .cls-88, .cls-90 {
  fill: #f08c00;
}

.cls-83, .cls-89 {
  fill: #f39b25;
}

.cls-85 {
  fill: #f4a742;
}

.cls-87 {
  fill: #fbddb6;
}

.cls-91 {
  fill: #f9ca8c;
}

.cls-100, .cls-92, .cls-94, .cls-96, .cls-98 {
  fill: #383239;
}

.cls-93, .cls-99 {
  fill: #706c73;
}

.cls-95 {
  fill: #78747a;
}

.cls-97 {
  fill: #c2c0c4;
}

.cls-101 {
  fill: #a3a1a6;
}

.cls-102, .cls-104, .cls-106, .cls-108, .cls-110 {
  fill: #65b6cc;
}

.cls-103, .cls-109 {
  fill: #99ccdb;
}

.cls-105 {
  fill: #a0cfdd;
}

.cls-107 {
  fill: #d5e9f0;
}

.cls-111 {
  fill: #c0dfe9;
}

.cls-112, .cls-114, .cls-116, .cls-118, .cls-120 {
  fill: #6e6b71;
}

.cls-113, .cls-119 {
  fill: #97949a;
}

.cls-115 {
  fill: #9d9aa0;
}

.cls-117 {
  fill: #d3d2d5;
}

.cls-121 {
  fill: #bdbbbf;
}

.cls-122, .cls-187 {
  fill: #fff;
}

.cls-123, .cls-125, .cls-127, .cls-129, .cls-131 {
  fill: #87d0f4;
}

.cls-124, .cls-130 {
  fill: #bee4f8;
}

.cls-126 {
  fill: #c6e7f9;
}

.cls-128 {
  fill: #e9f5fc;
}

.cls-132 {
  fill: #ddf0fb;
}

.cls-133 {
  isolation: isolate;
}

.cls-134 {
  fill: #e1edcc;
}

.cls-135 {
  fill: #90bb82;
}

.cls-136 {
  fill: #ceba8f;
}

.cls-137 {
  fill: #e6d6ac;
}

.cls-138 {
  fill: #c5e6f0;
}

.cls-139 {
  fill: #dadade;
}

.cls-140 {
  clip-path: url(#clip-path);
}

.cls-141, .cls-161 {
  fill: #f7f8f8;
}

.cls-142 {
  fill: #a6a2a0;
}

.cls-143 {
  fill: #c6c3c1;
}

.cls-144 {
  fill: url(#名称未設定グラデーション_66);
}

.cls-145 {
  clip-path: url(#clip-path-2);
}

.cls-146 {
  fill: #d1e3f1;
}

.cls-147 {
  fill: #ddd0b2;
}

.cls-148 {
  fill: #e2e2dd;
}

.cls-149 {
  fill: #c5c8c8;
}

.cls-150 {
  fill: #eeeeeb;
}

.cls-151 {
  fill: #bbb;
}

.cls-152 {
  fill: #ea545c;
}

.cls-153 {
  fill: #a3cfad;
}

.cls-154 {
  fill: #b6d9be;
}

.cls-155 {
  fill: #c0bfbf;
}

.cls-156 {
  fill: #b5b5b5;
}

.cls-157 {
  fill: #c6c5c5;
}

.cls-158 {
  fill: #9d9f9f;
}

.cls-159, .cls-160 {
  fill: #dbeefa;
}

.cls-160 {
  opacity: 0.8;
}

.cls-162 {
  fill: #c5e0ed;
}

.cls-163 {
  fill: #f0937e;
}

.cls-164 {
  fill: #fdd73c;
}

.cls-165 {
  fill: url(#Unnamed_Pattern_48);
}

.cls-166 {
  fill: #def1fb;
}

.cls-167 {
  fill: #3d3939;
}

.cls-167, .cls-169, .cls-173, .cls-179, .cls-197, .cls-200 {
  mix-blend-mode: multiply;
}

.cls-168 {
  fill: url(#Unnamed_Pattern_47);
}

.cls-169 {
  fill: #777e80;
}

.cls-170 {
  fill: url(#Unnamed_Pattern_28);
}

.cls-171 {
  fill: url(#Unnamed_Pattern_43);
}

.cls-172 {
  fill: #e6852a;
}

.cls-173 {
  fill: #596466;
}

.cls-174 {
  fill: url(#Unnamed_Pattern_34);
}

.cls-175 {
  fill: #f7c6ae;
}

.cls-176 {
  fill: url(#Unnamed_Pattern_33);
}

.cls-177 {
  fill: #c94012;
}

.cls-178 {
  fill: url(#Unnamed_Pattern_30);
}

.cls-179, .cls-183 {
  fill: #717171;
}

.cls-180 {
  fill: url(#Unnamed_Pattern_31);
}

.cls-181 {
  opacity: 0.45;
  fill: url(#Unnamed_Pattern_49);
}

.cls-182 {
  fill: url(#Unnamed_Pattern_27);
}

.cls-184 {
  fill: url(#Unnamed_Pattern_29);
}

.cls-185 {
  fill: url(#Unnamed_Pattern_6);
}

.cls-186, .cls-189, .cls-191, .cls-193, .cls-195, .cls-260, .cls-262, .cls-272, .cls-274 {
  opacity: 0.56;
}

.cls-186 {
  fill: url(#Unnamed_Pattern_49-3);
}

.cls-187 {
  opacity: 0.63;
}

.cls-188 {
  fill: url(#Unnamed_Pattern_6-3);
}

.cls-189 {
  fill: url(#Unnamed_Pattern_49-5);
}

.cls-190 {
  fill: url(#Unnamed_Pattern_6-5);
}

.cls-191 {
  fill: url(#Unnamed_Pattern_49-7);
}

.cls-192 {
  fill: url(#Unnamed_Pattern_6-7);
}

.cls-193 {
  fill: url(#Unnamed_Pattern_49-9);
}

.cls-194 {
  fill: url(#Unnamed_Pattern_6-9);
}

.cls-195 {
  fill: url(#Unnamed_Pattern_49-11);
}

.cls-196 {
  fill: url(#Unnamed_Pattern_34-3);
}

.cls-197 {
  fill: #717071;
}

.cls-198 {
  fill: url(#Unnamed_Pattern_46);
}

.cls-199 {
  fill: url(#Unnamed_Pattern);
}

.cls-200 {
  fill: #595757;
}

.cls-201 {
  fill: #78b4f0;
}

.cls-202 {
  fill: #ed6d1f;
}

.cls-203, .cls-215, .cls-216, .cls-217, .cls-218, .cls-219 {
  stroke: #ed6d1f;
  stroke-width: 3.01px;
}

.cls-203, .cls-215, .cls-216, .cls-217, .cls-218, .cls-219, .cls-249 {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cls-203 {
  stroke-dasharray: 0 6.27;
}

.cls-204 {
  fill: #fccf4d;
}

.cls-205 {
  fill: #403824;
}

.cls-206 {
  fill: #458947;
}

.cls-207 {
  fill: #8e6859;
}

.cls-208, .cls-209 {
  fill: #1f96ce;
}

.cls-209 {
  fill-rule: evenodd;
}

.cls-210 {
  fill: #ed705e;
}

.cls-211, .cls-239 {
  fill: #65aadd;
}

.cls-212, .cls-221, .cls-228, .cls-233, .cls-239, .cls-243, .cls-249, .cls-251 {
  stroke: #fff;
}

.cls-212, .cls-221, .cls-228, .cls-233, .cls-239, .cls-243, .cls-251 {
  stroke-miterlimit: 10;
}

.cls-212 {
  stroke-width: 0.51px;
}

.cls-213 {
  fill: #fff465;
}

.cls-214 {
  fill: #fffffe;
}

.cls-216 {
  stroke-dasharray: 0 6.06;
}

.cls-217 {
  stroke-dasharray: 0 5.99;
}

.cls-218 {
  stroke-dasharray: 0 6.32;
}

.cls-219 {
  stroke-dasharray: 0 6.57;
}

.cls-220, .cls-221 {
  fill: #eea252;
}

.cls-221, .cls-233, .cls-239, .cls-243, .cls-251 {
  stroke-width: 1.6px;
}

.cls-222 {
  clip-path: url(#clip-path-3);
}

.cls-223 {
  clip-path: url(#clip-path-4);
}

.cls-224 {
  fill: #d4d1e8;
}

.cls-225 {
  clip-path: url(#clip-path-5);
}

.cls-226 {
  fill: #f3994f;
}

.cls-227 {
  fill: #f092b5;
}

.cls-228 {
  stroke-width: 0.51px;
}

.cls-229 {
  fill: #5cbea8;
}

.cls-230 {
  fill: #bad0ae;
}

.cls-231 {
  clip-path: url(#clip-path-6);
}

.cls-232, .cls-233 {
  fill: #cdab7b;
}

.cls-234 {
  clip-path: url(#clip-path-7);
}

.cls-235 {
  fill: #bedbe8;
}

.cls-236 {
  fill: #95afbc;
}

.cls-237 {
  fill: #bebdbc;
}

.cls-238 {
  fill: #a7a9aa;
}

.cls-240 {
  clip-path: url(#clip-path-8);
}

.cls-241 {
  fill: #727171;
}

.cls-242, .cls-243 {
  fill: #f19dae;
}

.cls-244 {
  clip-path: url(#clip-path-9);
}

.cls-245 {
  clip-path: url(#clip-path-10);
}

.cls-246 {
  fill: #b9b9b8;
}

.cls-247 {
  clip-path: url(#clip-path-12);
}

.cls-248 {
  fill: #ea512c;
}

.cls-249 {
  stroke-width: 2.51px;
}

.cls-250, .cls-251 {
  fill: #66bc7b;
}

.cls-252 {
  clip-path: url(#clip-path-13);
}

.cls-253 {
  fill: #d0e8f9;
}

.cls-254 {
  clip-path: url(#clip-path-14);
}

.cls-255 {
  clip-path: url(#clip-path-15);
}

.cls-256 {
  clip-path: url(#clip-path-16);
}

.cls-257 {
  fill: url(#Unnamed_Pattern_48-7);
}

.cls-258 {
  fill: url(#Unnamed_Pattern_47-7);
}

.cls-259 {
  fill: url(#Unnamed_Pattern_6-11);
}

.cls-260 {
  fill: url(#Unnamed_Pattern_49-13);
}

.cls-261 {
  fill: url(#Unnamed_Pattern_6-13);
}

.cls-262 {
  fill: url(#Unnamed_Pattern_49-15);
}

.cls-263 {
  fill: url(#Unnamed_Pattern_34-5);
}

.cls-264 {
  clip-path: url(#clip-path-17);
}

.cls-265 {
  clip-path: url(#clip-path-18);
}

.cls-266 {
  clip-path: url(#clip-path-19);
}

.cls-267 {
  clip-path: url(#clip-path-20);
}

.cls-268 {
  clip-path: url(#clip-path-21);
}

.cls-269 {
  clip-path: url(#clip-path-22);
}

.cls-270 {
  fill: url(#Unnamed_Pattern_47-13);
}

.cls-271 {
  fill: url(#Unnamed_Pattern_6-15);
}

.cls-272 {
  fill: url(#Unnamed_Pattern_49-17);
}

.cls-273 {
  fill: url(#Unnamed_Pattern_6-17);
}

.cls-274 {
  fill: url(#Unnamed_Pattern_49-19);
}

.cls-275 {
  clip-path: url(#clip-path-23);
}

/*——————————————————————
————————————————————————
ここから下層ページ
————————————————————————
——————————————————————*/

/*——————————————————————
————————————————————————
生き物紹介エリア
————————————————————————
——————————————————————*/
.ikimono-syokai{
  justify-content: space-between;
  /*width: 104rem;*/
}

.side_a{
  width: 32rem;
}

.side_a img{
  width: 100%;
  height: auto;
  padding-right: 8.8rem;
}

.side_b{
  width: 68.3rem;
}

.sea-kinds-na{
  font-size: 2.6rem;
  font-weight: 600;
}

.sea-kinds-mo{
  font-size: 1.6rem;
  line-height: 2.8rem;
}


.explanation{
  font-size: 1.8rem;
  line-height: 3rem;
}

.explanationss{
  width: 10.8rem;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  padding: 0.4rem 1rem;
  background: rgba(58, 109, 173, 1.0);
  border-radius: 2rem;
  margin-right: 1rem;
}

.explanationss._s{
  padding: 3.6rem 1rem;
}

.buttonss{
  justify-content: center;
}

.itemss._s{
  margin: 0;
  margin: 2rem;
}

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

.sea_animal{
  display: flex;
  justify-content: center;
}

.sea_animal img{
  width: 29.8rem;
  height: 29.8rem;
}




@media screen and (max-width:1075px){
  html {
    font-size: 50%;
  }
  .br-sp{
    display: block;
  }
}


@media screen and (max-width:767px){

  html {
    font-size: 50%;
  }

  
  /*
  .main_map._01{
    position: absolute;
    top: 0;
  }
  */

  .title-first._01{
    top: 0rem;
  }
  
  .title-first._01{
    padding: 10rem 0 2rem 0;
  }

  /*=============================
  マップアイコン
  =============================*/
  
  .iconsss{
    /*
    position: absolute;
    top: 16rem;
    */
    margin-top: 1rem;
    text-align: center;
    left: 1.6rem;
    background: rgba(58, 109, 173, 1.0);
    padding: 1rem;
    width: 12rem;
    border-radius: 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1.0);
    transition: all .5s ease;
  }
  

  .iconsss.close{
    border-radius: 0.6rem 0.6rem 0 0;
  }

  
  .box{
    position: absolute;
    display: none;/*はじめは非表示*/
    top: 7.8rem;
    width: 12rem;
    background: #ffffff;
    overflow-y: scroll;
    padding: 1.6rem;
    left: 0.4rem;
    border: solid rgba(0, 143, 211, 1.0);
    border-radius: 0 0 0.8rem 0.8rem;
  }

  .box img{
  width: 8.2rem;
  height: auto;
  margin-right: 0.6rem;
  }

  .side_open{
    right: 0;
    bottom: -40rem;
  }

  .side_open.open{
    right: 0;
    bottom: -1rem;
  }

  .side_open{
    width: 100%;
  }

  .seals{
    display: flex;
    flex-wrap: wrap;
  }
  .sea-menu{
    padding: 1rem;
  }

  .side_open._01,.side_open._02,.side_open._03,.side_open._04,.side_open._05{
    border-radius: 2.2rem 2.2rem 0 0 ;
  }

  .ikimono-syokai,.side_b{
    width: 46rem;
    margin: 0 auto;
  }

  .side_a{
    width: 26rem;
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  .side_a img{
    padding-right: 0;
  }

  .br-sp{
    display: none;
  }

  .itemss._s{
    margin: 0;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .close_modal{
    left: 7rem;
  }

}

@media screen and (max-width:597px){
  .display_flex-s.-s{
    /*margin-left: -6rem;*/
    display: block;
  }

  .fs-logo{
    width: 13rem;
    height: 15rem;
  }
  /*
  .title-first._01{
    padding: 10rem 0 0.2rem 0;
  }

  .h2-sub{
    font-size: 3rem;
  }
  
  .sab-ti{
    font-size: 2rem;
  }
  */

  .title-first .sab-ti img{
    width: 3rem;
    margin-right: 0.6rem;
  }

  .space._04._sp{
    display: block;
  }
}

@media screen and (max-width:384px){
  .display_flex-s.-s{
    display: none;
  }
}

/*
@media screen and (max-width:460px){
  .display_flex-s.-s{
    display: none;
  }
}