@charset "UTF-8";

/* ----------------------------------------
初期設定用CSS
---------------------------------------- */

html {
  font-size: 16px;
}

body {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.8em;
  color: #d7d9e0;
  cursor: none;
  overflow-x: hidden;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
th,
small {
  font-size: 100%;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

header,
footer,
div,
ul,
li,
h1,
h2,
h3,
nav,
button,
blockquote,
dt,
dd,
figure,
p,
a,
span
section
{
  position: relative;
}

p {
  margin-bottom: 1.3em;
}

p:last-child {
  margin-bottom: 0;
}

a,
label {
  display: inline-block;
  color: #d7d9e0;
}

a:hover {
  color: #cb1f6f;
}

.wrapper {
  max-width: 1000px;
  padding-left: 20px;
  padding-right: 20px;
}

.none{
  display: none;
}

footer{
  color: #d7d9e0;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 300px;
  padding-bottom: 120px;
}
@media(max-width:560px){
  footer{
    padding-bottom: 50px;
  }
}

/*共通CSS（全ページに読み込ませる）*/

/*-----------カーソルの泡--------------*/
#mouse-pointer{
  /*マウスポインターの泡*/
  pointer-events: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(0,0);
  transition: transform 0.1s;
  transition-timing-function: ease-out;
  z-index: 20000;
}

.bubble {
  /*マウスストーカーの泡*/
  position: fixed;
  top: -15px;
  left: -15px;
  width: 15px;
  height: 15px;
  background: url(../image/mouse-bubble-1.webp) 50% 50% no-repeat;
  background-size: contain;
  z-index: 1000;
  animation: bubble 2.5s ease-out 0s forwards;
}

@keyframes bubble {
  0% {
    transform: translateY(0) rotate(-5deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) rotate(5deg);
    opacity: 0;
  }
}


@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  #mouse-pointer{
    /*スマホでマウスポインターは不要*/
    display: none;
  }
  .bubble{
    /*スマホでマウスストーカーは不要*/
    display: none;
  }
}
/*-----------------------------------------*/


/*-------------チケット購入ボタン-------------*/
.ticket{
  /*aタグ*/
  position: fixed;
  top: 15%;
  left: 0;
  display: inline-block;
  align-items: center;
  z-index: 999;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  .ticket img{
    height: 150px;
  }
}
/*------------------------------------------*/


/*-------------上へ戻るボタン-----------------*/
#pageTop a{
  /*丸いアイコン*/
  display: flex;
  justify-content:center;
  align-items:center;
  background-color:#fff;
  border-radius: 50vh;
  /*タップターゲット最低推奨サイズは48(16*3)px×48(16*3)px*/
  width:4rem;
  height: 4rem;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  transition:all 0.3s;
}

#pageTop img{
  /*矢印代わりのクリオネシルエット*/
  width: 50%;
}

#pageTop a:hover{
  /*ホバー時の色（少し暗くする）*/
  background: #777;
}

#pageTop {
  /*リンクを右下に固定*/
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 10000;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(200px);
}

#pageTop.UpMove{
  /*　上に上がる動き　*/
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#pageTop.DownMove{
  /*　下に下がる動き　*/
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(200px);
  }
}


@media(max-width:560px){
  /*スマホ版*/
  #pageTop a{
    /*丸いアイコン*/
    /*タップターゲット最低推奨サイズは48(16*3)px×48(16*3)px*/
    width:3rem;
    height: 3rem;
  }
}
/*------------------------------------------*/


/*----------------上部の動く波---------------*/
#waveCanvas{
  /*動く波（jQueryで動く）*/
  position: absolute;
  z-index: 15;
  bottom: 0;
  left: 0;
  width: 100%;
}
/*------------------------------------------*/


/*-----header（画面下固定・黒色透過アリ）-----*/
header{
  width: 100%;
  height: 5.5em;
  position: fixed;
  z-index: 1000;
  bottom: 0;
}
nav{
  width: 100%;
  background-color: rgba(0,0,0,0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.pc-nav ul{
  /*ナビゲーションメニューを横並びにする*/
  display: flex;
  justify-content: center;
  padding: 1em;
}

.pc-nav li{
  border-left: 0.9px dotted #d7d9e0;
}

.pc-nav li:last-child{
  border-right: 0.9px dotted #d7d9e0;
}

nav li a{
  text-decoration: none;
  padding: 1em 1.5em;
}

nav li .En{
  /*navのサブ英語タイトル*/
  display: block;
  line-height: 1%;
  text-align: center;
  padding-bottom: 1em;
}

.sp-nav{
  /* スマホ用ナビはパソコン・タブレットのとき非表示 */
  display: none;
}
.hamburger-box{
  display: none;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
.pc-nav li a{
  font-size: 75%;
  }
}
@media(max-width:560px){
  /*スマホ版*/
  .pc-nav {
    /*パソコン用ナビはスマホのとき非表示*/
    display: none;
  }
  /*ハンバーガーメニュー（スマホのみ）*/
  .hamburger-box{
    /*TOP右上に配置する*/
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 40;
  }
  #hamburger{
  position: relative;
  display: inline-block;
  width: 36px;
  height: 30px;
  margin: 0 0 0 auto;
}
  #hamburger span {
    /*ハンバーガーメニュー：真ん中の線*/
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: translateY(-50%);
}
  #hamburger::before {
    /*ハンバーガーメニュー：上の線*/
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
  #hamburger::after {
    /*ハンバーガーメニュー：下の線*/
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.sp-nav {
  /*スマホ用ナビゲーションメニュー*/
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, .8);
  transition: all .2s ease-in-out;
  /* ハンバーガーメニューをタップするまではいったん非表示 */
  opacity: 0;/*透明*/
  transform: translateY(-100%);/*かつ画面外に出ている状態*/
}
.sp-nav ul {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  height: 100%;
}
.sp-nav li {
  margin: 0;
  padding: 0;
  text-align: center;
}
.sp-nav li .En {
  color: #fff;
}
.sp-nav li a,
.sp-nav li .En {
  display: block;
  padding: 20px;
}

/*基準となるli要素*/
.sp-nav .close {
  position: relative;
  padding-left: 20px;
}
/*バツ印線1*/
.sp-nav .close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  transform: rotate( 45deg );
}
/*バツ印線2*/
.sp-nav .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  transform: rotate( -45deg );
}
/*jQueryで「.sp-nav」にこの「.toggle」クラスを付け外しする*/
.toggle {
  transform: translateY( 0 );
  opacity: 1;
}
}
/*-----------------------------------------*/

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


/*-----全ページのsection1（トップ画像部分・h1が置いてある場所）-----*/
#sec1-common{
  width: 100vw;
  height: 400px;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  position: relative;
  z-index: 30;
}

@media(max-width:560px){
  /*スマホ版*/
  #sec1-common{
    padding: 10px;
}
}
/*-------------------------------------------*/


/*-----mainコンテンツの背景サイズとグラデーション-----*/
.container{
  /*背景グラデーション*/
  background:linear-gradient(-45deg,#040232,#2b2d92,#2fd1e6);
  background-size: 200%;
  animation: bggradient 20s ease infinite;
  width: 100%;
  position: relative;
}

@keyframes bggradient{
  /*グラデーションの時間変化*/
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

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

}

main{
  max-width: 1280px;
  margin: auto;
}
/*------------------------------------*/


/*-----------------h1-----------------*/
h1{
  /*各ページのトップタイトル*/
  color: #fff;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 20%;
  font-size: 2rem;/*１６px×２＝３２px（本文テキストの２倍）*/
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 1),2px 3px 3px rgba(0, 0, 0, 1);
}
h1 .En{
  /*サブの英語タイトル*/
  display: block;
  font-size: 1rem;
  padding-bottom: 1em;
}
h1 img{
  /*「深海水族館」のサイトタイトルロゴ*/
  width: 250px;
  height: 450px;
  filter: drop-shadow(10px 10px 3px rgba(7, 27, 45, 0.747));
}


@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  h1{
  font-size: 1.8em;
  }
  h1 img{
  width: 300px;
  }
}
/*------------------------------------*/

/*-----------------h2-----------------*/
h2{
  /*各記事・コンテンツのタイトル*/
  font-size: 28px;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.6);
}
h2 .En{
  /*サブの英語タイトル*/
  display: block;
  font-size: 16px;
  padding-bottom: 0.5em;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  h2{
    font-size: 20px;/*１６px×１．５＝２４px*/
  }
  h2 .En{
    font-size: 12px;
    padding: 0;
  }
}
/*------------------------------------*/

/*-----------------h3-----------------*/
h3{
  font-size: 19px;
  margin-bottom:8px;
}

@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  h3{
    font-size: 17px
  }
};
/*------------------------------------*/


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


@media print, screen and (max-width:1024px){
  /*タブレット版*/
}
@media(max-width:560px){
  /*スマホ版*/
  .inner-box{
    /*各セクションのドットボックス*/
    gap: 30px;
    padding: 20px;
  }
}
/*------------------------------------*/



/*-----ドットボックス内の補足文章------*/
/*
.sub-txt p{
  font-size: 14px;
}
/*------------------------------------*/