@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
img {
  width: 100%;
  vertical-align: bottom;
}
.mochiy-pop-p-one-regular {
  font-family: "Mochiy Pop P One", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  color: brown;
}
.rampart-one-regular {
  font-family: "Rampart One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dela-gothic-one-regular {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 600;
  font-style: normal;
}

body {
  background-color: #003b73e5;
}
/* header */
.pc-header {
  display: none;
}
.sp-header {
  display: flex;
  align-items: center;
}
header {
  position: sticky;
  background: #ffffffe9;
  top: 8px;
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  z-index: 9999;
  transition: 0.6s;
  padding: 5px 5px 0px;
  background-image: url(../img/swimy.png);
}
.sp-header .logo {
  display: flex;
  height: 50px;
  margin: 10px;
}
.pc-header .logo {
  width: 120px;
  height: 120px;
  margin: 10px;
}
.sp-header .ham {
  width: 40px;
  height: 40px;
  border: rgb(152, 78, 9) 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: fixed;
  top: 25px;
  right: 30px;
  z-index: 9999;
}

.sp-header .ham span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: rgb(152, 78, 9);
  transition: 0.7s;
}

/* nav */
.sp-nav {
  width: 100%;
  height: 50vh;
  background-image: url(../img/swimy.png);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  transition: 0.7s;
  opacity: 0;
  pointer-events: none;
}
.sp-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 2.5;
}
  
@media (min-width: 768px) {
  .sp-header,
  .sp-nav {
    display: none;
  }
.pc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pc-nav ul {
    display: flex;
  }
  .pc-nav ul li {
    width: 180px;
    height: 40px;
    margin-left: 10px;
    gap: 10px;
    padding: 10px;
    background-color: rgb(235, 228, 207);
    text-align: center;
  }
  .pc-nav a {
    display: block;
    color: brown;
  }
 .pc-nav a:hover{
  background-color: #004a8f;
  color: rgb(235, 228, 207);
  transition: 0.7s;
 } 
}

/* ハンバーガークリック後のスタイル */
.ham.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.ham.active span:nth-child(2) {
  opacity: 0;
}
.ham.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

nav ul {
  list-style: none;
}
nav.active {
  z-index: 1;
  opacity: 1;
  pointer-events: all;
}
/* hero-slide */
.slider-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin-top: 20px;
}
.slideimg {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  animation: fadeInOut 9s infinite;
  opacity: opacity 1.5s ease-in-out;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.slideimg:nth-of-type(1) {
  background-image: url(../img/penguin.jpg);
  animation-delay: 0s;
}
.slideimg:nth-of-type(2) {
  background-image: url(../img/tinnanago.jpg);
  animation-delay: 3s;
}
.slideimg:nth-of-type(3) {
  background-image: url(../img/dolphin.jpg);
  animation-delay: 6s;
}
.hero {
  position: relative;
}

@media (min-width: 768px) {
  .slider-container {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    margin-top: 20px;
  }
}
/* today */
.today {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.9;
  border-radius: 10px;
  width: 80%;
  color: white;
  text-align: center;
  font-size: 1.2rem;
  background-color: rgb(250, 218, 170);
  width: 80%;
  margin: 20px auto;
  padding: 10px;
}
.today p {
  text-align: center;
  font-size: 1.2em;
  color: #64411a;
}
.today span {
  font-weight: bold;
}
.today a {
  display: block;
  color: white;
  /* margin: 20px auto; */
  background: linear-gradient(to right, #6491e6, #b9782d, #6491e6);
  padding: 10px;
  margin: 20px 10px 10px;
  text-align: center;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .today {
    position: absolute;
    top: 750px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(250, 218, 170);
    opacity: 0.9;
    border-radius: 10px;
    width: 80%;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    padding: 10px 30px 10px;
  }
}

/*aisaatu */
.aisatu {
  padding: 30px; /* 内側の余白 */
  margin: 30px auto; /* ページの真ん中に配置 */
  max-width: 1000px; /* 最大幅 */
  position: relative; /* 波の要素を絶対配置するための基準 */
  background-color: #f0f8ff; /* わかりやすいように薄い青の背景 */
  border-radius: 10px; /* 角を少し丸める */
  overflow: hidden; /* 波が枠からはみ出ないようにする */
  width: 90%;
}

.aisatu h2 {
  font-family: serif;
  margin-bottom: 20px;
  text-align: center; /* テキストを中央寄せ */
  color: #004a8f; /* テキストの色 */
}
.aisatu p {
  font-family: serif;
  color: #012342;
  font-size: 1.2em;
}

/* 波のコンテナ（セクションの底辺に配置） */
.aisatu.wave-container {
  position: absolute;
  bottom: 0; /* 下端に配置 */
  left: 0;
  width: 100%;
  height: 10px; /* 波の高さ */
  overflow: hidden; /* 波の表現のための準備 */
}

/* 実際の波の要素 */
.aisatu .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* 横幅を広くして、揺れる範囲を確保 */
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2370c1ff' fill-opacity='1' d='M0,160L80,181.3C160,203,320,245,480,229.3C640,213,800,139,960,117.3C1120,96,1280,128,1360,144L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover; /* 背景SVG画像を覆う */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  /* 波のアニメーションを適用 */
  animation: wave-motion 8s linear infinite;
  opacity: 0.6; /* 透明度 */
}

/* 2つ目の波（動きと色を変えて奥行きを出す） */
.aisatu .second-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%234da6ff' fill-opacity='1' d='M0,192L80,176C160,160,320,128,480,117.3C640,107,800,117,960,122.7C1120,128,1280,128,1360,128L1440,128L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  animation: wave-motion 8s linear infinite reverse; /* 逆向きに動かし、速度も変える */
  opacity: 0.2;
  bottom: 5px; /* 少しずらす */
}
@keyframes wave-motion {
  0% {
    transform: translateX(0); /* 開始位置 */
  }
  100% {
    transform: translateX(-50%); /* 50%分左に移動（元の位置に戻る前に） */
  }
}
@media (min-width: 768px) {
  .aisatu.wave-container {
    position: absolute;
    bottom: 0; /* 下端に配置 */
    left: 0;
    width: 100%;
    height: 30px; /* 波の高さ */
    overflow: hidden; /* 波の表現のための準備 */
  }
  .aisatu p {
    text-align: center;
  }
}
/* pick-up */
#pickup {
  padding: 0 20px;
}
#pickup h2 {
  font-size: 10vw;
  width: fit-content;
  border-bottom: 1px solid rgb(254, 242, 227);
  color: rgb(254, 242, 227);
  margin: 50px auto 5px;
  padding: 0 20px;
}
#pickup p {
  color: rgb(254, 242, 227);
  text-align: center;
  margin-bottom: 30px;
}

.pickup-item h3 {
  text-align: center;
  height: 50px;
  padding: 10px;
  margin-bottom: 30px;
  background-color: rgb(254, 242, 227);
  font-size: 1.2em;
  color: rgb(9, 157, 225);
  border-radius: 20px;
}
.pickup-item {
  margin-bottom: 50px;
}
.pickup-item img {
  margin: 10px auto 10px;
  display: block;
  width: 90%;
  aspect-ratio: 10/7;
  object-fit: cover;
}
.pickup-item p {
  text-align: center;
  padding: 0 10px;
  margin-bottom: 20px;
  color: rgb(254, 242, 227);
}

@media (min-width: 768px) {
  #pickup h2 {
    font-size: 3vw;
    border-bottom: 2px solid rgb(254, 242, 227);
  }
  .pickup-box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pickup-item {
    width: 32%;
  }
}
/* news */
#news {
  background-image: url(../img/swimy.png);
  padding: 50px 10px;
  line-height: 2;
  margin-bottom: 80px;
}
#news h2 {
  color: rgb(9, 157, 225);
  /* border-bottom: skyblue 1px solid; */
  margin-bottom: 5px;
  font-size: 1.6em;
  text-align: center;
}
.inner-news {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

#news dt span {
  display: inline-block;
  background-color: dodgerblue;
  color: #fff;
  border-radius: 20px;
  padding: 0 10px;
  font-size: 0.8em;
  margin-left: 1em;
}
#news dd {
  border-bottom: 1px dashed #aaa;
  padding-bottom: 5px;
}
.news dd:last-child {
  border-bottom: none;
}
#news .event {
  background-color: rgb(175, 119, 21);
  color: #fff;
}
@media (min-width: 768px) {
  .inner-news {
    width: 60%;
    margin: 0 auto;
    padding: 10px 30px;
  }
  .inner-news dt {
    padding-top: 10px;
  }
  .inner-news dd {
    padding-bottom: 10px;
  }
}
/* map */

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateX(-30px); /* 左30pxの位置から */
  transition: opacity 1.2s, transform 1.2s; /* 透過率と縦方向の移動を1.2秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateX(0); /* 30px右に移動する */
  transition-delay: 0.5s; /* フェード開始を0.5秒遅らせる */
}
#map {
  padding: 20px;
}
#map h2 {
  font-size: 10vw;
  width: fit-content;
  border-bottom: 1px solid rgb(254, 242, 227);
  color: rgb(254, 242, 227);
  margin: 0 auto;
  padding: 0 20px;
}
#map .map-p {
  color: rgb(254, 242, 227);
}
#map p {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  color: rgb(9, 157, 225);
  padding: 0 20px;
}
.map-item {
  border: 2px solid rgb(9, 157, 225);
  border-radius: 5cqh;
  overflow: hidden;
  margin: 0 10px 30px;
  background-color: rgb(254, 242, 227);
}
.map-item h3 {
  text-align: center;
  background-image: url(../img/swimy.png);
  color: #fff;
  padding: 10px;
  font-size: 1.5em;
}
#map img {
  padding: 20px;
  aspect-ratio: 1.2/1;
  object-fit: cover;
}

.map-item a {
  display: block;
  width: 60%;
  background-image: url(../img/swimy.png);
  margin: 20px auto 10px;
  color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 8px;
}

@media (min-width: 768px) {
  #map h2 {
    font-size: 4vw;
    border-bottom: 2px solid darkblue;
  }

  .map-box {
    display: flex;
    width: 95%;
    margin: 0 auto;
    justify-content: space-between;
  }
  .map-item {
    width: 32%;
  }
}

/* today-event スケジュール表 */
#today-event {
  font-family: "Noto Sans JP", sans-serif;
  max-width: 1000px;
  margin: 40px 10px;
  text-align: center;
  padding: 30px 10px 30px;
  background-image: url(../img/swimy.png);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

#today-event h2 {
  text-align: center;
  color: brown;
  margin-bottom: 20px;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
}

.schedule {
  display: grid;
  width: 100%;
  font-size: 0.95rem;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
}

.schedule-header,
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.schedule-header {
  background-color: #e9f7ff;
  font-weight: bold;
}

.time-col {
  background: #f7fbfd;
  padding: 8px;
  border-right: 1px solid rgba(245, 28, 28, 0.2);
}

.event-col {
  padding: 8px;
  color: #fff;
  border-right: 1px solid rgba(245, 28, 28, 0.2);
}

/* 各イベント色 */
.dolphin {
  background-color: #5ec0a8; /* イルカショー */
}
.feeding {
  background-color: rgb(236, 171, 184); /* ペンギン餌やり（青緑） */
}
.orca {
  background-color: #5c63f2; /* シャチショー */
}

/* 行の交互色 */
.schedule-row:nth-child(even) .time-col {
  background-color: #c3eaf7;
}

/* 備考 */
.note {
  font-size: 1rem;
  text-align: center;
  color: brown;
  margin-top: 12px;
}

/* レスポンシブ */

@media (min-width: 768px) {
  #today-event {
    font-family: "Noto Sans JP", sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    text-align: center;
    padding: 30px 50px 30px;
    background-image: url(../img/swimy.png);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
}

/* access */
#access {
  width: 95%;
  margin: 0 auto 50px;
  background-color: rgb(254, 242, 227);
  padding: 30px 0 30px;
  border-radius: 10px;
  display: block;
  color: #64411a;
}
#access h2 {
  font-size: 5vw;
  width: fit-content;
  border-bottom: 1px solid rgb(9, 157, 225);
  color: rgb(9, 157, 225);
  margin: 0px auto 5px;
  padding: 0 20px;
}

#access .inv {
  text-align: center;
  color: rgb(9, 157, 225);
  margin-bottom: 20px;
}
#access h3 {
  text-align: center;
}
.time {
  color: #64411a;
  border: 1px solid #64411a;
  margin: 10px 10px 20px;
  /* padding: 5px; */
  line-height: 2em;
}
.time th,
td {
  border: 1px dotted #64411a;
  margin: 5px;
  padding-left: 5px;
}
.time tr:last-child td,
.time th:last-child {
  border-bottom: none;
}

.time th {
  width: 20%;
  border-right: 1px solid #64411a;
  padding: 5px;
}
#access a {
  width: 70px;
  display: block;
  margin: 20px auto 50px;
}
#access p {
  text-align: center;
  color: #64411a;
}
.access {
  margin: 30px 10px 20px;
}
.access th {
  width: 40%;
}
.icon-box {
  display: flex;
  justify-content: center;
  margin: 20px 50px 20px;
  gap: 20px;
}
.icon-box i {
  font-size: 40px;
  color: #64411a;
}
@media (min-width: 768px) {
  .flex-box {
    display: flex;
    padding: 10px 30px 10px;
  }
  .time th {
    width: 25%;
  }
  .access th {
    width: 25%;
  }
}