@charset "UTF-8";


/*--------------深海に潜るページ----------------------*/

.container-dive{
  /*背景グラデーション*/
  width: 100vw;
  background:
  linear-gradient(180deg, rgba(103, 212, 235, 0.8)5%, rgba(43, 152, 199, 1) 14%, rgb(47, 52, 151) 51%, rgb(5, 2, 65));
  background-size: 100%;
}

.h1-dive{
  /*各層の名前（表層、中深層・・）*/
  display: block;
  position: inherit;
  top: 0;
  font-size: 2em;
  text-align: center;
  padding: 20px;
}

.smallFont{
  /*各層の深度「（●ｍ～●ｍ）」*/
  font-size: 0.8em;
}

.br-forSP{
  /*スマホのときだけ改行を入れたい（PCでは入れない）*/
  display: none;
}

.zone{
  /*h1とp（各層の名前と説明文の入ったdiv）*/
  border: 2px dotted #d7d9e0;
  border-radius: 10px;
  width: 90%;
  margin: 20px auto;
  padding: 20px;
  background-color: rgba(17, 23, 64, 0.3);
}

.zone p{
  /*各層の説明文*/
  color: #fff;
  text-align: center;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.6);
}

@media(max-width:1024px){
  /*タブレット版*/
  }
  @media(max-width:560px){
  /*スマホ版*/
  .h1-dive{
    /*各層の名前（表層、中深層・・）*/
    font-size: 1.5em;
    text-align: center;
    padding: 15px;
  }
  .br-forSP{
    /*スマホのときだけ改行する*/
    display: inline;
  }
    }
/*---------------------------------------------*/


/*-----------生き物たちのシルエット--------------*/
.diveWrap{
  /*生き物たちが入ったdiv*/
  padding: 3em;
}
.dive-left{
  /*生き物シルエットの左配置（a+imgを囲ったdiv要素）*/
  text-align: left;
  margin-bottom: 1.5em;
}
.dive-center{
    /*生き物シルエットの中央配置（a+imgを囲ったdiv要素）*/
  text-align: center;
  margin-bottom: 1.5em;
}
.dive-right{
    /*生き物シルエットの右配置（a+imgを囲ったdiv要素）*/
  text-align: right;
  margin-bottom: 1.5em;
}

@media(max-width:1024px){
  /*タブレット版*/
  }
  @media(max-width:560px){
  /*スマホ版*/
    }
/*-----------------------------------------------*/

/*-----------モダール内のimg、p、iframe--------------*/
.dive-photoText{
  text-align: center;
  margin: auto;
}
.dive-photoText h2{
  text-shadow: none;
}
.dive-photoText img{
  display: block;
  margin: auto;
  max-width: 500px;
  padding-bottom: 1em;
}
.dive-photoText iframe{
  display: block;
  margin: auto;
}
.dive-photoText p{
  margin: auto;
  font-weight: bold;
}

@media(max-width:560px){
  /*スマホ版*/
  .dive-photoText img{
    width: 400px;
  }
    }
/*-----------------------------------------------*/