@charset "UTF-8";


/*-----section1（トップ画像部分・h1「館内ガイド」が置いてある場所）-----*/
.sec1-guide{
  /*画像だけ他ページのsection1と異なる*/
  background:linear-gradient(180deg, rgba(19, 25, 122, 0.8) 51%, rgba(3, 11, 16, 0.7) 100%), url(../image/clione.jpg);
}
/*-------------------------------------------*/


/*-----section2～section4（「１F」・「Ｂ１」・「当館の深海生物」全て共通）-----*/
#sec2-guide,
#sec3-guide,
#sec4-guide{
  /*各セクション「1F」「B1」「展示内容」の箱（h2入り）*/
  height: 100%;
  width: 100%;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
}

@media(max-width:1024px){
}
@media(max-width:560px){
  #sec2-guide,
  #sec3-guide,
  #sec4-guide{
  /*各セクション「1F」「B1」「展示内容」の箱（h2入り）*/
    height: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
  }
/*-------------------------------------------*/


/*-----section2（First Floor・「１F」）-----*/

.innerBoxFloor{
  /*ドットボックス*/
  border: 2px dotted #d7d9e0;
  border-radius: 10px;
  width: 90%;
  gap: 1em;
  margin: auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr;
  background-color: rgba(0, 3, 23, 0.4);
}

.floorMap{
  /*1Fのマップ画像単体が入ったdiv*/
  background-color: #d7d9e0;
  background-image: url(../image/map-1F.webp);
  background-position: center;
  background-size:contain;
  width: 95%;
  height: 500px;
  margin: auto;
}
.floorMap.B1{
  /*B1のマップ画像単体が入ったdiv*/
  background-image: url(../image/map-b1.webp);
}

.creature-list{
  /*生き物の名前リスト（ul）*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1em;
  padding: 1em;
  margin: auto;
  width: 100%;
}

.creature-list li{
    /*各名前を均等に表示する*/
  width: 100%;
}
.creature-list li a{
  /*リンクを押すと下部の展示写真に飛ぶ*/
  display: block;
  text-decoration: none;
}


@media(max-width:1024px){
  /*タブレット版*/
  .innerBoxFloor{
    width: 95%;
    padding: 20px;
  }
}
@media(max-width:560px){
  /*スマホ版*/
  .floorMap{
    height: 350px;
  }
  .creature-list{
  grid-template-columns: 1fr 1fr;
}
  }



/*-----section4（Exhibits・「展示内容」）-----*/
.creature-photo-list{
  /*生き物写真リスト（ul）*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3em;
  justify-items: center;
  text-align: center;
}

.creature-photo-list img{
  /*生き物画像*/
  width: 200px;
  height: 200px;
  border-radius: 50vh;
  border: 2px solid #d9d9d9;
}


@media(max-width:1024px){

}
@media(max-width:560px){
  .creature-photo-list{
    grid-template-columns: 1fr 1fr;
  }
  }
/*-------------------------------------------*/