@charset "UTF-8";


/*-----section1（トップ画像部分・h1「深海水族館」が置いてある場所）-----*/
#sec1-index{
  /*画像が他ページのsection1と異なる・HOME画面だけ100vhにしたい*/
  background-image:linear-gradient(
  180deg,
  rgba(19, 25, 122, 0.7) 55%,
  rgba(3, 11, 16, 0.8)),
  url(../image/fish-retouched-2.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
  z-index: 40;
}

@media(max-width:560px){
  #sec1-index{
    height: 500px;
  }
}
/*-------------------------------------------*/


/*-----section2（About・「深海水族館とは」）-----*/
#sec2-index{
  /*Aboutの箱（h2入り）*/
  width: 100%;
  background-position: center;
  background-size: cover;
  padding: 1em;
}

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

#sec2-index .innerBoxIndex img{
  /*水族館の外観写真*/
  border-radius: 10px;
  width: 430px;
  height: 320px;
}

#sec2-index .text{
  /*外観写真（430px）を覗いたwidth幅を文章に適用*/
  width: calc(1150px-430px);
}

#sec2-index .director-name{
  /*館長の名前だけ右寄せ*/
  text-align: right;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
  .innerBoxIndex{
    grid-template-columns: 1fr;
  }

  .innerBoxIndex img{
    /*水族館の外観写真*/
    display: block;
    margin: auto;
  }
}
@media(max-width:560px){
  /*スマホ版*/
  .innerBoxIndex{
    width: 100%;
  }

  #sec2-index .innerBoxIndex img{
    height: 300px;
  }

  #sec2-index .text{
    font-size: 0.8em;
  }
}
/*-------------------------------------------*/


/*-----section3（Topics・「イベント」の一部分抜き出し）-----*/
#sec3-index{
  /*Topicsの箱（h2入り）*/
  height: 100%;
  width: 100%;
  background-size: cover;
  padding:20px 40px;
}

#sec3-index .topic-list{
  /*Topicsのul*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  gap: 1em;
}

#sec3-index .topic-box{
  /*Topics個別のa囲み*/
  width: 90%;
  background-color: rgba(0, 3, 23, 0.5);
  border: 2px dotted #D9D9D9;
  border-radius: 10px;
  padding: 1.5em;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
}

#sec3-index .topic-box img{
  /*Topics個別のイベント画像*/
  border-radius: 10px;
  width: 300px;
  height: 200px;
  margin-bottom: 20px;
}

@media(max-width:1024px){
/*タブレット版*/
#sec3-index{
  /*Topicsの箱（h2入り）*/
  padding:20px;
}

#sec3-index .topic-list{
  /*Topicsのul*/
  grid-template-columns: 1fr;
}

#sec3-index .topic-box p{
  padding-top: 20px
}
}

@media(max-width:560px)
  /*スマホ版*/{

}
/*-------------------------------------------*/


/*-----section4（News・「お知らせ」の一部分抜き出し-----*/
#sec4-index{
  /*Newsの箱（h2入り）*/
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  padding: 20px 40px;
}

#sec4-index .news-list{
  /*Newsのdl*/
  background-color: rgba(0, 3, 23, 0.5);
  width: 90%;
  border: 2px dotted #D9D9D9;
  border-radius: 10px;
  margin: auto;
  padding: 2em;
}

#sec4-index .news-list a{
  display: block;
  padding: 1em;
}
#sec4-index .news-list dt{
  font-size: 1.2em;
}
#sec4-index .news-list dd{
  text-indent: 1em;
  padding-bottom: 0.3em;
}

@media(max-width:560px)
  /*スマホ版*/{
  #sec4-index{
    height: 100%;
    padding: 1em;
  }

  #sec4-index .news-list{
    width: 100%;
    padding: 0.5em;
  }

  #sec4-index .news-list dt{
    font-size: 1em;
  }

  #sec4-index .news-list dd{
    font-size: 0.8em;
  }
}

/*------------------------------------*/


/*---------「一覧を見る」ボタン---------*/
.more-button{
  /*一覧を見るボタン*/
  background-color: rgba(0, 3, 23, 0.4);
  display: block;
  width: 150px;
  height: 150px;
  text-decoration: none;
  text-align: center;
  margin: 3em auto;
  padding:5px 10px;
  border: 1px solid #d7d9e0;
  border-radius: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  .more-button{
    width: 130px;
    height: 130px;
    margin: 1em auto;
    padding: 0;
  }
}
/*------------------------------------*/


/*---------------SNSアイコン----------------*/
.sns-icon{
  /*SNSアイコンが入ってるdiv*/
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
}


.snsWrap{
  /*youtube～X全体を囲む箱*/
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  padding: 40px;
}

.innerBoxSns{
  /*ドットボックス*/
  border: 2px dotted #d7d9e0;
  border-radius: 10px;
  margin: auto;
  padding: 2em;
  background-color: rgba(0, 3, 23, 0.5);
}

.snsList{
  /*youtube対その他（Insta＋Face＋X）*/
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}

@media(max-width:1024px){
}
@media(max-width:560px){
  .snsWrap{
    padding: 10px;
  }
  .innerBoxSns{
    padding: 10px;
  }
}
/*--------------Youtube----------------*/
.snsWrap .yt{
  /*Youtubeのaタグとvideoタグを囲むdiv*/
  position: relative;
  margin: auto;
}

.yt a::after{
  /*videoを囲むaタグの疑似要素「Youtube」ロゴ*/
  content:"";
  display: inline-block;
  width: 150px;
  height: 50px;
  background-image: url(../image/youtube.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video{
  /*youtube動画*/
  object-fit: fill;
  width: 600px;/*動画をレスポンシブ化（videoタグはinline要素だがwidthを指定できる例外）*/
  height:100%;
  border-radius: 10px;
  filter:brightness(60%);
}

@media(max-width:1024px){
}
@media(max-width:560px){
  .yt a{
    display: block;
    width: 400px;
    margin: auto;
  }

  video{
    width: 400px;
  }
}
/*------------------------------------*/

/*--------------その他SNS----------------*/
.in-fb-x{
  /*Instagram＋Facebook＋Twitterを囲むdiv*/
  display: flex;
  gap: 10px;
}
.in-fb-x a{
  /*各SNSアイコンのリンク*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.face img,
.insta img{
  /*facebookとInstagramアイコン画像*/
  width: 30px;
  height: 30px;
}
.snsWrap .in{
  /*Instagram*/
  width: 100%;
  height: 200px;
  background-color: rgba(203, 31, 111,0.6);
  border-radius: 10px;
}
.snsWrap .fb{
  /*Facebook*/
  width: 100%;
  height: 200px;
  background-color: rgba(45, 41, 163, 0.6);
  border-radius: 10px;
}
.snsWrap .x{
  /*X（Twitter）*/
  width: 100%;
  height: 200px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 10px;
}

@media(max-width:1024px){

}
@media(max-width:560px){

}
/*------------------------------------*/